错误：看起来您在另一个中嵌套了一个“NavigationContainer”。通常你只需要在应用程序的根目录下一个容器

Question

我在 react native 中遵循了 React 5 for Drawer Navigation 的文档，但遇到了这个错误。这是我的代码

import React from 'react'
import {
    View,
    Button,
    Text,
} from 'react-native'

import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

import Screen1 from './DrawerScreens/Screen1';
import Screen2 from './DrawerScreens/Screen2';
import Screen3 from './DrawerScreens/Screen3';

const Drawer = createDrawerNavigator();

function Navigations()
{
    return(
        <NavigationContainer>
            <Drawer.Navigator initialRouteName="Home">
                <Drawer.Screen name="Home" component={Screen1} />
                <Drawer.Screen name="Settings" component={Screen2} />
                <Drawer.Screen name="Contacts" component={Screen3} />
            </Drawer.Navigator>
        </NavigationContainer>
    );
}

export default Navigations;

我是本机反应的新手，所以不知道该怎么做

Answer 1

传递independent={true}给两个导航容器。

<NavigationContainer independent={true}>
</NavigationContainer>

但是您将无法在两个单独的导航容器的屏幕之间导航

如果您想在它们之间导航，那么您必须维护单个导航容器。

Answer 2

只需要在顶层组件中声明一个<NavigationContainer>，例如：

function SecondComponent() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Feed" component={Feed} />
      <Tab.Screen name="Messages" component={Messages} />
    </Tab.Navigator>
  );
}

function FirstComponent() {
  return (
    <NavigationContainer> {/* this is the only NavigationContainer */}
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Profile" component={Profile} />
        <Stack.Screen name="Settings" component={Settings} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}