React Native 和 Jenkins 不得不说的二三事

app开发和测试过程当中咱们都会执行npm start命令来启动服务，只是这样仍是很繁琐，咱们须要人工介入才能发布代码，本篇文章的目的就是介绍如何使用jenkins让咱们的项目自动化。

1. 项目准备

原理是打包bundle，而后把文件放到服务器上。

react-native打包文件结果包含bundle文件和图片资源文件。

若是app加载本地bundle或者链接本地开发服务，图片资源是能够正常访问的，可是若是访问的是多级目录地址，例如http://www.xxx.com/awe/bundle.js，图片的地址只会从域名http://www.xxx.com查找，最终致使图片没法显示。

这是由于Image组件加载逻辑不支持多级目录，感兴趣能够查看React Native 图片资源那些事了解详情。

解决方案是Image/resolveAssetSource提供的setCustomSourceTransformer，它可让咱们决定图片的处理逻辑。

咱们把serverUrl替换为jsbundleUrl，这样图片就会从bundle同级查找到图片。

若是有其余需求，能够参阅react-native/Libraries/Image/resolveAssetSource中相关代码，自行设置setCustomSourceTransformer。

import React from 'react';
import { AppRegistry, Platform } from 'react-native';
import { setCustomSourceTransformer } from 'react-native/Libraries/Image/resolveAssetSource';

import Entry from './src/entry';

if (process.env.NODE_ENV_REAL === "test") {
  // 定制资源的获取方式
  // 由域名根目录调整为bundle所在目录
  // 安卓使用drawable格式
  setCustomSourceTransformer((resolver) => {
    resolver.serverUrl = resolver.jsbundleUrl;

    if (Platform.OS === "android") {
      return resolver.drawableFolderInBundle();
    }

    return resolver.defaultAsset();
  });
}

AppRegistry.registerComponent('awe', () => Entry);

2. jenkins配置

2.1 建立任务

点击"新建任务"开始填写任务信息，输入任务名称并选择"构建一个自由风格的软件项目"。

2.2 源码管理

"源码管理"中配置项目代码，以Git为例，须要配置两个参数：

• Repositories 仓库地址和认证方式
• Branches to build 分支，咱们填入$branch，指定为自定义构建参数

2.3 添加任务参数

在"General"中勾选"参数化构建过程"，而后点击"添加参数"，在候选列表中选择Git Parameter，配置如下两项：

• Name： 可访问到的变量名称，如配置为branch后能够经过$branch拿到值
• Parameter Type：选择Branch，也能够根据状况配置其余选项

这样在前面"源码管理"中配置的$branch就能够访问到仓库的全部分支。

以及一个选项参数：env(指定目标环境)。候选数据一行一条记录输入便可。

2.4 添加构建执行Shell

在"构建"中点击"增长构建步骤"按钮，在候选列表中选择"执行 shell"。

下面是一段简单判断env执行不一样脚本的代码：

#!/bin/bash

echo -------------------------------------------------------
echo 环境: ${env}
echo -------------------------------------------------------
# 准备工做

yarn install

if [ "$env" == "dev" ]
then
  yarn run bundle-android
  yarn run bundle-ios

elif [ "$env" == "prod" ]
then
  yarn run prod-android
  yarn run prod-ios
fi

2.5 部署和使用

最后你们把生成的bundle文件连同资源文件部署到服务器，app中填写对应的地址。

• ios: http://xxx.com/rn/juzizhou/bu...
• android: http://xxx.com/rn/juzizhou/bu...

另外须要注意:

1. 取消"Use JS Deltas"
2. 可能须要对bundle设置mime-type
3. react-native bundle存在缓存问题，使用--reset-cache参数清除

写在最后

至此咱们能够安心经过jenkins来发布，其实一开始就有这样作的想法，不过一直迟迟未动，现在总算是实践完成并写了这篇文章。

算上我前面发布的微信小程序和Jenkins不得不说的二三事，这已是第二篇关于jenkins自动化的文章，有机会我会再写相关实践。

本文同步发表于做者博客: React Native 和 Jenkins 不得不说的二三事