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是無法執行的;