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 不得不說的二三事