每當在模擬器上完成了開發(fā),都想到真機上試試,正好前段時候淘了一個imac。

這里就以打包rndemo到iphone為例,講一下react ntive ios打包到真機的流程。

 

一、前置

1.有個iphone加個mac

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

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

4.rn應用能在模擬器中跑起來,至少不要有什么致命報錯吧

 

二、生成jsbundle

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

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

新加一行:

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

如果需要切換回模擬器調試,只需要將新加這行注釋掉,并恢復原代碼即可。

新加這行代碼大概意思就是告訴native rn代碼的入口,我們會在下一步生成這個jsbundle。

 

2.打開終端,進入你的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

參數說明:

--entry-file 指定入口文件 因為要打包ios平臺,所以指定為rn項目的index.ios.js作為入口

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

--platform 指定平臺類型

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

--dev 是否為開發(fā)模式 如果設置為false,不會產生警告,并且bundle會被壓縮

還有其他命令,比如:transformer、prepack、bundle-enco

網友評論