【问题标题】:Icons are not appearing in react-native图标没有出现在 react-native
【发布时间】:2018-10-10 14:27:32
【问题描述】:

我使用react-native-vector-icons/FontAwesome 显示图标,使用react-navigation 显示标签。我正在尝试在按钮导航中显示主页图标,但图标没有出现。

Icon和createBottomTabNavigator的PFB相关代码

import React from 'react';
import { createBottomTabNavigator } from 'react-navigation';
// import { Icon } from 'react-native-elements';
import Icon from 'react-native-vector-icons/FontAwesome';

import Account from '../../Form/components/Account';
import Home from '../../Layout/components/Home';

export const Tabs = createBottomTabNavigator({
  Account: { 
    screen: Account,
    navigationOptions: {
      tabBarLabel: 'Account',
      tabBarIcon: ({ tintColor }) => <Icon name="rocket" size={35} color="#fdc94c" />
    }
  },
  Home: { 
    screen: Home,
    navigationOptions: {
      tabBarLabel: 'Home',
      tabBarIcon: ({ tintColor }) => <Icon name="rocket" size={35} color="#fdc94c" />
    },
 }
}, {
  order: ['Home', 'Account'],
  tabBarOptions: {
      showLabel: true,
      showIcon: true,
      activeBackgroundColor: '#42a5f5',
      style: {
        backgroundColor: '#42a5f5',
        paddingVertical: 10,
        height: 60
      },
      indicatorStyle: {
        backgroundColor: '#42a5f5',
      }
    }
})

PFB 截图也是如此。

我需要做什么才能显示主页图标?

【问题讨论】:

    标签: javascript reactjs react-native react-navigation


    【解决方案1】:

    使用react-native link react-native-vector-icons 确保字体已链接到您的 iOS 工作区,然后重新构建应用程序

    遵循文档并确保按照他们提到的方式设置所有内容 https://github.com/oblador/react-native-vector-icons#ios

    【讨论】:

      【解决方案2】:

      运行命令 npm i -g rnpm。并在项目文件夹上运行 rnpm 链接。然后运行项目。

      【讨论】:

        【解决方案3】:

        在您的项目文件夹中运行以下命令。

        $react-native 链接

        【讨论】:

          【解决方案4】:

          您是否已将其粘贴到应用级 gradle 中??

          apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

          【讨论】:

          • 如果这不起作用,则从 node_modules/react-native-vector_icons/Fonts 复制所有字体文件并将其粘贴到 android/app/src/main/assets/fonts 中
          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2019-12-21
          • 1970-01-01
          • 2023-03-11
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多