RN项目的离线打包（ios）

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

目录

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

一、参数讲解

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

react-native bundle [参数]
  构建 js 离线包 

  Options:

    -h, --help                   输出如何使用的信息
    --entry-file           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      打包后的文件输出目录, 例: /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]            命令行的配置文件路径

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

• 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

• 3、需改debug模式

RN项目自带的是debug模式，真机打包需要修改为release模式。下图打开快捷键为command+shit+，

image.png

• 4、后面ios打包过程与正常ios打包无差别，请点下面，或者自行搜素

我参考的ios打包过程链接

四、我遇到的小问题

• 我配置完上面的过程后，想自己在模拟器上运行一遍，结果等了十多分钟模拟器一直白屏，后来才想起来模拟器中开的debug模式，关掉debug调试，看到正常界面了

image.png

• 配置http的时候，allow Arbitrary loads 是在app Transport下面的，需要把左侧小尖头点开才可以

image.png

• 打包后上传蒲公英测试，iphone自带的浏览器不带二维码扫描，直接在浏览器中输入蒲公英提供的网址也可以进行下载。（可以使用照相机扫描二维码，然后就可以点击弹窗进入到下载界面）

• 编译的时候遇到如下报错，请将reless模式改为debug模式试试

  
  
  

  image.png

• 打包编译时候会提示React头文件找不到，这是编译器问题，这个报错后面自己就消失了。

  
  
  

  image.png

• ios输入框输入中文时，有时会输入不进去。这时可以考虑更换下react 和 react-native版本。

注意！！！ 注意！！！ 注意！！！ 更改版本可能带来一些库的冲突，请谨慎使用。我这边更换版本只针对了ios，而有冲突的安卓延用了之前的高版本。

更改后的版本如下：
react-native : 0.53.0
react : 16.2.0

image.png

在新项目中，我使用了0.57版本，没发现这个问题了。大家可以使用新版本了～

image.png

• ios数字键盘和安卓不一样，没有完成按钮。可以考虑在原生中使用第三方库，比如IQKeyboard来收缩键盘。

 
 

结束语：好啦，预祝各位大神打包成功～