RN红屏报错采坑 没法加载 index.android.bundle

Unable to load script from assets index.android.bundle...

Unable to load script from assets ‘index.android.bundle’

这是个啥问题

这个错误是想说在加载script的资源的时候失败了，没有发现对应的packager server

形成这种问题的缘由挺多的，一部分是这个server真的没有启动。

这里要说的是服务确实启动了，但却仍是找不到服务, 如何验证服务确实启动了呢？

• 如何验证服务已经成功启动:
  • 在浏览器中访问packager service地址下的index文件, 若是是android应该是: http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false, 能够看到node的服务确实在加载了。
  • 而且浏览器里显示的是bundle的资源代码（或者报错信息）, 大概就这样

接下来：若是你运行adb reverse tcp:8081 tcp:8081解决了这个问题， 那么恭喜你 不用往下看了。

好，我如今确实浏览器里能够访问了而且运行了adb reverse没有用，那么

解决方案呢

• 这个问题的解决方案一搜一大片: 相似于 React-Native 错误集锦
• 这个方案大多都是从 Stack Overflow相关问题的最高赞答案来的： stackoverflow: Unable to load script from assets index.android.bundle on windows

具体以下：

1. (in project directory) mkdir android/app/src/main/assets
2. react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
3. react-native run-android

你们试了一下，发现真的不报错了，就很开心😺，👍赞一下吧，可是❗️

这个方案是有问题的

本质上这个方案是将packager server打包好的bundle拷贝到本地的assets目录下，让app去读取本地assets的资源，至关于这个资源是静态的了，而不是直接连接到packager server上去的。

这会形成：

• react-native的热推送机制没法使用，也就是资源代码有修改就须要运行一遍上面的命令才能让app拿到最新的bundle，
• 在开发者菜单运行Reload或者Debug JS Remotely命令后仍然报相同的错。

从根本上解决

这个问题本质上app是连不上packager server, 形成这个的缘由不少， 我碰到的状况是localhost被映射到了 ipv6的::1上而不是 127.0.0.1, 可使用ping localhost查看一下.

若是能找到具体的缘由，能够根据具体缘由解决，不然这里有一个通用的解决方案：

通用解决方案

启动packager server的命令是react-native start，这个命令默认启动在 localhost:8081地址下，但他接受port和host的参数，这里咱们能够用一个新的端口和地址，例如:

• 第一步： react-native start --port 8082 --host 0.0.0.0

  • 我这里用0.0.0.0能够配合本机的ipv4 的ip访问成功

• 第二步： 查看本地的ipv4地址

• 第三步： 打开开发者菜单> Dev Setting > Debug server host for device, 手动输入 你的ipv4地址:8082

• Reload 应该就能够了