Question

我正在尝试在React Native应用程序中创建底部的标签栏。

我遵循了官方文档中的示例，但是未显示某些图标。

我已经尝试过了：

const App = createBottomTabNavigator(
  {
    //Defination of Navigaton bottom options
    Home: { screen: HomeStack },
    Categories: { screen: CategoriesStack },
    Settings: { screen: SettingsStack },
  },
  {
    //For React Navigation 2.+ change defaultNavigationOptions->navigationOptions
    initialRouteName: 'Home',
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state;
        let IconComponent = Ionicons;
        let iconName;
        if (routeName === 'Home') {
          iconName = `ios-home${focused ? '' : '-outline'}`;
          // Sometimes we want to add badges to some icons.
          // You can check the implementation below.
        } else if (routeName === 'Settings') {
          iconName = `ios-options${focused ? '' : '-outline'}`;
        } else if (routeName === 'Categories') {
          iconName = `ios-list${focused ? '' : '-outline'}`;
        }

        // You can return any component that you like here!
        return <IconComponent name={iconName} size={25} color={tintColor} />;
      },
    }),
    tabBarOptions: {
      activeTintColor: '#42f44b',
      inactiveTintColor: 'gray',
    },
  }
);

这是小吃：https://snack.expo.io/@tropicalista/bottom-navigation-example

Answer 1

问题在于，每个选项卡的routeName均未正确更新。您必须像这样手动进行操作：

const App = createBottomTabNavigator(
  {
    //Defination of Navigaton bottom options
    Home: {
      screen: HomeStack,
      navigationOptions: () => ({
        tabBarIcon: ({tintColor}) => (
          <IconComponent name='ios-home' size={25} color={tintColor} />
        )
      })
    },
    Categories: {
      screen: CategoriesStack,
      navigationOptions: () => ({
        tabBarIcon: ({tintColor}) => (
          <IconComponent name='ios-list' size={25} color={tintColor} />
        )
      })
    },
    Settings: {
      screen: SettingsStack,
      navigationOptions: () => ({
        tabBarIcon: ({tintColor}) => (
          <IconComponent name='ios-options' size={25} color={tintColor} />
        )
      })
    },
  },
  {
    //For React Navigation 2.+ change defaultNavigationOptions->navigationOptions
    initialRouteName: 'Home',
    tabBarOptions: {
      activeTintColor: '#42f44b',
      inactiveTintColor: 'gray',
    },
  }
);

如何在React Native的标签栏上显示图标？

1 个答案: