React native 无法在react native中解析@react navigation/drawer以创建抽屉导航

我正在尝试创建新的抽屉导航，但出现以下错误

Unable to resolve "react-native-screens" from "node_modules\@react-navigation\drawer\src\views\DrawerView.tsx"
Failed building JavaScript bundle.

但我在新的空项目中尝试的代码与旧版本“react navigation”中react native drawer使用的代码相同：“^2.6.2”，但在“react navigation”中不使用的代码相同：“^4.0.10”，它显示react native drawer已被删除，@react native/drawer是最新的，因此我们需要使用它，但它不起作用。请帮助我解决此问题……代码如下所示

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';

function Feed() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Feed Screen</Text>
    </View>
  );
}

function Article() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Article Screen</Text>
    </View>
  );
}

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Feed" component={Feed} />
      <Drawer.Screen name="Article" component={Article} />
    </Drawer.Navigator>
  );
}

export default function DrawerNavigator() {
  return (
    <NavigationContainer>
      <MyDrawer />
    </NavigationContainer>
  );
}

import*as React from'React'；
从“react native”导入{View，Text}；
从'@react-navigation/native'导入{NavigationContainer}；
从'@react导航/drawer'导入{createDrawerNavigator}；
函数提要（）{
返回(
进料筛
);
}
函数条（）{
返回(
文章筛选
);
}
const Drawer=createDrawerNavigator（）；
函数MyDrawer（）{
返回(
);
}
导出默认函数DrawerNavigator（）{
返回(
);
}

我知道这不是一个正确的解决方案，但不管怎样，它对我很有效

我们可以使用@react navigation/drawer，而不是@react navigation/drawer

import { createDrawerNavigator,DrawerItems} from 'react-navigation-drawer';

这是可行的，我已将我的工作代码粘贴到下面

在ReactNative更新中，他们将createDrawerNavigator和DrawerItems从react导航移动到react导航抽屉

import React from 'react';
import { StyleSheet, Text, View, SafeAreaView, ScrollView,Dimensions,Image } from 'react-native';

import { createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import { createDrawerNavigator,DrawerItems} from 'react-navigation-drawer';

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



const CustomDrawComponent=(props) => (
    <SafeAreaView style={{flex:1}}>
        <View style={{paddingTop:45, backgroundColor:'green'}}>
      <View style={{height:150,alignItems:'center', justifyContent:'center'}}>
        <Image source={require('../assets/Logos/userPic.png')} 
                style={{height:120,width:120,borderRadius:60}} />
      </View>
      </View>
      <ScrollView>
        <DrawerItems {...props}/>
      </ScrollView>
      <Text style={{paddingBottom:100, paddingLeft:65}}>Vision Cultura V1.0</Text>
    </SafeAreaView>
  )
const screens = createDrawerNavigator({
    Main: {
            screen: createStackNavigator({
            Home: {screen: Home},
            Login: {screen: Login},
            
        }, {initialRouteName: "Login"})
    },
    Home: Home,
    Login: Login

},
{
    contentComponent:CustomDrawComponent
});

const index = createAppContainer(screens);
export default index;

从“React”导入React；
从“react native”导入{样式表、文本、视图、安全区域视图、滚动视图、维度、图像}；
从“react navigation”导入{createAppContainer}；
从“反应导航堆栈”导入{createStackNavigator}；
从“react navigation drawer”导入{createDrawerNavigator，DrawerItems}；
从“../screens/Login”导入登录名；
从“../screens/Home”导入主页；
const CustomDrawComponent=（道具）=>(
视觉文化V1.0
)
const screens=createDrawerNavigator({
主要内容：{
屏幕：createStackNavigator({
主页：{screen:Home}，
登录：{屏幕：登录}，
}，{initialRouteName:“登录”}）
},
家：家，
登录：登录
},
{
contentComponent:CustomDrawComponent
});
常量索引=createAppContainer（屏幕）；
出口违约指数；

是的！这是个老问题，但我想对此作出回答。但是，我们知道，react本机软件包因版本更新而异。如果您使用（版本）V5x，请遵循以下步骤，我相信它可以正常工作

npm安装--保存导航抽屉

（安装软件包）

从“react navigation drawer”导入{createDrawerNavigator}（使用“反应导航抽屉”导入导航器）

或

要使用此抽屉导航器，请从@react navigation/drawer导入它：

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

---

您是作为依赖项安装的吗？是的，我已经安装了依赖项，并且尝试删除节点模块并重新安装。降级反应导航不是一个解决方案，只是一个糟糕的解决方法。是的，先生。在最初的问题中，您试图使用包'@react-navigation/drawer'，即react-navigation 5.x（）。由于未成功，您切换到旧的“react navigation抽屉”，即react navigation 4.x（）

npm install @react-navigation/drawer

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