React Native 打包 iOS 测试 APP

编辑于2018年12月25日

React Native 应用程序开发完成后,需要先打包一个测试版,由测试人员安装应用并测试。对于 iOS 应用,一般来说,开发者如果需要将应用安装到某些用户的设备上,就需要将应用导出为这些设备可以直接安装的安装包(.ipa 文件)。本文总结了如何打包 ipa 并发布到应用内测分发平台供安装测试。

证书

在打包 iOS 应用时,我们需要使用证书对应用进行签名。到目前为止苹果为 iOS 应用提供了三种类型的证书签名方式:

  • Ad-hoc
  • In-House
  • App-Store

关于这三种类型的证书,区别如下:

证书名称 可安装的设备 开发者账号类型
Ad-hoc 需要把设备UDID添加到证书才可安装 个人账号、公司账号、教育账号、企业账号
In-house 任何iOS设备均可安装,不能上架 App Store 企业账号
App-Store 通过 App Store 安装 个人账号、公司账号、教育账号

我们因为是要打包测试 App,所有使用 Ad-hoc 比较合适。

安装证书

登录苹果开发者平台:https://developer.apple.com/

登录成功后进入到证书管理页面。
developer

在证书管理页面,我们可以下载已经申请好的证书或者申请新的证书。

cer

我这边已经有申请好的证书了,直接下载安装即可(生产证书只能在一台设备上使用,其他设备上需要导出 .p12),后面会再说明如何申请新的证书。

申请证书

打开 Mac 电脑中的钥匙串工具,选择“从证书颁发机构请求证书”,填写邮箱(任意)和证书名称(任意)后,生成 certSigningRequest 文件。

request_cer

在证书管理页面,点击证书添加按钮,添加新的证书。证书分两种类型:开发环境和生成环境,其中开发证书用于真机调试(从 Xcode7 开始不用证书也可以真机调试),生成证书用于打包发布应用。

选择需要的证书类型后,点击继续,在此页面上传刚刚通过钥匙串生成的 certSigningRequest 文件。

gene

上传完成后,证书就生成了。

还可以通过 Xcode 申请证书,在 Xcode > Preferences > Account > Manage Certificates 中,可以添加证书。

添加 App ID

在 App IDs 页面,添加新的 App ID。

appid

填写 App ID 描述文字和 Bundle ID 即可。

id

添加测试设备

测试版 App 一般使用 Ad-hoc 进行签名,这种方式签名的 App,只有配置文件中存在相应设备的 UUID,该设备才能安装。

我们可以在设备管理页面添加可用的测试设备,后续再配置文件中,可以选择已配置的设备。

devices

通过 iTunes 可以查看 iPhone 的 UUID。

配置证书

在配置文件页面,添加新的配置。

provisioning

类型选择 Ad Hoc,App ID 选择刚刚添加的 ID,选择证书,选择可测试的设备,最后设置配置文件的名称。

配置好了以后,下载配置文件并双击安装。

应用程序打包

开发 React Native 应用时,js 代码和图片资源通过 Debug Server 提供,但是当我们需要发布应用时,就需要将 js 等资源和应用一起打包。

打包离线资源

通过 react-native bundle 命令可以打包离线资源。

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

各参数含义如下:

  • --entry-file:入口文件。

  • --platform:平台名称(ios或者android)。

  • --dev:是否是开发模式,设置为 false 的时候将会对 JavaScript 代码进行优化处理。

  • --bundle-output:生成的 jsbundle 文件的名称。

  • --assets-dest:图片以及其他资源存放的目录。

添加离线资源到项目中

用 Xcode 打开项目,选择“Add Files to ProjectName”。

addfile

在弹出的对话框中,点击 options ,一定要勾选 Create folder references 选项,将bundle文件夹添加到项目里,Xcode下该文件夹一定要是蓝色的。

bundle

修改 AppDelegate.m 文件

修改 AppDelegate.m 中的加载包的方式(只需修改一次),之后项目会自动跟据 debug 还是 release 状态加载不同的包。

#ifdef DEBUG
  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
  jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"bundle/index.ios" withExtension:@"jsbundle"];
#endif

Xcode 打包 ipa

在 Xcode 添加前面申请证书的开发者账号(Xcode->Preferences->Accounts)。

选中项目在 General->Signing 中选择账号。

sign

这里的 Bundle Idetifier 应该为之前在开发者平台上添加的 App ID。

选择 Code Signing Identity 安装证书。

code_sign

点击设备,选择通用 iOS 设备。

generic

点击 Product->Archive 开始打包,打包完成后点击 Export 按钮导出,在弹出的对话框中选择 Save for Ad Hoc Deployment,接着根据实际情况选择后续的配置即可。

发布到内测分发平台

由于新版的 iTunes 没有了应用程序选项,所以无法通过 iTunes 安装 App 到手机中。比较方便的方式是将应用发布到内测分发平台,然后扫码即可下载。目前我听得比较多的平台就是蒲公英和 fir.im,不过这两个平台都需要实名认证,有点蛋疼。具体使用哪个平台自己甄选就行,这里推荐一个不需要认证的国外平台 diawi

参考链接