Error: Looks like you have nested a 'NavigationContainer' inside another. For 2 separate naviagtions

Question

我有以下导航：

tabNavigator.js

import React from 'react';
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { createStackNavigator } from '@react-navigation/stack'
import { NavigationContainer } from '@react-navigation/native'

import HomeScreen from "../screens/homeScreen"
import SearchScreen from "../screens/searchScreen"
import MessagesScreen from "../screens/messagesScreen"
import SettingsScreen from "../screens/settingsScreen"
import EditProfileScreen from "../screens/editProfileScreen"

const SettingsStack = createStackNavigator();
const SettingsNavigator = () => (
    <SettingsStack.Navigator>
        <SettingsStack.Screen name="Settings" component={SettingsScreen} />
        <SettingsStack.Screen name="EditProfileScreen" component={EditProfileScreen} options={{ title: 'Edit Profile' }} />
    </SettingsStack.Navigator>
)

const Tab = createBottomTabNavigator();
const TabNavigator = () => (
    <NavigationContainer>
        <Tab.Navigator>
            <Tab.Screen name="Home" component={HomeScreen} />
            <Tab.Screen name="Search" component={SearchScreen} />
            <Tab.Screen name="Messages" component={MessagesScreen} />
            <Tab.Screen name="Settings" component={SettingsNavigator} />
        </Tab.Navigator>
    </NavigationContainer>
)


export default TabNavigator

我遇到了以下问题：

Error: Looks like you have nested a 'NavigationContainer' inside another. Normally you need only one container at the root of the app, so this was probably an error. If this was intentional, pass 'independent={true}' explicitely. Note that this will make the child navigators disconnected from the parent and you won't be able to navigate between them.

我试过删除 NavigationContainer 但这不起作用。

我想我已将其缩小为以下问题：

<Tab.Screen name="Settings" component={SettingsNavigator} />

将 SettingsNavigator 传入选项卡。但不是 100% 确定。

Answer 1

你能试试像这样把它做成一个单独的文件吗

const SettingsStack = createStackNavigator();
const SettingsNavigator = () => (
    <SettingsStack.Navigator>
        <SettingsStack.Screen name="Settings" component={SettingsScreen} />
        <SettingsStack.Screen name="EditProfileScreen" component={EditProfileScreen} options={{ title: 'Edit Profile' }} />
    </SettingsStack.Navigator>
)
}
export default SettingsStack

======= 你的主选项卡 class 这里调用你的设置 Navigator=======

const Tab = createBottomTabNavigator();
const TabNavigator = () => (
    <NavigationContainer>
        <Tab.Navigator>
            <Tab.Screen name="Home" component={HomeScreen} />
            <Tab.Screen name="Search" component={SearchScreen} />
            <Tab.Screen name="Messages" component={MessagesScreen} />
            <Tab.Screen name="Settings" component={SettingsNavigator} />
        </Tab.Navigator>
    </NavigationContainer>
)


export default TabNavigator

那行得通。

Answer 2

我的 App.js 中还有另一个 <NavigationContainer> 包装纸。

删除这个修复了它。

Error: Looks like you have nested a 'NavigationContainer' inside another. For 2 separate naviagtions

Error: Looks like you have nested a 'NavigationContainer' inside another. For 2 separate naviagtions

react-native

react-navigation