如何将图标添加到 tabnavigator 中的选项卡？答案

【问题标题】：How do you add icons to tabs in the tabnavigator?如何将图标添加到 tabnavigator 中的选项卡？
【发布时间】：2019-12-05 06:38:22
【问题描述】：


const OneNav = createStackNavigator({
  Home: {screen: pages.Home},
  Social: {screen: pages.Social},
  House: {screen: pages.House},
},{
  initialRouteName: 'Home',
});

const TwoNav = createStackNavigator({
  Home: {screen: Two}
},{
  initialRouteName: 'Home',
});

const TabNav = createBottomTabNavigator({
  Home: {screen: OneNav},
  Interact: {screen: TwoNav},
},{
  initialRouteName: 'Check',
  defaultNavigationOptions: {
    headerTitle: () => (
      <View>
        <Logo />
      </View>)
  }
});

如何在此处的 tabnavigator 中为每个选项卡添加图标？现在只显示文本。我应该向 TabNav 添加什么来为 Home 和 Interact 添加图标？

【问题讨论】：

标签： react-native react-native-navigation react-native-tabnavigator

【解决方案1】：

下面是你可以尝试的代码：

// You can import Ionicons from @expo/vector-icons if you use Expo or
// react-native-vector-icons/Ionicons otherwise.
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 = `ios-information-circle${focused ? '' : '-outline'}`;
          // Sometimes we want to add badges to some icons.
          // You can check the implementation below.
          IconComponent = HomeIconWithBadge;
        } else if (routeName === 'Settings') {
          iconName = `ios-options`;
        }

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

更多你可以从他们的官方文档中阅读here

我希望这会有所帮助....谢谢:)

【讨论】：