使用 React Native 在标签栏中显示图标答案

【问题标题】：Displaying icons in tab bar with React Native使用 React Native 在标签栏中显示图标
【发布时间】：2020-06-08 07:20:32
【问题描述】：

我是原生反应新手，我正在尝试在我的选项卡菜单中显示图标。

我尝试过使用 FontAwesome、FontAwesome5、react-native-vector-icons 和 Ionicons。这些似乎都没有显示任何图标，我不知道为什么。

这是我的代码。

const TabNavigator = createBottomTabNavigator({
  Home: { 
    screen: HomeScreen,
    defaultnavigationOptions: {
      tabBarIcon: ({ tintColor }) => (
        <Icon name="home" color="#ccc"size={25} />
        )
    },
  },
   
  Events: { 
    screen: EventScreen,
     defaultnavigationOptions: {
      tabBarIcon: ({ tintColor }) => (
        <Icon name="home" color="#ccc"size={25} />
        )

  },
  About: { 
    screen: AboutScreen,
     defaultnavigationOptions: {
      tabBarIcon: ({ tintColor }) => (
        <Icon name="home" color="#ccc"size={25} />
        )
  }
},
 { tabBarOptions: { 
    showIcon: true,
    activeTintColor: '#D4AF37',
      inactiveTintColor: 'gray',
      style: {
       backgroundColor: 'white', 
},
  labelStyle: {
    fontSize: 20,
  }
}
 }
);

【问题讨论】：

您是否将图标字体添加到您的 Xcode 项目中？
是的，我现在已经这样做了，一切正常。
很高兴能帮到你

标签： javascript reactjs react-native icons

【解决方案1】：

试试这个方法

const MainNavigator = createBottomTabNavigator(
  {
    Home: {
      screen: HomeNavigation,
      navigationOptions: ({navigation}) => ({
        title:  'home',
        tabBarIcon: <Icon name="home" color="#ccc"size={25} />,
      }),

    },
 {
    initialRouteName: 'Home',
    lazy: false,
    tabBarOptions: {
        activeTintColor: '#d63921',
        labelPosition: 'below-icon'
      },
  },
);

请随意怀疑。

【讨论】：

现在我收到一个错误提示“无法识别的字体系列”