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

Question

我是本地人的新手，正在尝试在我的选项卡菜单中显示图标。

我尝试过使用 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, } } } );

Answer 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'
      },
  },
);

有疑问请随意。