如何在“反应导航4”中显示选项卡栏图标

Question

我想显示底部标签焦油在反应导航4，但没有运气使它发生，甚至我使用它。有人能帮我找出我的代码的问题或者我应该使用哪个选项吗？

static navigationOptions = {
    title: "Map",
    tabBarIcon: ({ tintColor }) => {
      return <Icon name="home" size={30} color={tintColor} />;
    }
}

在任何组件屏幕中，它仍然不能工作。

这里是我的路由器

我想将下面的选项卡图标应用到主屏幕上

const MainAuthenticated = createAppContainer(
  createBottomTabNavigator(
    {
      main: {
        screen: createBottomTabNavigator({
          Marketplace: {
            screen: createStackNavigator({
              home: {
                screen: HomeScreen,
              },
              profile: { screen: Profile },
              business: { screen: MyBusiness },

              logout: { screen: Logout },

              itemlist: { screen: ItemList },
              itemcreate: { screen: ItemCreate },
              itemdetail: { screen: ItemDetail },
              businesscreate: { screen: BusinessCreate },
              businessdetail: { screen: MyBusinessDetail },
            }),
          },
          XOrders: { screen: OrderScreen },
          Favorite: { screen: FavoriteScreen },
        }),
      },
    },
    {
      defaultNavigationOptions: {
        tabBarVisible: false,
      },
    },
  ),
);

Answer 1

下面是在react-navigation v4中添加底部选项卡条图标的工作代码

import Ionicons from 'react-native-vector-icons/Ionicons';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';

export default createBottomTabNavigator(
  {
    Home: HomeScreen,
    Settings: SettingsScreen,
  },
  {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state;
        let IconComponent = Ionicons;
        let iconName;
        if (routeName === 'Home') {
          iconName = focused
            ? 'ios-information-circle'
            : 'ios-information-circle-outline';
          // Sometimes we want to add badges to some icons.
          // You can check the implementation below.
          IconComponent = HomeIconWithBadge;
        } else if (routeName === 'Settings') {
          iconName = focused ? 'ios-list-box' : 'ios-list';
        }

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

如果您想要使用一些.png或jpeg或其他图像文件，而不是矢量图标，只需替换

<IconComponent name={iconName} size={25} color={tintColor} /> // replace this with below

<Image source={require('your image path')} style={{height: 30, width: 30}} />