Question

我正在为应用程序使用反应导航。我将选项卡和抽屉导航与抽屉导航作为根导航结合在一起。工作正常。但是我在将抽屉图标放置在抽屉中的选项卡导航屏幕时遇到了问题。我如何在标签导航屏幕中显示抽屉项目的图标。

const rootNav = createBottomTabNavigator({
    Discover: Discover,
    Nearby: IndexMap,
},
{
    navigationOptions: ({ navigation }) => ({
        tabBarIcon: ({ focused, tintColor }) => {
            const { routeName } = navigation.state;
            let iconName;
            if (routeName === 'Discover') {
                iconName = `ios-information-circle${focused ? '' : '-outline'}`;
            } else if (routeName === 'Nearby') {
                iconName = `ios-options${focused ? '' : '-outline'}`;
            }

            // You can return any component that you like here! We usually use an
            // icon component from react-native-vector-icons
            return <Ionicons name={iconName} size={25} color={tintColor} />;
        },
    }),
    tabBarOptions: {
        activeTintColor: 'tomato',
        inactiveTintColor: 'gray',
    },
});
const AppDrawNavigator = createDrawerNavigator({

    Home: rootNav,
    Profile: Profile,
    List: List,
    Bookmarks: Bookmark,
    Payments: StackNav,
    Settings: SettingsScreen,
    Support: Support,
}, 
{
    contentComponent: props => (
        <CustomDrawerComponent {...props} navigation={props.navigation} />
    ),
    contentOptions: {
        activeTintColor: 'orange'
    }
},
{
    navigationOptions: ({ navigation }) => ({
        drawerIcon: ({ focused, tintColor }) => {
            const { routeName } = navigation.state;
            let iconName;
            if (routeName === 'Home') {
                iconName = `ios-information-circle${focused ? '' : '-outline'}`;
            } else if (routeName === 'Nearby') {
                iconName = `ios-options${focused ? '' : '-outline'}`;
            }

            // You can return any component that you like here! We usually use an
            // icon component from react-native-vector-icons
            return <Ionicons name={iconName} size={25} color={tintColor} />;
        },
    }),
    tabBarOptions: {
        activeTintColor: 'tomato',
        inactiveTintColor: 'gray',
    },
});

Answer 1

我终于找到了解决方法。这解决了它：

rootNav.navigationOptions = {
  tabBarLabel: "Home",
  tabBarIcon: ({ tintColor }: TabScene) =><FontAwesome name='home' style = {{fontSize:24, color:tintColor}}  />,
  drawerLabel: "Home",
  drawerIcon: ({ tintColor }: TabScene) =><FontAwesome name='home' style = {{fontSize:24, color:tintColor}}  />
};

React Native混合导航上的抽屉图标

1 个答案: