错误：您似乎已将一个'NavigationContainer'嵌套在另一个中。用于 2 个独立的导航

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

======您的主选项卡类在此调用您的设置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>包装器。

删除这个修复了它。