每當(dāng)在模擬器上完成了開發(fā)，都想到真機(jī)上試試，正好前段時(shí)候淘了一個(gè)imac。

這里就以打包rndemo到iphone為例，講一下react ntive ios打包到真機(jī)的流程。

 

一、前置

1.有個(gè)iphone加個(gè)mac

2.首先react native的環(huán)境要正確安裝，還未完成這一步的，請到react native官網(wǎng)或中文站查看具體流程

3.xcode等環(huán)境安裝完畢

4.rn應(yīng)用能在模擬器中跑起來，至少不要有什么致命報(bào)錯(cuò)吧

 

二、生成jsbundle

1.進(jìn)入rn項(xiàng)目的ios工程文件夾，找到和rn項(xiàng)目同名的文件件，打開AppDelegate.m文件，將這一行注釋掉(為了方便真機(jī)和模擬器間的切換，盡量注釋)：

jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

新加一行：

jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"index.ios" withExtension:@"jsbundle"];

如果需要切換回模擬器調(diào)試，只需要將新加這行注釋掉，并恢復(fù)原代碼即可。

新加這行代碼大概意思就是告訴native rn代碼的入口，我們會(huì)在下一步生成這個(gè)jsbundle。

 

2.打開終端，進(jìn)入你的rn工程，在根目錄下執(zhí)行bundle命令：

react-native bundle --entry-file ./index.ios.js --bundle-output ./ios/bundle/index.ios.jsbundle --platform ios --assets-dest ./ios/bundle --dev false

參數(shù)說明：

--entry-file 指定入口文件 因?yàn)橐虬黫os平臺(tái)，所以指定為rn項(xiàng)目的index.ios.js作為入口

--bundle-output 指定輸出的jsbundle文件路徑和文件名 指定到rn項(xiàng)目的ios工程文件夾下，記得一定要先創(chuàng)建bundle文件夾，不然終端會(huì)報(bào)文件夾找不到的錯(cuò)誤

--platform 指定平臺(tái)類型

--assets-dest 指定資源文件夾路徑 assets文件夾的路徑，包含圖片、node模塊等資源

--dev 是否為開發(fā)模式 如果設(shè)置為false，不會(huì)產(chǎn)生警告，并且bundle會(huì)被壓縮

還有其他命令，比如：transformer、prepack、bundle-enco