无法解析 @react-navigation/drawer 在本机中创建抽屉导航

Question

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

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>
  );
}

Answer 1

我知道这不是一个正确的解决方案，但无论如何它对我有用...

我们可以使用

代替@react-navigation/drawer

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

这是有效的，我已经在下面粘贴了我的工作代码

在 ReactNative 更新中，他们将 createDrawerNavigator 和 DrawerItems 从 react-navigation 移到了 react-navigation-drawer...

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;

Answer 2

是啊！这是一个老问题，但我想回答这个问题。但是我们知道 React Native 包会根据版本更新而变化。如果您使用（版本）V5x，请按照以下步骤操作，我确定它有效。

npm install --save react-navigation-drawer（安装包）
import { createDrawerNavigator } from 'react-navigation-drawer';（使用 'react-navigation-drawer' 导入导航器）

Answer 3

npm install @react-navigation/drawer

或

npm install @react-navigation/drawer

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

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

无法解析 @react-navigation/drawer 在本机中创建抽屉导航

Unable to resolve @react-navigation/drawer in react native to create drawer navigation

react-native

react-navigation-drawer