RN 原生混编中的本地离线打包

1.png

RN这种面向生产力的框架介绍的文档网上一堆,就不和大家介绍了,我们前端框架刚好是React,我们的构想就是移动端和前端有更多的互动,在不加人头的基础上提高开发迭代速度

本文基于原生与RN(0.48)混编的项目来描述,前提是您已经将RN框架导入到项目并可以正常运行,我们的项目目录结构与RN原生项目有着相同的目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
--entry-file <path>                Path to the root JS file, either absolute or relative to JS root
RN项目的入口文件相对/相对路径
--platform [string] Either "ios" or "android"
输入‘ios’或‘android’
--transformer [string] Specify a custom transformer to be used
指定自定义的transformer文件绝对/相对路径[default: "./node_modules/react-native/packager/transformer.js"]
--dev [boolean] If false, warnings are disabled and the bundle is minified
如果为false, 不显示警告并且bundle会变小[default: true]
--bundle-output <string> File name where to store the resulting bundle, ex. /tmp/groups.bundle
打包后的文件输出目录, 例: /tmp/groups.bundle
--bundle-encoding [string] Encoding the bundle should be written in (https://nodejs.org/api/buffer.html#buffer_buffer).
归档文件至 可参考链接https://nodejs.org/api/buffer.html#buffer_buffer.
--max-workers [number] Specifies the maximum number of workers the worker-pool will spawn for transforming files. This defaults to the number of the cores available on your machine.
指定用于产生转换文件的worker-pool的最大工作数,默认与设备处理器核心相同
--sourcemap-output [string] File name where to store the sourcemap file for resulting bundle, ex. /tmp/groups.map
映射文件的名称
--sourcemap-sources-root [string] Path to make sourcemap's sources entries relative to, ex. /root/dir
映射文件的路径
--sourcemap-use-absolute-path Report SourceMapURL using its full path
使用SourceMapURL的绝对路径
--assets-dest [string] Directory name where to store assets referenced in the bundle
打包图片资源的存储的绝对/相对路径
--verbose Enables logging
显示打包过程
--reset-cache Removes cached files
清除缓存文件
--read-global-cache Try to fetch transformed JS code from the global cache, if configured.
--config [string] Path to the CLI configuration file
命令行的配置文件路径
-h, --help output usage information

我们以原生的RN空项目为例

执行打包命令,我们直接将打包的文件打进工程

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

执行后的目录(项目中没有引入图片等资源,没有asset文件)

2.png

将jsbundle文件和asset目录导入项目

assets 目录导入工程中时,要选择 Create folder references,因为这是图片素材。
还有个很关键的就是,jsbundle文件一定要导入到copy bundle resources 里面,不然之后通过ios原生的path(forResource: "main.jsbundle", ofType: nil)这个方法找不到路径

3.png

希望我的文章能帮助到大家~