发现同名屏幕相互嵌套。这可能会导致导航期间出现混淆行为。反应导航 5.x

Question

TabScreenStack.js

import { StyleSheet, Text, View, Button } from 'react-native';
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';

import HomeScreen from './home';
import DehazeRoundedIcon from '@material-ui/icons/DehazeRounded';
import LoginScreen from './login';
import AboutScreen from './about';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
const Tab = createMaterialBottomTabNavigator();
const LoginStack = createStackNavigator();
const HomeStack = createStackNavigator();
const AboutStack = createStackNavigator();


const HomeStackScreen = ({ navigation }) => (

    <HomeStack.Navigator >
        <HomeStack.Screen name="Home" component={HomeScreen} options={{
            headerLeft: () => {
                return (
             <View style={styles.drawer}>
                <DehazeRoundedIcon onClick = {() => navigation.openDrawer()} />
             </View>
            )
            },
        
        }} />   
    </HomeStack.Navigator>
  );


const LoginStackScreen = ({navigation}) => (
 
        <LoginStack.Navigator>
            <LoginStack.Screen name="Login" component = {LoginScreen} />
        </LoginStack.Navigator>
    );

const AboutStackScreen = ({navigation}) => (
 
      <AboutStack.Navigator>
          <AboutStack.Screen name="About" component = {AboutScreen} />
      </AboutStack.Navigator>
  );


const TabStackScreen = ({ navigation }) => (

  <Tab.Navigator initialRouteName="Home" activeColor="#e91e63" barStyle={{ backgroundColor: 'white' }}>
      <Tab.Screen
        name="Overview"
        component={HomeScreen}
      />
      <Tab.Screen
        name="Register"
        component={LoginScreen}
        
      />
      <Tab.Screen
        name="knowledge"
        component={AboutScreen}
      />
  </Tab.Navigator>
  );

  const styles = StyleSheet.create({
    drawer: {
        paddingLeft: 10,
    },
})
  export default TabStackScreen;

App.js

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

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

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


const Drawer = createDrawerNavigator();

import TabStackScreen from './screens/TabStackScreen';





const App = () => {  
    return (
        <NavigationContainer>
            <Drawer.Navigator>
                <Drawer.Screen name="Overview" style={styles.homenav} component={TabStackScreen} />
                {/*<Drawer.Screen name="Login" component={LoginStackScreen} /> */}
            </Drawer.Navigator>
        </NavigationContainer>
    );
}

export default App;

const styles = StyleSheet.create({
     drawer: {
         paddingLeft: 10,
     },
     homenav: {
         display:"flex",
         justifyContent: "center"
     }

})

我有

的错误

**> 发现同名屏幕相互嵌套。检查：

Overview, Overview > Overview This can cause confusing behavior during navigation. Consider using unique names for each screen instead.**

导入和版本没有错误，所有模块都在 5.x 版本中，而且我尝试了不同的名称，但仍然连续出错。有人可以帮助我吗？谢谢。

Answer 1

更改其中一个路由的名称，每个屏幕都必须有一个唯一的名称。

<Tab.Screen
   name="Overview"
   component={HomeScreen}
/>

<Drawer.Screen name="Overview" style={styles.homenav} component={TabStackScreen} />

Answer 2

我遇到了同样的问题，就像 Ahmed Gaber 在之前的回答中提到的那样，为我解决问题的方法是将每个屏幕的名称（无论是抽屉屏幕、堆栈屏幕还是 TabStack 屏幕）更改为唯一的名称。如果您更改了其中一个屏幕中的 'Overview' 名称，但问题仍然存在，我猜是其中一个屏幕在您的代码中的其他地方仍然以相同的名称命名。

您可能还需要将 Tab.Navigator 中给定的 initialRoute 名称更改为给定的屏幕名称之一在 Tab.Screen。当前给出的名称“主页”不在给出的 3 个名称（即概述、注册、知识）中。

我不确定这是否对您有帮助，但这对我有用。请分享对您有用的方法。

PS：react-navigation网站这里给出的例子 https://reactnavigation.org/docs/tab-based-navigation#a-native-stack-navigator-for-each-tab 确实为多个屏幕使用相同的屏幕名称，不知道为什么。这样做给了我和你一样的控制台错误。

您也可以参考这些，看看是否能解决您的问题

https://reactnavigation.org/docs/screen-options-resolution/

https://reactnavigation.org/docs/nesting-navigators/

Answer 3

如果要添加标签栏，请删除 tabScreenStack 页面。删除后，您必须对 App.js 进行更改。这是我在代码中所做的更改

App.js

import { StyleSheet, Text, View, Button } from "react-native";
import React from "react";

import { createDrawerNavigator } from "@react-navigation/drawer";

import { NavigationContainer } from "@react-navigation/native";

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

import HomeScreen from "./screens/home";
import LoginScreen from "./screens/login";
import AboutScreen from "./screens/about";
import ContactScreen from "./screens/contact";
const Drawer = createDrawerNavigator();

const Tab = createBottomTabNavigator();

function HomeTabs() {
  return (
    <Tab.Navigator initialRouteName="Login">
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{ headerShown: false }}
      />
      <Tab.Screen
        name="AboutUs"
        component={AboutScreen}
        options={{ headerShown: false }}
      />
      <Tab.Screen
        name="Login"
        component={LoginScreen}
        options={{ headerShown: false }}
      />
      <Tab.Screen
        name="Contact"
        component={ContactScreen}
        options={{ headerShown: false }}
      />
    </Tab.Navigator>
  );
}

const RootStack = createNativeStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen
          name="Overview"
          style={styles.homenav}
          component={HomeTabs}
        />
        {/*<Drawer.Screen name="Login" component={LoginStackScreen} /> */}
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

export default App;

const styles = StyleSheet.create({
  drawer: {
    paddingLeft: 10,
  },
  homenav: {
    display: "flex",
    justifyContent: "center",
  },
});

它对我有用。实际上为什么它很乱，因为我试图同时放置 createStackNavigator 和 TabStackNavigator（在版本 5.x 的方法中）。但实际上诀窍是，如果我想把两者都放在我的 android 上，你必须只使用 tabStacknavigator 和版本 6.x 会处理它。因此，将您的版本更新为 6.x 并按照代码进行操作，或者您可以阅读他们的文档 https://reactnavigation.org/blog/2021/03/12/react-navigation-6.0-next/

Answer 4

在您的应用中，所有的导航器都应该有唯一的屏幕名称！所以这似乎不是一个错误！

Answer 5

给你的导航器一个不同的名字在你的堆栈导航器中使用初始路线名称。因为默认情况下，第一个屏幕将从您的堆栈导航器呈现。

发现同名屏幕相互嵌套。这可能会导致导航期间出现混淆行为。反应导航 5.x

Found screens with the same name nested inside one another. This can cause confusing behavior during navigation. React navigation 5.x

react-native

expo

react-navigation-v5