React Native运行Android遇500错误：无法解析@react-navigation/stack模块

错误核心信息 #

开发服务器返回响应错误码500，请求URL：http://localhost:8081/index.bundle?platform=android&dev=true&lazy=true&minify=false&app=com.yuda&modulesOnly=false&runModule=true
关键报错：Unable to resolve module @react-navigation/stack from C:\MobileApp\Yuda\Navigation.tsx: @react-navigation/stack could not be found within the project or in these directories: node_modules、..\node_modules

解决方案 #

步骤1：安装缺失的依赖包 #

项目未安装@react-navigation/stack模块，同时需要补充React Navigation的基础依赖库，执行对应命令：

使用npm：

npm install @react-navigation/stack react-native-screens react-native-safe-area-context react-native-gesture-handler

使用Yarn：

yarn add @react-navigation/stack react-native-screens react-native-safe-area-context react-native-gesture-handler

步骤2：配置Android端代码 #

修改android/app/src/main/java/com/yuda/MainActivity.java（或对应Kotlin文件），适配react-native-screens的运行要求：

import android.os.Bundle;
import com.facebook.react.ReactActivity;

public class MainActivity extends ReactActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    // 替换原有的super.onCreate(savedInstanceState)
    super.onCreate(null);
  }

  // 保留其他原有代码...
}

步骤3：初始化Gesture Handler #

在项目入口文件（如index.js或App.js）的最顶部添加初始化语句：

import 'react-native-gesture-handler';

步骤4：清除缓存并重启服务 #

1. 停止当前开发服务器，执行命令清除Metro缓存：

npx react-native start --reset-cache

2. 重新运行Android项目：

npx react-native run-android

步骤5：检查导入语句正确性 #

确保Navigation.tsx中的导入拼写无错误：

import { createStackNavigator } from '@react-navigation/stack';

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