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

Question

我是 React Native 的新手。我试图在我的 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]

解决了我的问题

导航 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>
    )
}

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

How to Nest Multiple Navigators in React Native v.5 (Not v.4)

navigation-drawer

react-native

react-native-navigation