每当在模拟器上完成了开发,都想到真机上秀秀,正好前段时候买了一个 mac,哈哈有机会了。
前篇文章以 android 为例,这里就以 ios 为例,讲一下打包到 iphone 真机的流程。
一、前置
1. 首先你得有一部 iphone
2. 首先 react native 的环境要正确安装,还未完成这一步的,请到官网或中文站查看具体流程
3.xcode 等环境安装完毕
4.rn 应用能在模拟器中跑起来,至少不要有致命错误吧
二、生成 jsbundle
1. 进入 rn 项目的 ios 工程文件夹,找到和 rn 项目同名的文件件,打开 AppDelegate.m 文件,将这一行注释掉 (为了方便真机和模拟器间的切换,尽量注释):
- jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
新加一行:
- jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"index.ios" withExtension:@"jsbundle"];
如果需要切换回模拟器调试,只需要将新加这行注释掉,并恢复原代码即可。
新加这行代码大概意思就是告诉 native rn 代码的入口,我们会在下一步生成这个 jsbundle。
2. 打开终端,进入你的 rn 工程,在根目录下执行 bundle 命令:
- react-native bundle --entry-file ./index.ios.js --bundle-output ./ios/bundle/index.ios.jsbundle --platform ios --assets-dest ./ios/bundle --dev false
参数说明:
--entry-file 指定入口文件 因为要打包 ios 平台,所以指定为 rn 项目的 index.ios.js 作为入口
--bundle-output 指定输出的 jsbundle 文件路径和文件名 指定到 rn 项目的 ios 工程文件夹下,记得一定要先创建 bundle 文件夹,不然终端会报文件夹找不到的错误
--platform 指定平台类型
--assets-dest 指定资源文件夹路径 assets 文件夹的路径,包含图片、node 模块等资源
--dev 是否为开发模式 如果设置为 false,不会产生警告,并且 bundle 会被压缩
还有其他命令,比如:transformer、prepack、bundle-encoding 等,可以到官网查看具体介绍。
bundle 生成完成后,终端会有类似提示:
3. 用 xcode Open another project 打开 rn 项目的 ios 工程文件夹:
将之前打包好的 jsbundle 和 assets 拖入 rndemo 这个文件夹下面,注意一定要选择 Create folder references:
三、配置网络访问白名单
应用中如果有网络请求,这一步必不可少,要不然会出现网络请求失败的错误提示。
1. 打开 Info.plist:
2. 在 App Transport Security Settings 下添加 key:Exception Domains,类型为 Dictionary。
3. 在 Exception Domains 下添加你的应用可能会访问到的域名,key 为域名,类型为 Dictionary。需要注意的是:
iOS 9 及以上版本,非 HTTS 的网络是被禁止的,当然我们也可以把 NSAllowsArbitraryLoads 设置为 YES 禁用 ATS。不过 iOS 10 从 2017 年 1 月 1 日起苹果不允许我们通过这个方法跳过 ATS,也就是说强制我们用 HTTPS,如果不这样的话提交 App 可能会被拒绝。但是我们可以通过 NSExceptionDomains 来针对特定的域名开放 HTTP 可以容易通过审核。每个域名都需要三个属性,key 分别为:
NSIncludesSubdomains 是否包含子域 设置为 true
NSExceptionRequiresForwardSecrecy 指定域名是否支持 Forward Secrecy 设置为 false
NSExceptionAllowsInsecureHTTPLoads 是否能使用 http 协议,默认是只能请求 https 的 设置为 true
类型都为 Boolean。
比如这里,我增加了 api.douban.com 这个白名单域,因为它本身就是走的 https 协议,那三个子属性我便没再做配置。应用需要访问的域都可以加到这里。
四、设置应用图标和闪屏图片 (启动图)
在 xcode 中点击 Images.xcassets 文件夹,这是保存应用图标和闪屏等的文件夹:
可以看到应用图标是按照尺寸分类了的,具体每个类型的图片大小要求可以自行查找资料,一定要保证同样的分辨率,而且不需要是圆角,否则在编译的时候会有警告提示。
闪屏的话,可以右键添加 LaunchImage,也是同样的按尺寸和方向分类的,只需要拖入对应的图片即可。
图标和启动图我都是胡乱弄的,要弄齐所有还是很麻烦。
五、连接 iphone 到电脑,并让它们处于 wifi 的同一网段
1. 连接好 iphone 以后,将设备选择为你的 iphone,并点击 xcode 左上方的 build 按钮,就可以执行构建了:
2. 构建完成以后,xcode 会有个没法启动应用的提示。原因是你的手机没有信任这个程序,在手机设置中:通用 -> 设备管理 -> 开发者应用 中信任这个应用,然后点击应用图标即可启动应用了。
构建中途可能会有错误或者警告提示,可根据具体的提示查找解决办法。
我遇到过两个错误:
1.app id 不唯一,在这里可以重新设置:
2. 签名那里没有指定一个 team:
在这里可以按照提示一步一步设置
还需要注意的是部署的目标要和 iphone 系统版本一致:
对于 native 小白来说,这些的确很陌生,哈哈
最后,祝你玩的愉快
来源: