React Native打包IOS超詳細步驟

原創

羊二哥

2020-06-26 09:08

項目名我們設定爲：iotApp

1、在ios目錄下新建bundle目錄。後面編譯打包離線資源，也會生成bundle目錄，提前建，是爲了防止某些情況下報錯。

2、進行編譯，離線打包資源。命令如下：

react-native bundle 
    --entry-file index.js    //entry-file,ios或者android入口的js名稱，比如index.js
    --platform ios    //platform ,平臺名稱(ios或者android)
    --dev false    //設置爲false時會對JavaScript代碼進行優化處理 
    --bundle-output ./ios/bundle/index.ios.jsbundle    //生成的jsbundle文件的名稱
    --assets-dest ./ios/bundle    //圖片以及其他資源存放的目錄,比如./ios/bundle

爲了方便操作，在package.json中添加編譯命令（node node_modules/react-native/local-cli/cli.js爲腳本，固定寫就行）

"scripts": {
    ...,
    "bundle-ios":"node node_modules/react-native/local-cli/cli.js bundle --entry-file index.js  --platform ios --dev false --bundle-output ./ios/bundle/index.ios.jsbundle --assets-dest ./ios/bundle"
}

這樣每次執行npm run bundle-ios，即可離線打包資源。離線包生成完成之後，可以在ios目錄下看到一個bundle目錄，這個目錄就是bundle生成的離線資源。（每次打包前都執行一次，類似於webpack的clean-wepack-plugin，可以清空bundle下的舊文件）

3、打開Xcode引入項目文件，.xcodeProj，RN 0.60.0以後的版本有不一樣的後綴

4、右鍵打開項目同名的iotApp的菜單，Add Files to "RNIos"

5、選擇bundle文件，在option中選擇Create folder references

6、添加到項目中的文件夾必須是藍色

7、設置AppDelegate.m文件

修改ios目錄下與項目同名的文件目錄裏邊的AppDelegate.m: jsCodeLocation

在開發的過程中可以在這裏配置Debug Server的地址，當發佈上線的時候，就需要使用離線的jsbundle文件，因此需要設置jsCodeLocation爲本地的離線jsbundle。

NSURL *jsCodeLocation;
//測試
#if DEBUG
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

//正式
#else
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

#endif

8、修改debug狀態

Xcode——Product——Schema——Edit Scheme，查看run選擇的模式，將項目由debug狀態改成release狀態（debug爲內測，release爲發佈App Store）

9、確保左上角選中的是iotApp>Generic iOS Device。雙擊Xcode裏的項目根目錄，顯示出如下內容：