1. 程式人生 > >Mac中真機測試React Native project時出現Unable to load script from assets 'index.android.bundle'

Mac中真機測試React Native project時出現Unable to load script from assets 'index.android.bundle'

剛接觸學習React Native,在進行真機除錯時,報錯出現Unable to load script from assets ‘index.android.bundle’. Make sure your bundle is packaged correctly or you’re running a packager server。這裡對此做一下記錄;

筆者對此也查了相關的解決方法,但是並沒有解決我所遇到的問題,解決方法如下:

第一步:首先切到我們工程的根目錄下,然後在android/app/src/main目錄下新建一個assets資料夾,可以在終端中執行以下命令建立:

mkdir android/app/src/main/assets

當然也可以在Android Studio中手動建立;

第二步:同樣需要在我們工程的根目錄下,執行以下命令:

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

第三步:重新執行以下命令即可:

react-native run-android

然而,這樣並沒有解決上述問題,依然報錯,且此時會出現另外一個問題:

Cannot find entry file index.android.js in any of the roots: ["/Users/******/ReactNativeProjects/FirstReactApp"]

這時我們去assets資料夾下才發現,第二步的命令並沒有在assets資料夾中生成我們所需的檔案,裡面沒有任何檔案生成,此時筆者繼續查詢,在Stack Overflow中找到了解決方法,用下面的命令替換剛才第二步的命令:

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

原來是index.android.js已經改成index.js,難怪找不到呢!!!
使用上述命令後,此時在assets資料夾下會多出index.android.bundle和index.android.bundle.meta兩個檔案;

再重新執行工程,終於出現執行成功的介面啦!
這裡寫圖片描述

小結:遇到問題時要敢於去解決,多查詢問題的原因,這裡index.android.bundle是用來呼叫系統原生控制元件的js指令碼,每次當你改變了 index.js時,需要使用上面的命令及時地更新index.android.bundle,然後打包才可以把新的index.js應用上,所以當沒有index.android.bundle檔案時,React Native是無法執行的;