React Native v0.61.5 Android构建报错：无法解析./index.android模块

我在构建集成了react-navigation的React Native v0.61.5 Android应用时遇到了一个奇怪的错误，iOS端运行完全正常，但Android端一直提示找不到index.android相关文件。我很困惑，因为React Native早就把入口文件合并成单一的index.js了，不清楚为什么还会出现这个错误。

完整错误日志 #

Loading dependency graph, done. Error: Unable to resolve module ./index.android from ``: None of these files exist:

• index.android(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
• index.android/index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
  at ModuleResolver.resolveDependency (/Users/name/Desktop/Development/app/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:163:15)
  at ResolutionRequest.resolveDependency (/Users/name/Desktop/Development/app/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
  at DependencyGraph.resolveDependency (/Users/name/Desktop/Development/app/node_modules/metro/src/node-haste/DependencyGraph.js:282:16)
  at /Users/name/Desktop/Development/app/node_modules/metro/src/lib/transformHelpers.js:267:42
  at Server. (/Users/name/Desktop/Development/app/node_modules/metro/src/Server.js:1088:41)
  at Generator.next ()
  at asyncGeneratorStep (/Users/name/Desktop/Development/app/node_modules/metro/src/Server.js:99:24)
  at _next (/Users/name/Desktop/Development/app/node_modules/metro/src/Server.js:119:9)

我的文件内容 #

index.js #

import { AppRegistry } from 'react-native';
import App from './App';
import 'react-native-gesture-handler';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);

package.json #

{
  "name": "appName",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "algoliasearch": "^4.0.3",
    "moment": "^2.24.0",
    "moment-timezone": "^0.5.27",
    "react": "16.9.0",
    "react-instantsearch-native": "^6.3.0",
    "react-native": "0.61.5",
    "react-native-agora": "^2.9.1-alpha.2",
    "react-native-algolia-dropdown": "^1.6.0",
    "react-native-calendars": "^1.220.0",
    "react-native-chart-kit": "^4.3.0",
    "react-native-code-push": "^6.0.0",
    "react-native-extended-stylesheet": "^0.12.0",
    "react-native-firebase": "^5.6.0",
    "react-native-gesture-handler": "^1.5.2",
    "react-native-image-crop-picker": "^0.26.1",
    "react-native-material-dropdown": "^0.11.1",
    "react-native-reanimated": "^1.4.0",
    "react-native-safe-area-context": "^0.6.2",
    "react-native-screens": "^1.0.0-alpha.23",
    "react-native-snap-carousel": "^3.8.4",
    "react-native-splash-screen": "^3.2.0",
    "react-native-svg": "^9.13.6",
    "react-native-view-shot": "^3.2.0",
    "react-navigation": "^4.0.10",
    "react-navigation-drawer": "^2.3.3",
    "react-navigation-stack": "^1.10.3",
    "react-redux": "^7.1.3",
    "redux": "^4.0.4",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0",
    "rn-fetch-blob": "^0.11.2",
    "tipsi-stripe": "^7.5.1"
  },
  "devDependencies": {
    "@babel/core": "7.7.5",
    "@babel/runtime": "7.7.6",
    "@react-native-community/eslint-config": "0.0.5",
    "babel-jest": "24.9.0",
    "eslint": "6.7.2",
    "jest": "24.9.0",
    "metro-react-native-babel-preset": "0.56.3",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

项目依赖库已经正确集成，恳请大家提供解决建议。

Hey Jim，我之前也碰到过一模一样的问题！RN 0.6x版本虽然统一了入口文件，但缓存残留、旧配置遗留这些小坑很容易触发这种奇怪的报错，给你几个亲测有效的解决步骤：

1. 先清掉Metro的顽固缓存 #

Metro的缓存真的是模块解析问题的重灾区，尤其是跨平台切换后。先停掉当前的metro服务，然后执行：

npx react-native start --reset-cache

等缓存重置完成后，再重新运行npx react-native run-android试试，大概率能解决一半的问题。

2. 检查Android原生项目的入口配置 #

虽然RN 0.61默认用index.js，但有些老项目的原生代码里可能还残留着旧配置。打开android/app/src/main/java/com/[你的包名]/MainApplication.java，找到getJSMainModuleName()方法：

@Override
protected String getJSMainModuleName() {
  return "index"; // 确保这里写的是"index"，而不是"index.android"
}

如果之前是index.android，改成index后，先清理Android编译缓存：

cd android && ./gradlew clean
cd .. && npx react-native run-android

3. 排查metro.config.js的自定义配置 #

如果你的项目有自定义的metro.config.js，检查里面有没有硬指定Android入口的代码，比如这种错误写法：

// 错误示例，别这么写！
module.exports = {
  resolver: {
    entryFile: Platform.OS === 'android' ? 'index.android.js' : 'index.js'
  }
};

如果有，改成统一指向index.js，或者直接删掉这个自定义配置用默认设置就行。

4. 检查第三方依赖的硬编码引用 #

有些老的第三方库可能还在硬引用index.android，你可以全局搜索下node_modules里有没有相关内容：

grep -r "./index.android" ./node_modules

如果找到对应的依赖，优先升级它的版本，实在不行再考虑临时修改（不推荐，尽量升级）。

5. 终极方案：重装依赖+全量清理 #

如果上面的步骤都没用，那就来个彻底的清理：

# 删除依赖和锁文件
rm -rf node_modules package-lock.json
# 重装依赖
npm install
# 清理Android编译缓存
cd android && ./gradlew clean
# 重置metro缓存并启动服务
cd .. && npx react-native start --reset-cache
# 重新运行Android项目
npx react-native run-android

我当时就是靠第一步+第二步解决的，你可以一步步试下来，应该能搞定这个问题！

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