React Native 真機打包
離線包不適合真機調(diào)試
android 打包
ios 打包
Android 打包步驟
打包步驟
1.在工程根目錄下執(zhí)行打包命令，比如
react-native bundle --entry-file index.android.js --bundle-output ./android/app/src/main/assets/index.android.jsbundle --platform android --assets-dest ./android/app/src/main/res/ --dev false
注意:[./android/app/src/main/assets/]文件夾存在。
2.增量升級的話不要把圖片資源直接打包到res中，腳本如下：
react-native bundle --entry-file index.android.js --bundle-output ./bundle/androidBundle/index.android.jsbundle --platform android --assets-dest ./bundle/androidBundle/ --dev false
3.保證MainActivity.java中的setBundleAssetName與你的jsbundle文件名一致，比如.setBundleAssetName("index.android.jsbundle")就與我生成的資源名一致
ios打包
1.使用終端在工程根目錄下執(zhí)行打包命令
react-native bundle --entry-file index.ios.js --bundle-output ./bundle/iosBundle/index.ios.jsbundle –platform ios –assets-dest ./bundle/iosBundle –dev false
注意要先保證bundle文件夾存在。
或者通過下載的方式得到main.jsbundle
curl http://localhost:8081/index.ios.bundle -o ./main.jsbundle
2.在xcode中添加assets【必須用Create folder references的方式，添加完是藍色文件夾圖標】和index.ios.jsbundle
3.參考官方文檔，修改RN頁面入口代碼
NSURL *jsCodeLocation;
jsCodeLocation =
#if (TARGET_IPHONE_SIMULATOR)
// 在模擬器的情況下
[[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
#else
[[NSBundle mainBundle] URLForResource:@"index.ios" withExtension:@"jsbundle" subdirectory:@"iosBundle"];
// 在真機情況下
#endif
步驟示例??
ios真機調(diào)試
在開發(fā)的階段，我們可以使用本地服務器作為模擬服務器，這樣在開發(fā)過程中，方便開發(fā)者測試開發(fā)。
按照以下步驟操作：
- 真機設備與電腦設備必須在同一個WiFi站點上，因為這樣真機設備才能訪問得到本地電腦上安裝的模擬服務器。
-
打開React Native項目中的ios項目中的AppDlegate.m文件，更具下圖所示修改：
這里寫圖片描述
將上圖中的192.168.1.103 改為你的電腦的IP地址。
- 然后用USB數(shù)據(jù)線連接電腦和真機設備，點開XCode，選擇真機設備。
- 點擊Run 或者 command + R 運行程序。
- 搖晃手機可以打開開發(fā)者菜單，菜單中可以選擇調(diào)試選項。
ios打包遇到的問題
離線包如果開啟了chrome調(diào)試，會訪問調(diào)試服務器，而且會一直loading出不來。
如果bundle的名字是main.jsbundle,app會一直讀取舊的,改名就好了。。。非常奇葩的問題，我重新刪了app，clean工程都沒用，就是不能用main.jsbundle這個名字。
必須用Create folder references【藍色文件夾圖標】的方式引入圖片的assets，否則引用不到圖片
執(zhí)行bundle命令之前，要保證相關的文件夾都存在
