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模式：