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

pu82cl6c 于 2022-11-30 发布在 React

关注(0)|答案(1)|浏览(106)

我是React Native 的新手。我尝试在App.js中嵌套多个导航。我已经成功地在我的BottomTabNavigation中嵌套了StackNavigator，但没有问题。我通过将这些导航器的初始路径组件设置为等于前一个导航器来链接它们。我尝试在其中添加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)

错误：

react-native

来源：https://stackoverflow.com/questions/60640268/how-to-nest-multiple-navigators-in-react-native-v-5-not-v-4

1条答案

按热度按时间

bvjxkvbb1#

我通过仔细阅读[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>
    )
}

赞(0）回复(0）举报 2022-11-30

我来回答

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

1条答案

相关问题

热门标签

最新问答