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

最新推荐文章于 2022-07-08 15:46:53 发布

weixin_34087307

最新推荐文章于 2022-07-08 15:46:53 发布

阅读量1.4k

点赞数

文章标签：移动开发网络操作系统

原文链接：https://juejin.im/post/5ca5c9aae51d4569aa2529d0

版权

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

具体如下：

(in project directory) mkdir android/app/src/main/assets
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
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 应该就可以了

转载于:https://juejin.im/post/5ca5c9aae51d4569aa2529d0