RN項(xiàng)目的IOS打包，共分為三個(gè)步驟：
1、RN項(xiàng)目關(guān)聯(lián)的文件、圖片資源整合
2、xcode工程導(dǎo)入資源、配置文件
3、IOS打包
本文僅針對(duì)前兩個(gè)步驟做出相應(yīng)解釋，第三步給出其他大神的詳細(xì)步驟鏈接
目錄
一、參數(shù)講解
通過(guò)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入口文件的路徑, 絕對(duì)路徑或相對(duì)路徑
--platform [string] ios 或 andorid
--transformer [string] Specify a custom transformer to be used
--dev [boolean] 如果為false, 警告會(huì)不顯示并且打出的包的大小會(huì)變小
--prepack 當(dāng)通過(guò)時(shí), 打包輸出將使用Prepack格式化
--bridge-config [string] 使用Prepack的一個(gè)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之后不再自動(dòng)生成source map，需要手動(dòng)指定這個(gè)參數(shù)。例: /tmp/groups.map
--assets-dest [string] 打包時(shí)圖片資源的存儲(chǔ)路徑
--verbose 顯示打包過(guò)程
--reset-cache 移除緩存文件
--config [string] 命令行的配置文件路徑</pre>
二、創(chuàng)建工程以及生成工程文件
- 1）創(chuàng)建工程(已有工程的跳過(guò)這步)
打開終端，cd到你希望創(chuàng)建項(xiàng)目的目錄下，輸入下面命令（RNDemo就是你的工程名）
react-native init RNDemo
- 2）執(zhí)行打包命令
注意，輸出的目錄bundle需要我們自己來(lái)創(chuàng)建
react-native bundle --entry-file index.js --bundle-output ./ios/bundle/index.ios.jsbundle --platform ios --assets-dest ./ios/bundle --dev false
實(shí)戰(zhàn)講解
-
如果你已經(jīng)有項(xiàng)目，可以cd到相應(yīng)目錄下執(zhí)行上面的命令：
image.png
- 自己在目錄下建立文件夾
- 執(zhí)行完成
- 生成文件
三、Xcode引入文件并配置
- 1、將assets 和 index.ios.jsbundle 文件引入到xcode工程
注意: assets 目錄導(dǎo)入工程中時(shí)，要選擇 Create folder references，因?yàn)檫@是圖片素材。
- 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項(xiàng)目自帶的是debug模式，真機(jī)打包需要修改為release模式。下圖打開快捷鍵為command+shit+，
- 4、后面ios打包過(guò)程與正常ios打包無(wú)差別，請(qǐng)點(diǎn)下面，或者自行搜素
四、我遇到的小問(wèn)題
- 我配置完上面的過(guò)程后，想自己在模擬器上運(yùn)行一遍，結(jié)果等了十多分鐘模擬器一直白屏，后來(lái)才想起來(lái)模擬器中開的debug模式，關(guān)掉debug調(diào)試，看到正常界面了
- 配置http的時(shí)候，allow Arbitrary loads 是在app Transport下面的，需要把左側(cè)小尖頭點(diǎn)開才可以
打包后上傳蒲公英測(cè)試，iphone自帶的瀏覽器不帶二維碼掃描，直接在瀏覽器中輸入蒲公英提供的網(wǎng)址也可以進(jìn)行下載。（可以使用照相機(jī)掃描二維碼，然后就可以點(diǎn)擊彈窗進(jìn)入到下載界面）
-
編譯的時(shí)候遇到如下報(bào)錯(cuò)，請(qǐng)將reless模式改為debug模式試試
image.png -
打包編譯時(shí)候會(huì)提示React頭文件找不到，這是編譯器問(wèn)題，這個(gè)報(bào)錯(cuò)后面自己就消失了。
image.png ios輸入框輸入中文時(shí)，有時(shí)會(huì)輸入不進(jìn)去。這時(shí)可以考慮更換下react 和 react-native版本。
注意！??！ 注意！??！ 注意！??！ 更改版本可能帶來(lái)一些庫(kù)的沖突，請(qǐng)謹(jǐn)慎使用。我這邊更換版本只針對(duì)了ios，而有沖突的安卓延用了之前的高版本。
更改后的版本如下：
react-native : 0.53.0
react : 16.2.0
image.png
在新項(xiàng)目中，我使用了0.57版本，沒(méi)發(fā)現(xiàn)這個(gè)問(wèn)題了。大家可以使用新版本了～
image.png
- ios數(shù)字鍵盤和安卓不一樣，沒(méi)有完成按鈕?？梢钥紤]在原生中使用第三方庫(kù)，比如IQKeyboard來(lái)收縮鍵盤。
?
?
結(jié)束語(yǔ)：好啦，預(yù)祝各位大神打包成功～
