Taro React Native 3 個更新幫助開發者高效開發APP

Taro React Native 開源項目重大更新來了，全方位降低上手成本，提升開發體驗。全流程自動化，讓開發者擺脫原生環境配置，專注前端開發。

Taro 3.2.0 正式版本發佈至今，已過去半年。在此期間，有不少社區開發者已經使用上 Taro 來開發 APP 了。看到社區的使用量越來越多，開發團隊也是收穫滿滿。

同時我們也收到了很多來自開發者的反饋，主要集中於開發環境配置複雜、組件和 API 的完善度不夠及使用上的 BUG 等。對於組件和 API 的完善度及使用上的 BUG，我們都是儘可能地及時地處理併發布新版本。然而，對於開發者反饋的開發環境配置的問題，卻很難復現及解決。

首先 Android + iOS + React Native + Taro，4個技術的各種環境配置，會讓很多開發者望而卻步。其次開發者面對的環境問題千奇百怪，很多問題難以通過遠程協助解決。不少開發者在調研階段，因爲無法順利運行，便放棄了使用。對於一個跨平臺框架來說，主要目的是提效，而非給開發者帶來更多困難。開發環境配置問題的解決，顯得尤爲重要。

這次我們從以下三個方向去優化整個開發流程，全面降低上手成本，讓 Taro 開發 APP，變得無比輕鬆。

1、爲 Taro 提供 react-native 模板，項目的初始化，只需要幾個命令。

2、與 GitHub Actions 進行集成，不再需要本地安裝原生開發環境，打包及發佈交給 CI 去做。

3、提供 Taro Playground APP，可以通過應用商店或者 GitHub 下載安裝，進行項目調試。

目前使用 Taro 開發 React Native APP 時，我們需要一個原生殼工程，在另外一個倉庫[1]。對於新手來說，通常會造成一些困惑：

1、沒有接觸過 React Native 開發的開發者首先需要理解 React Native 的開發流程，然後完成兩個倉庫的初始化。

2、兩個倉庫都需要安裝依賴，並且需要保持某些依賴版本的一致性。當有依賴更新時，需要在兩個倉庫中進行操作，非常容易遺漏。

3、項目依賴原生的運行環境。開發者經常遇到安裝過程報錯，無法運行的場景。一些依賴包的下載需要切換源或依賴特定網絡環境。

這些問題對新手入門很不友好，爲此我們提供了一個初始化模板[2]。初始化項目使用 taro init [project] 選擇 react-native 模板。

初始化完成後，便可使用進入開發。以下爲一些常用命令：

# 更新相關依賴。在初始化完成後或 Taro 版本更新後執行，用於同步 peerDependencies。
$ yarn upgradePeerdeps

# 打包 js bundle 及靜態資源。在初始化完成後執行，用於打包默認使用的 bundle。
$ yarn build:rn --platform ios

# 啓動 bundle server
$ yarn start

# 啓動 iOS
$ yarn ios

# 啓動安卓
$ yarn android

具體操作可以查看錄屏：

通過模板方式進行初始化的項目，有幾個優勢：

1、Taro 倉庫與殼工程倉庫進行整合，不再需要管理雙倉庫。當然習慣雙倉庫模式的開發者，仍然可以正常使用。

2、當 Taro 進行升級時，可以通過執行 yarn upgradePeerdeps進行依賴同步。這裏我們將 Taro 依賴的 React Native 相關庫寫入了 peerDependencies 中，然後通過 install-peerdeps 去完成依賴的同步。

3、集成了 GitHub Actions，可通過 workflow 完成 APP 的打包。

要解決開發環境的各種問題，通常的做法就是提供一個穩定的環境用於打包發佈，在企業裏是各種 CI/CD 平臺。但對於開源項目來講，就需要一個公開的平臺，每個人都能使用，當然最好是免費的。於是我們想到了 GitHub Actions。

GitHub Actions 是 GitHub 提供的持續集成服務，於 2018 年 10 月推出。功能非常強大，並且免費（每月有限額），同時私有倉庫也能夠使用，非常契合我們的需求。

通過模板初始化的項目，可在 .github/workflows 目錄中看到 4 個文件。分別爲 iOS 和 Android 的 release 包和 debug 包的打包工作流。模板爲了簡化過程，設置爲通過 git push 即可觸發打包，可根據自身情況，配置合適自身業務場景的工作流。打包生成的產物可以在 Artifacts 中找到，也可以使用 softprops/action-gh-release@v1 action，將產物發佈到項目的 Release 中。

這樣一來新手便可以不需要關注原生環境以及 APP 打包的問題。開發時，可以安裝 debug 包加載本地的 jsbundle，進行調試。發佈時，交給 CI 進行打包，產物再提交到應用市場，整個過程完全不需要 AS 與 XCode。當然這裏還有一些必要配置需要做，比如 APP 的簽名等，將在後面的章節講解。

GitHub Actions 功能非常強大，Taro 就用它來做打包發佈等工作，可參考文檔[3]或查看資料做進一步探索，做點有趣的事情。

在 Taro 項目模板裏面我們提供了一個 CI 腳本模板，開發者仍然需要進行一些配置，才能夠開始打包。下面是打包 Android APP 的基礎配置說明，iOS 同理：

配置打包的環境變量

env:
    APP_ID: com.taro.demo  # 應用 ID
    APP_NAME: Taro Demo  # 應用名稱
    VERSION_NAME: 1.0.0 # 應用版本號
    VERSION_CODE: 10 # 用於應用市場、程序內部識別版本，判斷新舊版本，一般遞增處理
    KEYSTORE_FILE: debug.keystore # 簽名文件
    KEYSTORE_PASSWORD: android # 密碼
    KEYSTORE_KEY_ALIAS: androiddebugkey # 別名
    KEYSTORE_KEY_PASSWORD: android # 別名的密碼

通過 github secrets 管理祕鑰配置

通常我們不應該把密鑰等敏感信息直接寫在配置文件中，而是置於加密信息中。在 GitHub Actions 中，可以使用加密機制進行處理[4]。如圖，在 setting -> secret 配上 CI 需要的 secret。然後在 workflow 中通過相應變量進行使用，如 ${{secrets.DEBUG_KEYSTORE_PASSWORD}}。

對於殼工程與項目工程分開的場景，利用 CI 命令將兩個項目進行合併也可以實現打包自動化。具體流程如下：

1、殼工程和業務項目合併

因爲 GitHub Actions 只能在當前項目下進行操作，所以需要將殼工程（taro-native-shell）合併到項目工程下。

2、合併項目和殼工程的 package.json

在有原生依賴的情況下，必須保證殼工程和業務項目的原生依賴版本一致，不然打包可能會報錯。

3、安裝依賴

在業務項目工程下安裝合併後的 package.json 依賴。

4、軟鏈依賴

將安裝到業務項目下的依賴軟鏈至殼工程項目 node_module 下。

ln -s ./node_modules ./taro-native-shell/node_modules

5、業務項目編譯

執行 taro/cli build:rn 編譯命令，打包生成 jsbundle 與靜態資源。

6、將編譯產物移動到原生殼工程

rn: {  appName: 'taroDemo',  output: {    ios: './ios/main.jsbundle',    iosAssetsDest: './ios',    android: './android/app/src/main/assets/index.android.bundle',    androidAssetsDest: './android/app/src/main/res',    iosSourcemapOutput: './ios/main.map',    androidSourcemapOutput: './android/app/src/main/assets/index.android.map',  },}

taro 編譯 rn 輸出靜態資源，需要將資源移到原生項目中。

7、編譯原生 APP

到 ios 和 android 目錄裏分別執行對應的打包命令。

8、上傳 APP

將打包後的 APP 進行上傳，提供下載鏈接。

# iOS- name: Upload iOS Products  uses: actions/upload-artifact@v2  with:    name: app-${{ env.BUILD_TYPE }}    path: |      ${{ github.workspace }}/ios/taroDemo.ipa      ${{ github.workspace }}/ios/taroDemo.app.dSYM.zip

# Android- name: Upload Android Products  uses: actions/upload-artifact@v2  with:    name: app-${{ env.BUILD_TYPE }}    path: ${{ github.workspace }}/android/app/build/outputs/apk/${{ env.BUILD_TYPE }}/app-${{ env.BUILD_TYPE }}.apk

在 iOS 側，release workflow 還集成了上傳至 APP Store 命令：

- name: Upload app to App Store Connect  env:    APP_STORE_CONNECT_USERNAME: ${{ env.APP_STORE_CONNECT_USERNAME }}    APP_STORE_CONNECT_PASSWORD: ${{ env.APP_STORE_CONNECT_PASSWORD }}  run: |    cd ios    xcrun altool --upload-app -t ios -f "taroDemo.ipa" -u "$APP_STORE_CONNECT_USERNAME" -p "$APP_STORE_CONNECT_PASSWORD"

上面整個流程對於開發者來說理解成本太高，配置過於繁瑣，所以我們將前 6 個步驟封裝成一個 GitHub action[5]，開發者只需要添加一些配置項就能完成上面的流程。

- name: taro-native-publish  uses: shinken008/[email protected]  with:    REPO: ${{ env.SHELL_REPO }}    REPO_REF: ${{ env.SHELL_REPO_REF }}    REPO_PATH: taro-native-shell    BUILD_CMD: yarn build:rn    IOS_BUNDLE: ios/main.jsbundle    IOS_ASSETS: ios    ANDROID_BUNDLE: android/index.android.bundle    ANDROID_ASSETS: android    PLATFORM: android

對應的需要拉取的另一個倉庫的配置：

env:  # 殼工程  SHELL_REPO: NervJS/taro-native-shell  # 殼工程ref  SHELL_REPO_REF: 0.63.2  # 殼工程目錄  SHELL_REPO_PATH: taro-native-shell

配置介紹:

REPO：殼工程地址
REPO_REF：殼工程分支
SHELL_REPO_PATH：殼工程目錄
IOS_BUNDLE：編譯 iOS 後的 js bundle 地址
IOS_ASSETS：編譯 iOS 後的其他靜態文件（圖片等）地址
ANDROID_BUNDLE：編譯 Android 後的 js bundle 地址
ANDROID_ASSETS：編譯 Android 後的其他靜態文件（圖片等）地址
PLATFORM：編譯的目標平臺 ios/android

iOS APP 的打包過程相對繁瑣，這裏我們直接使用了一個優秀的工具 fastlane[6]。fastlane 是一個爲 iOS 和 Android 開發者提供的工具，可以自動執行繁瑣的任務，如生成屏幕截圖、處理配置文件和發佈應用程序。

打包過程中的 info plist 文件修改、版本號修改、簽名設置都可以交給 fastlane 去處理，經過 fastlane 的封裝，開發者處理這些繁瑣的任務，只需要添加幾行配置即可。

但是要讓 fastlane 在 GitHub Actions 使用，還需要幾步操作。因爲證書（Certificate）與描述文件（Provisioning Profiles）並不存儲在項目倉庫中，而每次工作流都是發生在隨機的主機上的，這就需要我們在打包前，先將證書與描述文件導入到當前主機中。

Release 證書的導入過程如下：

1、將證書的 p12 文件轉成 base64 字符串。

cat Certificates.p12 | base64 | pbcopy

2、將第一步內容保存在項目的 secret 中，key 爲 RELEASE_SIGNING_CERTIFICATE_P12_DATA

3、將p12 文件的密碼保存在項目的 secret 中，key 爲 RELEASE_SIGNING_CERTIFICATE_PASSWORD

4、將 secret 內配置的相關信息導入到主機中。

security import <(echo $SIGNING_CERTIFICATE_P12_DATA | base64 --decode) \    -f pkcs12 \    -k build.keychain \    -P $SIGNING_CERTIFICATE_PASSWORD \    -T /usr/bin/codesign

描述文件的導入過程，與證書的導入過程類似，均已封裝在 workflow 中。

要將生成的 ipa 文件上傳至 testflight 或者 APP Store 上，還需要提供用戶名（APP_STORE_CONNECT_USERNAME）與密碼（APP_STORE_CONNECT_PASSWORD），可參考文檔進行生成[7]。

至於證書與描述文件的生成，可查閱 iOS 開發相關文章[8]，這裏不再贅述。fastlane 配置的更多細節可查看 ios/fastlane/Fastfile 文件。

Android 的打包過程相對簡單，直接調用 gradlew 命令即可。除了配置 APP 的基礎信息，還需要爲應用進行簽名。可參考 Android 應用簽名相關文檔[9]，生成簽名文件，置於 android/app 目錄中。

簽名文件也可通過命令行工具生成：

keytool -genkey -alias android -keyalg RSA -validity 99999 -keystore release.keystore

打包相關參數，通過 gradlew 的 -P, --project-prop 參數進行傳入，如 ./gradlew assembledebug -Papp_id=${{ env.APP_ID }}，其默認值在 android/gradle.properties 文件中定義。

基於 GitHub Actions 與 Taro 模板，我們完成了項目初始化與打包過程的自動化。但對於想要體驗 Taro 開發 APP 的開發者來說，仍然太過繁瑣。爲此，我們開發了 Taro Playground APP，並完全開源[10]。一方面可以展示組件和 API 的使用示例，另一方面提供了動態加載 jsbundle 的功能，便於開發人員進行本地代碼的調試。

本地調試

開發者可以在 Taro Playground 倉庫的 Releases 頁面進行安裝包下載[11]，也可掃描以下二維碼安裝 APP。

Android	iOS

Taro 工程中通過 yarn dev:rn --qr 啓動 bundler server，打印包含 IP 及端口信息的二維碼。通過 Taro Playground APP 掃描該二維碼，即可加載 jsbundle 進行調試，需要保證手機與電腦處於同一個局域網中。

具體操作可以查看錄屏：

示列代碼

Taro Playground 項目提供了較全面的示例代碼，開發者可以參考，避免一些可能遇到的坑，如有問題，歡迎 pr。

通過上述多方面的優化，極大地降低了使用 Taro 開發 APP 的成本。大部分場景下，只需要掌握 Taro 和 React Native，再加上一些配置，即可完成 APP 的開發與發佈。

使用過程中，如遇任何問題，可添加 “58技術小祕書” 或 “Taro 小助手” 爲好友，備註 “Taro RN”，加入官方交流羣尋求幫助。

後續，我們還將帶來支持 React Native 的 Taro UI 以及包含詳細教程的技術小冊，盡請期待。

同時我們也在徵集社區優秀使用案例，歡迎開發者提交案例到案例倉庫中[12]。

相關鏈接：

[1] 殼工程地址：https://github.com/NervJS/taro-native-shell

[2] 模板源碼地址：https://github.com/NervJS/taro-project-templates/tree/v3.1/react-native

[3] GitHub Action 文檔：https://docs.github.com/cn/actions

[4] GitHub Action 加密機制：https://docs.github.com/cn/actions/reference/encrypted-secrets

[5] Taro React Native Publish Action：https://github.com/shinken008/taro-native-publish

[6] fastlane官網：https://docs.fastlane.tools

[7] AppleID 密碼生成：https://support.apple.com/en-us/HT204397

[8] 使用 GitHub Action 發佈 iOS 應用：https://betterprogramming.pub/deploy-an-ios-app-to-testflight-or-the-app-store-using-github-actions-c4d7082b1430

[9] 安卓簽名文件生成：https://developer.android.com/studio/publish/app-signing#generate-key

[10] Taro Playground 源碼：https://github.com/wuba/taro-playground

[11] Taro Playground APP 下載：https://github.com/wuba/taro-playground/releases

[12] Taro 案例提交：https://github.com/NervJS/taro-user-cases

作者簡介：

陳誌慶：58同城前端架構師，技術委員會委員

王信健：58同城資深前端開發工程師

鳴謝：

謝偉：iOS 集成

趙尉尉：Android 集成

解成博：Taro Playground APP 開發

楊楊：Taro Playground APP 測試

Taro React Native 3 個更新幫助開發者高效開發APP

在 Taro 項目模板裏面我們提供了一個 CI 腳本模板，開發者仍然需要進行一些配置，才能夠開始打包。下面是打包 Android APP 的基礎配置說明，iOS 同理：

本地調試

示列代碼

相關鏈接：

相關鏈接

高性能小程序的最佳實踐

大型 3D 互動項目開發和優化實踐

實踐指南-前端性能提升 270%

2023 年的 Web Worker 項目實踐

Taro 正式發佈 3.6 版本：支持跨端路由、請求庫，新增鴻蒙、Web 端平臺插件，小程序持續集成 CI 能力升級

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結