iOS 原生与ReactNative 混合开发之离线包

离线包就是把 ReactNative 和你写的 js文件、图片等资源都打包放入 App ，不需要走网络下载。

ReactNative 打包命令说明

使用 react-native bundle --help 来查看打包的具体参数

react-native bundle [options]
 builds the javascript bundle for offline use 
Options:
 -h, --help        output usage information 
--entry-file             Path to the root JS file, either absolute or relative to JS root 
--platform [string]           Either "ios" or "android" --transformer [string]               Specify a custom transformer to be used
--dev [boolean]              If false, warnings are disabled and the bundle is minified 
--prepack               When passed, the output bundle will use the Prepack format. 
--bridge-config [string]            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 
--bundle-encoding [string]        Encoding the bundle should be written in (https://nodejs.org/api/buffer.html#buffer_buffer). 
--sourcemap-output [string]          File name where to store the sourcemap file for resulting bundle, ex. /tmp/groups.map 
--assets-dest [string]           Directory name where to store assets referenced in the bundle 
--verbose               Enables logging 
--reset-cache              Removes cached files 
--config [string]          Path to the CLI configuration file

看过了以上的翻译，基本对每条参数都有了一定的了解，我们来实际操作下打包的步骤。

ReactNative 打离线包流程 (举例iOS)

首先你得有个 ReactNative 的工程。这里以空工程打包为例:

1.创建新工程

react-native init RNBundleDemo

2.执行打包命令(自己看情况需不需要打包图片,二选一)

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

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

3.查看执行完打包命令后的结果

图.png

图.png

打包完成后, 目录结构

4.将 assets 和 index.ios.jsbundle 引入工程

目录.png

引入目录后的层级结构

注意: assets 目录导入工程中时，要选择 Create folder references，因为这是图片素材。

5.修改AppDelegate中的代码

项目中添加代码4.png

6.如果要真机测试或打包上传应用, 需要进行如下修改

因为 ReactNative 自带 Chrome 的 Debug 模式, 因此需要修改成 Release ，来关闭掉 Debug 模式

模式.png

修改工程的编译模式

7.打包上传或真机调试，与iOS工程无异。

ReactNative 打离线包中注意事项

• 打包命令中的路径(文件夹一定要存在)

• 必须用 Create folder references** 的方式引入图片的 assets ，否则引用不到图片

• 不能用 main.jsbundle 来命名打包后的文件，否则会出现问题