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

IT技术 javascript reactjs react-native
2021-05-19 14:59:09

我在 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的新手，所以不知道该怎么做

4个回答

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

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

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

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

如果要在它们之间导航，则必须维护单个导航容器。

如果您NavigationContainer的应用中只有一个，请检查您是否正确导入屏幕。

就我而言，我错误地导入了包含NavigationContainer自身的入口路由文件。

如果您对入口路由文件（例如Root.tsx或Main.tsx）使用相同的文件名并让 IDE 自动导入文件，就会发生这种情况。

在我的情况下，我使用了 BOTTOM NAVIGATION 所以它<NavigationContainer> 只是<NavigationContainer>在 BOTTOM NAVIGATION 中删除并且只保留它之间<Stack.Navigator>解决了我的问题

我认为这对某人有帮助 ✌

其它你可能感兴趣的问题
上一篇在玩笑中针对抛出的错误对象断言 下一篇react-router路由中的尾随正斜杠