React Native无法解析@react-navigation/drawer问题求助

以下是针对你遇到问题的排查和解决步骤：

1. 确认完整安装所有必需依赖 #

抽屉导航除了@react-navigation/drawer，还需要依赖@react-navigation/native、react-native-gesture-handler和react-native-reanimated，确保你执行了完整的安装命令：

npm用户： #

npm install @react-navigation/native @react-navigation/drawer react-native-gesture-handler react-native-reanimated

Yarn用户： #

yarn add @react-navigation/native @react-navigation/drawer react-native-gesture-handler react-native-reanimated

2. 配置React Native Reanimated #

Reanimated需要额外的Babel配置，否则可能导致依赖无法被正确识别：

1. 打开项目根目录的babel.config.js文件
2. 在plugins数组中添加react-native-reanimated/plugin，修改后文件如下：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['react-native-reanimated/plugin'],
};

3. 清除缓存并重启Metro服务器 #

缓存问题是常见的原因，执行以下步骤：

1. 关闭当前运行的Metro服务器（按Ctrl+C）
2. 执行缓存重置命令：

# npm
npm start --reset-cache

# yarn
yarn start --reset-cache

3. 重新运行项目：npm run android或npm run ios（对应yarn命令）

4. 验证依赖是否存在于package.json #

打开项目根目录的package.json，检查dependencies字段中是否包含@react-navigation/drawer。如果没有，说明之前的安装命令执行失败，重新执行安装命令。

5. 确认导入语句无误 #

你的代码中导入语句是正确的，但再次确认没有拼写错误：

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

你的代码（修正转义后的版本）： #

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

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        onPress={() => navigation.navigate('Notifications')}
        title="Go to notifications"
      />
    </View>
  );
}

function NotificationsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button onPress={() => navigation.goBack()} title="Go back home" />
    </View>
  );
}

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Notifications" component={NotificationsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

内容的提问来源于stack exchange，提问作者user19725334