Question


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>)
  }
});

如何在此处的标签导航器中向每个标签添加图标？现在只显示文本。我要添加什么到TabNav来为Home和Interact添加图标？

Answer 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的官方文档

我希望这会有所帮助。...谢谢：）

如何在标签浏览器中的标签上添加图标？

1 个答案: