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 應該就能夠了