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

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