如何在 React Native v.5（不是 v.4）中嵌套多个导航器

Question

我刚开始反应原生。我试图在我的 App.js 中嵌套多个导航。我已经成功地在我的BottomTabNavigation 中嵌套了一个StackNavigator，有 0 个问题我通过将它们的初始路由组件设置为等于先前的导航器来链接这些导航器。我试图在那里添加一个DrawerNavigation但一直收到错误。我所有的代码都在 1 个文件中（App.js）。我将如何处理这个问题？

堆栈导航器

const navigator = createStackNavigator(
{
    Home: {
        screen: HomeScreen,
        navigationOptions: {
            headerShown: false,
        },
    },
    Favs: {
        screen: CrossingScreen,
        navigationOptions: {
            title: 'News',
            headerTitleStyle: {
                color: 'white',
            },
            headerStyle: {
                backgroundColor: 'red',
            },
            headerBackTitle: null,
            headerTintColor: 'white',
        },
    },
},
{
    initialRouteName: 'Home',
    headerMode: 'screen',
})

底部标签导航器

const TabNavigator = createMaterialBottomTabNavigator(
{
    Home: {
        screen: navigator,
        navigationOptions: {
            tabBarLabel: 'Home',
            tabBarIcon: ({ tintColor }) => (
                <View>
                    <Icon
                        style={[{ color: tintColor }]}
                        size={25}
                        name={'train'}
                    />
                </View>
            ),
        },
    },
    FavScreen: {
        screen: FavScreen,
        navigationOptions: {
            tabBarLabel: 'Favorites',
            tabBarIcon: ({ tintColor }) => (
                <View>
                    <Icon
                        style={[{ color: tintColor }]}
                        size={28}
                        name={'star'}
                    />
                </View>
            ),
            activeColor: '#f60c0d',
            inactiveColor: '#f65a22',

            barStyle: { backgroundColor: '#f69b31' },
        },
    },
    MapScreen: {
        screen: MapScreen,
        navigationOptions: {
            tabBarLabel: 'Map',
            tabBarIcon: ({ tintColor }) => (
                <View>
                    <Icon
                        style={[{ color: tintColor }]}
                        size={25}
                        name={'map'}
                    />
                </View>
            ),
            activeColor: '#615af6',
            inactiveColor: '#46f6d7',
            barStyle: { backgroundColor: '#67baf6' },
        },
    },
    Cart: {
        screen: CartScreen,
        navigationOptions: {
            tabBarLabel: 'Feedback',
            tabBarIcon: ({ tintColor }) => (
                <View>
                    <Icon
                        style={[{ color: tintColor }]}
                        size={25}
                        name={'mail'}
                    />
                </View>
            ),
        },
    },
    Cart2: {
        screen: CartScreen,
        navigationOptions: {
            tabBarLabel: 'Add',
            tabBarIcon: ({ tintColor }) => (
                <View>
                    <Icon
                        style={[{ color: tintColor }]}
                        size={25}
                        name={'add'}
                    />
                </View>
            ),
        },
    },
},

{
    initialRouteName: 'Home',
    activeColor: '#f0edf6',
    inactiveColor: '#226557',
    barStyle: { backgroundColor: '#3BAD87' },
})

抽屉导航器

const DrawerNav = createDrawerNavigator(
{
    Page1: {
        screen: TabNavigator,
    },
    Page2: {
        screen: FavScreen,
    },
    Page3: {
        screen: MapScreen,
    },
},
{
    contentComponent: SideMenu,
    drawerWidth: 300,
})

将其导出到 App.js 的应用程序容器中

export default createAppContainer(DrawerNav)

**错误 ： **

Answer 1

我通过仔细阅读 [ https://reactnavigation.org/docs/upgrading-from-4.x][1]解决了我的问题

Navigation API 在 v4.0 和 v5.0 之间发生了很大变化

这就是在 Drawer Navigator 中嵌套 StackNavigator 和 MaterialBottomTabNavigatior 的方法

如果您使用常规的BottomTabNavigatior，则实现相同

const Tab = createMaterialBottomTabNavigator()
const Stack = createStackNavigator()
const Drawer = createDrawerNavigator()

export default class App extends Component {
    //ALL NAVIGATION STACKS IN 1 CONTAINER
    render() {
        return (
            <NavigationContainer>
                <Drawer.Navigator initialRouteName="Home">
                    <Drawer.Screen name="Home" component={MyStack} />
                </Drawer.Navigator>
            </NavigationContainer>
        )
    }
}

const MyStack = () => {
    return (
        <Stack.Navigator>
            <Stack.Screen
                name="Home"
                component={BottomNav}
                options={{
                    headerShown: false,
                }}
            />
            <Stack.Screen name="Crossing" component={CrossingScreen} />
        </Stack.Navigator>
    )
}
const BottomNav = () => {
    return (
        <Tab.Navigator initialRouteName="Home">
            <Tab.Screen
                name="Home"
                component={HomeScreen}
                options={{
                    tabBarIcon: ({ tintColor }) => (
                        <View>
                            <Icon
                                style={[{ color: tintColor }]}
                                size={28}
                                name={'train'}
                            />
                        </View>
                    ),
                }}
            />
            <Tab.Screen
                name="Favorites"
                component={FavScreen}
                options={{
                    tabBarIcon: ({ tintColor }) => (
                        <View>
                            <Icon
                                style={[{ color: tintColor }]}
                                size={28}
                                name={'star'}
                            />
                        </View>
                    ),
                }}
            />
            <Tab.Screen
                name="Map"
                component={MapScreen}
                options={{
                    tabBarIcon: ({ tintColor }) => (
                        <View>
                            <Icon
                                style={[{ color: tintColor }]}
                                size={28}
                                name={'map'}
                            />
                        </View>
                    ),
                }}
            />
            <Tab.Screen
                name="Feedback"
                component={ContactScreen}
                options={{
                    tabBarIcon: ({ tintColor }) => (
                        <View>
                            <Icon
                                style={[{ color: tintColor }]}
                                size={28}
                                name={'mail'}
                            />
                        </View>
                    ),
                }}
            />
            <Tab.Screen
                name="Add"
                component={AddScreen}
                options={{
                    tabBarIcon: ({ tintColor }) => (
                        <View>
                            <Icon
                                style={[{ color: tintColor }]}
                                size={28}
                                name={'add'}
                            />
                        </View>
                    ),
                }}
            />
        </Tab.Navigator>
    )
}