ReactNative打離線包-android篇

離線包就是把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).]
(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]

安卓打包步驟

1、在工程根目錄下執行打包命令，比如

react-native bundle --entry-file index.android.js --bundle-output ./android/app/src/main/assets/index.android.bundle --platform android --assets-dest ./android/app/src/main/res/ --dev false 

其中--entry是入口js檔案，android系統就是index.android.js，ios系統就是index.ios.js，--bundle-output就是生成的bundle檔案路徑，--platform是平臺，--assets-dest是圖片資源的輸出目錄，這個在後面的圖片增量更新中會用到，--dev表示是否是開發版本，打正式版的安裝包時我們將其賦值為false。
請參考上面命令說明，根據自己的情況進行修改再執行。注意要先保證[./android/app/src/main/assets/]資料夾存在。

2、命令執行完生成如下資源

3、修改MainApplication檔案，設定BundleAssetName

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { 
    @Override protected boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; } 
    @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage() ); } 
    @Nullable @Override protected String getBundleAssetName() { return "index.android.bundle"; }
};

4、通過Android Studio打包即可(也可通過命令打包)

生成的apk在 \android\app\build\outputs\apk

其他

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.

---

參考連結：https://segmentfault.com/a/1190000004192816
官方文件：http://facebook.github.io/react-native/docs/running-on-device-android.html#content
官方文件2：http://facebook.github.io/react-native/docs/signed-apk-android.html#content