题意：

Error: Looks like you have nested a 'NavigationContainer' inside another. Normally you need only one container at the root of the app

错误：看起来你在另一个 'NavigationContainer' 内嵌了一个 'NavigationContainer'。通常，你只需要在应用的根部使用一个容器。

问题背景：

I followed the docs of React 5 for Drawer Navigation in react native but getting this error. Here is my Code

我按照 React 5 的文档进行操作，在 React Native 中使用 Drawer 导航，但出现了这个错误。以下是我的代码：

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;

I am new to react native, so don't know what to do

我刚接触 React Native，所以不知道该怎么做。

问题解决：

You only need to declare one < NavigationContainer > in the top component, example:

你只需要在顶层组件中声明一个 <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>
  );
}