android 离线包,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、命令执行完生成如下资源

im20170523113744.png

3、修改MainApplication文件，设置BundleAssetName

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

@Override protected boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; }

@Override protected List getPackages() { return Arrays.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 ⌘ +

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.