发现具有相同名称的屏幕彼此嵌套。这可能会导致导航过程中出现混乱的行为。反应导航 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;

应用程序.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"
     }

})

我有错误

**> 发现具有相同名称的屏幕彼此嵌套。查看：

概述、概述 > 概述 这可能会导致导航过程中出现混乱的行为。考虑为每个屏幕使用唯一的名称。**

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

Answer 1

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

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

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

Answer 2

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

应用程序.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/