javascript - 错误 : Looks like you have nested a 'NavigationContainer' inside another. 通常你只需要一个容器在应用程序的根目录

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;

我是新手 react 原生，所以不知道该怎么做

Answer 1

只需要在顶层组件中声明一个 ，例如:

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>
  );
}