RN項目的IOS打包脾猛，共分為三個步驟：
1、RN項目關(guān)聯(lián)的文件贤姆、圖片資源整合
2榆苞、xcode工程導(dǎo)入資源、配置文件
3霞捡、IOS打包
本文僅針對前兩個步驟做出相應(yīng)解釋语稠，第三步給出其他大神的詳細(xì)步驟鏈接
目錄
一、參數(shù)講解
通過react-native bundle --help 命令可查看相關(guān)命令弄砍，命令翻譯如下：
<pre class="hljs cpp" style="margin: 8px 0px;">react-native bundle [參數(shù)]
構(gòu)建 js 離線包
Options:
-h, --help 輸出如何使用的信息
--entry-file <path> RN入口文件的路徑, 絕對路徑或相對路徑
--platform [string] ios 或 andorid
--transformer [string] Specify a custom transformer to be used
--dev [boolean] 如果為false, 警告會不顯示并且打出的包的大小會變小
--prepack 當(dāng)通過時, 打包輸出將使用Prepack格式化
--bridge-config [string] 使用Prepack的一個json格式的文件__fbBatchedBridgeConfig 例如: ./bridgeconfig.json
--bundle-output <string> 打包后的文件輸出目錄, 例: /tmp/groups.bundle
--bundle-encoding [string] 打離線包的格式 可參考鏈接https://nodejs.org/api/buffer.html#buffer_buffer.
--sourcemap-output [string] 生成Source Map仙畦，但0.14之后不再自動生成source map，需要手動指定這個參數(shù)音婶。例: /tmp/groups.map
--assets-dest [string] 打包時圖片資源的存儲路徑
--verbose 顯示打包過程
--reset-cache 移除緩存文件
--config [string] 命令行的配置文件路徑</pre>
二慨畸、創(chuàng)建工程以及生成工程文件
- 1）創(chuàng)建工程(已有工程的跳過這步)
打開終端，cd到你希望創(chuàng)建項目的目錄下衣式，輸入下面命令（RNDemo就是你的工程名）
react-native init RNDemo
- 2）執(zhí)行打包命令
注意寸士，輸出的目錄bundle需要我們自己來創(chuàng)建
react-native bundle --entry-file index.js --bundle-output ./ios/bundle/index.ios.jsbundle --platform ios --assets-dest ./ios/bundle --dev false
實戰(zhàn)講解
-
如果你已經(jīng)有項目檐什，可以cd到相應(yīng)目錄下執(zhí)行上面的命令：
image.png
- 自己在目錄下建立文件夾
- 執(zhí)行完成
- 生成文件
三、Xcode引入文件并配置
- 1弱卡、將assets 和 index.ios.jsbundle 文件引入到xcode工程
注意: assets 目錄導(dǎo)入工程中時乃正，要選擇 Create folder references，因為這是圖片素材婶博。
- 2瓮具、修改Appdelegate中的配置代碼
jsCodeLocation = [NSURL URLWithString:[[NSBundle mainBundle] pathForResource:@"index.ios.jsbundle" ofType:nil]];
或者直接更改為
#if DEBUG
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
jsCodeLocation = [NSURL URLWithString:[[NSBundle mainBundle] pathForResource:@"index.ios.jsbundle" ofType:nil]];
#endif
- 3、需改debug模式
RN項目自帶的是debug模式凡人，真機打包需要修改為release模式名党。下圖打開快捷鍵為command+shit+，
- 4挠轴、后面ios打包過程與正常ios打包無差別传睹，請點下面，或者自行搜素
四岸晦、我遇到的小問題
- 我配置完上面的過程后欧啤，想自己在模擬器上運行一遍，結(jié)果等了十多分鐘模擬器一直白屏启上，后來才想起來模擬器中開的debug模式堂油，關(guān)掉debug調(diào)試，看到正常界面了
- 配置http的時候碧绞，allow Arbitrary loads 是在app Transport下面的，需要把左側(cè)小尖頭點開才可以
打包后上傳蒲公英測試吱窝，iphone自帶的瀏覽器不帶二維碼掃描讥邻，直接在瀏覽器中輸入蒲公英提供的網(wǎng)址也可以進行下載。（可以使用照相機掃描二維碼院峡，然后就可以點擊彈窗進入到下載界面）
-
編譯的時候遇到如下報錯兴使，請將reless模式改為debug模式試試
image.png -
打包編譯時候會提示React頭文件找不到，這是編譯器問題照激，這個報錯后面自己就消失了发魄。
image.png ios輸入框輸入中文時，有時會輸入不進去俩垃。這時可以考慮更換下react 和 react-native版本励幼。
注意！？诹苹粟！ 注意！Ｔ灸帧嵌削！ 注意Ｃ谩！苛秕！ 更改版本可能帶來一些庫的沖突肌访，請謹(jǐn)慎使用。我這邊更換版本只針對了ios艇劫，而有沖突的安卓延用了之前的高版本吼驶。
更改后的版本如下：
react-native : 0.53.0
react : 16.2.0
image.png
在新項目中，我使用了0.57版本港准，沒發(fā)現(xiàn)這個問題了旨剥。大家可以使用新版本了～
image.png
- ios數(shù)字鍵盤和安卓不一樣，沒有完成按鈕浅缸」熘模可以考慮在原生中使用第三方庫，比如IQKeyboard來收縮鍵盤衩椒。
?
?
結(jié)束語：好啦蚌父，預(yù)祝各位大神打包成功～
