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

Question

我是新来对本地人做出反应。我试图在App.js中嵌套多个导航。我已经成功在BottomTabNavigation中嵌套了一个StackNavigator，出现了0个问题。Im通过将其初始路径组件设置为与先前的导航器相等来链接这些导航器。我试图在其中添加DrawerNavigation，但始终收到错误。我所有的代码都在1个文件中（App.js）。我将如何处理？

Stack Navigator

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]]解决了我的问题，>

导航API在v4.0和v5.0之间进行了重大更改

这是将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>
    )
}