ReactNative打離線包-ios篇

官方文檔，內容很舊：http://facebook.github.io/react-native/docs/running-on-device-ios.html#content

相關連接：https://github.com/facebook/react-native/issues/4084

離線包就是把RN和你寫的js圖片等資源都打包放入app，不須要走網絡下載。

打包命令說明

react-native bundle

Options:

--entry-file Path to the root JS file, either absolute or relative to JS root [required]

--platform Either "ios" or "android"

--transformer Specify a custom transformer to be used (absolute path) [default: "/Users/babytree-mbp13/projects/xcodeProjects/AwesomeProject/node_modules/react-native/packager/transformer.js"]

--dev If false, warnings are disabled and the bundle is minified [default: true]

--prepack If true, the output bundle will use the Prepack format. [default: false]

--bridge-config File name of a a JSON export of __fbBatchedBridgeConfig. Used by Prepack. Ex. ./bridgeconfig.json

--bundle-output File name where to store the resulting bundle, ex. /tmp/groups.bundle [required]

--bundle-encoding Encoding the bundle should be written in (https://nodejs.org/api/buffer.html#buffer_buffer). [default: "utf8"]

--sourcemap-output File name where to store the sourcemap file for resulting bundle, ex. /tmp/groups.map

--assets-dest Directory name where to store assets referenced in the bundle

--verbose Enables logging [default: false]

ios打包步驟

1. 在工程根目錄下執行打包命令，好比react-native bundle --entry-file demo/index.js --bundle-output ./ios/bundle/index.ios.jsbundle --platform ios --assets-dest ./ios/bundle --dev false，請參考上面命令說明，根據本身的狀況進行修改再執行。注意要先保證bundle文件夾存在。

2. 命令執行完生成以下資源
   

1. 在xcode中添加assets【必須用Create folder references的方式，添加完是藍色文件夾圖標】和index.ios.jsbundle，如圖
   

2. 參考官方文檔，修改AppDelegate.m文件,使用OPTION 2處的代碼

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

3. 一切OK 運行模擬器看效果吧

ios打包遇到的問題

1. 離線包若是開啓了chrome調試，會訪問調試服務器，並且會一直loading出不來。

2. 若是bundle的名字是main.jsbundle,app會一直讀取舊的,更名就行了。。。很是奇葩的問題，我從新刪了app，clean工程都沒用，就是不能用main.jsbundle這個名字。

3. 必須用Create folder references【藍色文件夾圖標】的方式引入圖片的assets，不然引用不到圖片

4. 執行bundle命令以前，要保證相關的文件夾都存在

To disable the developer menu for production builds:

For iOS open your project in Xcode and select Product → Scheme → Edit Scheme... (or press ⌘ + <). Next, select Run from the menu on the left and change the Build Configuration to Release.

For Android, by default, developer menu will be disabled in release builds done by gradle (e.g with gradle assembleRelease task). Although this behavior can be customized by passing proper value to ReactInstanceManager#setUseDeveloperSupport.