RN项目的离线打包（ios）

2018-04-21 本文已影响147人上玄月_lxl

RN项目的IOS打包，共分为三个步骤：
1、RN项目关联的文件、图片资源整合
2、xcode工程导入资源、配置文件
3、IOS打包
本文仅针对前两个步骤做出相应解释，第三步给出其他大神的详细步骤链接

1. 参数讲解
2. 创建工程以及生成工程文件
3. Xcode引入文件并配置
4.我遇到的小问题

一、参数讲解

通过react-native bundle --help 命令可查看相关命令，命令翻译如下：


<pre class="hljs cpp" style="margin: 8px 0px;">react-native bundle [参数]
  构建 js 离线包 

  Options:

    -h, --help                   输出如何使用的信息
    --entry-file <path>          RN入口文件的路径, 绝对路径或相对路径
    --platform [string]          ios 或 andorid
    --transformer [string]       Specify a custom transformer to be used
    --dev [boolean]              如果为false, 警告会不显示并且打出的包的大小会变小
    --prepack                    当通过时, 打包输出将使用Prepack格式化
    --bridge-config [string]     使用Prepack的一个json格式的文件__fbBatchedBridgeConfig 例如: ./bridgeconfig.json
    --bundle-output <string>     打包后的文件输出目录, 例: /tmp/groups.bundle
    --bundle-encoding [string]   打离线包的格式 可参考链接https://nodejs.org/api/buffer.html#buffer_buffer.
    --sourcemap-output [string]  生成Source Map，但0.14之后不再自动生成source map，需要手动指定这个参数。例: /tmp/groups.map
    --assets-dest [string]       打包时图片资源的存储路径
    --verbose                    显示打包过程
    --reset-cache                移除缓存文件
    --config [string]            命令行的配置文件路径</pre>

二、创建工程以及生成工程文件

1）创建工程(已有工程的跳过这步)

打开终端，cd到你希望创建项目的目录下，输入下面命令（RNDemo就是你的工程名）


react-native init RNDemo

2）执行打包命令

注意，输出的目录bundle需要我们自己来创建

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

实战讲解

如果你已经有项目，可以cd到相应目录下执行上面的命令：

image.png

image.png

执行完成

image.png

生成文件

image.png

三、Xcode引入文件并配置

1、将assets 和 index.ios.jsbundle 文件引入到xcode工程

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

image.png

2、修改Appdelegate中的配置代码

image.png


jsCodeLocation = [NSURL URLWithString:[[NSBundle mainBundle] pathForResource:@"index.ios.jsbundle" ofType:nil]];

或者直接更改为

#if DEBUG
  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
  jsCodeLocation = [NSURL URLWithString:[[NSBundle mainBundle] pathForResource:@"index.ios.jsbundle" ofType:nil]];
#endif