ReactNative打離線包-ios篇

cnsnake11發表於2015-12-23
ReactiOS

官方文件，內容很舊：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. 命令執行完生成如下資源
    clipboard.png

  1. 在xcode中新增assets【必須用Create folder references的方式，新增完是藍色資料夾圖示】和index.ios.jsbundle，如圖
    clipboard.png

  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.

相關文章