在 React Native Expo 应用程序中组合选项卡和抽屉

Question

我有一个使用 React Navigation 6 的 React Native Expo 应用程序。我可以显示选项卡和抽屉，但是我收到此控制台警告

Found screens with the same name nested inside one another. Check

Home, Home > Home

Profile, Profile > Profile

这是我的代码

import React, { useState } from "react";
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import 'react-native-gesture-handler';
import { createDrawerNavigator } from '@react-navigation/drawer';

import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

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

import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import { createStackNavigator } from '@react-navigation/stack';
import AnimatedSplash from "react-native-animated-splash-screen";

import Home from './screens/Home';
import Profile from './screens/Profile';

const Tab = createMaterialBottomTabNavigator();
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

function TabsNavigator() {
  return (
   <Tab.Navigator>
      <Tab.Screen 
      name="Home" 
      component={Home} 
      options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="home" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen 
      name="Profile" 
      component={Profile} 
           options={{
          tabBarLabel: 'Profile',
          tabBarIcon: ({ color }) => (
            <FontAwesome5 name="user" color={color} size={26} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

 function App() {
 const [loading, setLoading] = useState(false);

  setTimeout(() => {
    setLoading(true);
  }, 3000);
  
  return (
  <AnimatedSplash
      translucent={true}
      isLoaded={loading}
      logoImage={require("./assets/splash.png")}
      backgroundColor={"#FFFFFF"}
      logoHeight={650}
      logoWidth={550}
    >
  <NavigationContainer>
  
   <Drawer.Navigator>
      <Drawer.Screen name="Home" component={TabsNavigator} />
      <Drawer.Screen name="Profile" component={TabsNavigator} />
    </Drawer.Navigator>
  
  </NavigationContainer>
    </AnimatedSplash>
    
    

  );
}

export default App

由于当我点击抽屉上的主页链接时出现警告，我无法访问主页组件。我怎样才能更正我的代码？

Answer 1

更改这些路线之一的名称，每个屏幕必须有一个唯一的名称。

这里，

*在选项卡屏幕中，名称 (name="Home") 和 ("name=profile")

在抽屉屏幕中显示名称 (name="Home") 和 ("name=profile")。

如果代码像您的情况一样嵌套，则不能相似。 只需将抽屉屏幕的名称稍微更改为 (name="HomeDrawer") 和 ("name=profileDrawer") 即可解决问题。*

并将您的模块更新到版本 6.x.