[Mac][React Native][iOS] 打包

  • 1099
  • 0
  • 2016-11-06

記錄了Ryan將我的React Native App打包成獨立的ipa檔過程筆記,大家加減參考。

來將App打包吧~~~~

我們都知道,RN在開發階段,不管是debug或測試,都需仰賴自己本機的伺服器執行當前撰寫的Code,那要打成離線獨立運行的App呢??當然要讓他自己靠自己阿,所以打包是發佈前的必要動作。

下圖的main.jsbundle是紅色的,表示這檔案不存在

那要怎麼產生呢??到專案工程中,透過指令來生成吧!!先進入到專案的資料夾,參考下圖
以就是有node_modules這一層,並手動建立一個bundle的資料夾,執行打下指令:

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

然後就用力的執行下去!!


先來說明一下這些參數的意思:

  • --entry-file:JS檔入口文件,以我的專案來說,index.ios.js是我iOS的入口
  • --platform:iosandroid
  • --dev:是否在開發環境,默認值為true
  1. 在開發環境下會打會提示性能與需要優化限制的提行
  2. 如果是發佈正式版本,要將這個參數設置為false
  3. 發布發佈正式版本要確保項目的build configuration也設置為Release,如下圖(React Native根據Xcode's Release configuration會做一些配置,才不會安裝的手機搖一搖之後,出現開發者選單,這不就尷尬了。
  • --bundle-output:輸出的jsbundle文件,如main.jsbundle

 

接下來就是將剛剛產生在bundle資料夾的檔案放進iOS中,不過這邊有一點要注意的是,要使用必須用Create folder references的方式添加進去

步驟如下:使用Add Files to 專案名稱

要挑選assert資料夾與main.jsundle檔案,並將下方的Option打開,挑選Create folder references,
這代表參考資料夾內的檔案,不必整個複製過來,好處是,檔案內容有異動,xCode會自動幫你參考新檔案

醬醬,完成囉

修改AppDelegate.m,確認jsCodeLocation如下圖的設定,當然入口是依照你的設定狀況來調整。
完成

透過這些步驟,就可以將程式獨立運行,不需要伺服器的模式了。
建置對象若是實體設備,就算是拔掉連線,也是可以獨力運行(當然是在有繳交給蘋果開發者帳號這筆保護費)。
若要發佈到Apple Store也沒問題。

以上文章由Ryan整理,若有侵犯版權、勘誤,請來信告知