react-native安装到手机进行pre-release测试

通过react-native到cli工具创建并开发一个react-native应用非常方便,甚至是一行命令解决所有开发中的问题。应用开发的差不多之后,打算安装到手机上进行测试,现在这个版本也非常方便,只需要手机连到xcode,直接run build就可以了,之前要改局域网配置,现在也是免了,只要手机和电脑同处一个网络,手机都可以方便的进行调试。

安装到手机上的坑

但当我们把手机连上电脑,直接执行run时,大部分都会报错,因为我们需要解决application的开发者账号问题。因为我们是测试,所以,不需要去付费,只需要在xcode上添加登陆自己的开发者账号即可。具体怎么操作呢?

1)手机连到电脑,连接时,如果弹出警告框,选择信任该设备

2)连接之后,进行开发者账号配置,如下图:

第一次使用xcode的时候,并没有设置自己的开发者账号,因此,要自己输入登陆,只需要在team那个下拉中找到最后一项,打开账户面包添加即可,只要你登陆了,它会自动下载开发者账号的一些信息。

3)Tests里面也要选择正确的账号,这里是坑,我一开始没有选这里,总是报错无法通过,它是在做test的时候使用的账号

4)在device里面选择你自己的手机作为目标设备

5)点击界面左上角的三角形按钮运行构建,xcode会自动将应用安装到你的iphone上,但是,第一次安装会有一个警告框弹出,这主要是因为我们通过普通开发者账号构建的应用没有证书,默认是不被信任的,你需要回到你的iphone中,打开“settings-general- Profiles & Device Management”,点击你的开发者账号,进去之后点击“Trust”字样的选项。信任之后,你就可以在自己的iphone上打开刚安装的应用。

安装一个Pre-release测试版本

但是react-native的cli工具仅默认提供了开发阶段的工具,即react-native start工具,它的工作机制是,在你的设备(模拟器)上打开app之后,连接到你当前进行开发的电脑上,下载jsbundle并解析执行,当你触发刷新(ctrl+D)的时候,app内部通过socket发送消息给电脑,电脑上的服务会重新build一个jsbundle,并通知app,app收到通知后,会重新下载这个新的jsbundle,并重新解析执行。另外,debug模式(等下说)下很多调试用的东西会出现在app界面上,例如app加载jsbundle的进度、app内部报错底部弹出黄色区域进行提示。这些东西都是为了开发方便进行使用的,而不是为了测试。

当我们要创建一个pre-release的测试版本安装到手机上时,我们一方面要去除那些开发才用到的界面信息,另一方面要创建一个静态的jsbundle放在app内部一直使用,而不是每次启动app都要从某个地址去下载。接下来,我们就来一步一步操作:

1)APP图标

在xcode左侧的项目中,找到images.xcassets目录,点击之后,在右侧点击AppIcon。这个地方上传icon比较坑,没有按钮,而是要你打开ifinder,然后把icon拖到对应的图标位置里面去。你需要准备如下尺寸的icon:1024, 180, 120, 87, 80, 60, 58, 40。你尽管随便拖图片进去,尺寸不符的时候会有警告提示图标出现。

2)修改启动界面

修改位置在LaunchScreen里面,也可以在文件ios/[AppName]/Base.lproj/LaunchScreen.xib里面修改。

3)创建一个静态的jsbundle

react-native的cli工具(react-native-cli)默认只在我们的package.json里面加了start命令,没有加build命令,因此,我们要自己添加一个命令用来创建一个jsbundle。

  "scripts": {
    "start": "react-native start",
    "build:ios": "react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios",
    "test": "jest"
  },

上面的红色语句是从官网的文档搬过来的,接下来你要在命令行里面执行:

npm run build:ios

不过这里有个点,就是我直接在npm script命令里面使用了react-native,如果你要在服务器上面做CI集成,为了保险起见,可以把上面的react-native替换为“node node_modules/react-native/local-cli/cli.js”这样能保证软链失效的时候可以做build。

执行完上面的npm命令之后,你可以在ios目录下找到main.jsbundle这个文件,而且assets文件夹也产生了。

4)修改jsbundle获取位置

在ios/[AppName]/Base.lproj/AppDelegate.m文件中找到jsCodeLocation,把它的赋值语句进行修改:

  jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
  //jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

下面被注释掉的,是react-native生成项目的时候使用的,也就是我们开发时的配置,上面一句是官方文档里面给的,用来加载静态jsbundle的。

5)调整build模式

在xcode中,要修改debug模式为release模式:

左侧有好几个选项,都要在右边修改为release。

6)run

完成上面之后,点击run按钮,将应用安装到手机上,可以在手机上愉快测试了。

2018-06-18 312

为价值买单

本文价值3.12RMB