Logo

菜单

发布于 2026-01-06 0 阅读
0

React Native 应用的自动版本控制

React Native 应用的自动版本控制

问题

您需要将应用版本更新至 1.0.0：

1. 打开android/app/build.gradle更新版本并增加内部版本号。

2. 对于 iOS，使用 Xcode 也需要进行同样的操作，因为直接编辑构建配置文件更容易出错。

3. 你需要保持所有内容的一致性，所以你需要打开package.json并更新版本，以便从 JS 端向用户显示的版本引用是正确的。



import { version } from "./package.json"

console.log(version)
// 1.0.0
Enter fullscreen mode Exit fullscreen mode

我感觉自己效率超高，心情也特别好！

没有哪个开发者经历过那种事后会这么说。

解决方案

理想的情况是只更新一个版本号。以下是我们的具体操作：

1. 用于npm version [patch|minor|major]处理 JS 包版本（参见语义化版本控制）。

JS 版本是我们的唯一权威来源。因此，Android 和 iOS 版本应该与 JSpackage.json版本设置保持一致。

2. 使用 fastlane 处理 Android 和 iOS 端。

fastlane是一款出色的开源工具，专注于自动化 Android 和 iOS 任务。它拥有丰富的社区开发插件库，可以帮助我们处理版本控制等问题。

3. 将以上 2 个步骤合并为一个 npm 脚本。

步骤

我们将以一个全新的 React Native 项目作为起点：



npx react-native init MyApp
Enter fullscreen mode Exit fullscreen mode

如果您尚未安装fastlane，请先安装它：



# Install the latest Xcode command line tools
xcode-select --install

# Install fastlane using RubyGems
sudo gem install fastlane -NV

# Alternatively using Homebrew
brew install fastlane
Enter fullscreen mode Exit fullscreen mode

设置 fastlane 目录并创建一个空的 fastfile 文件：



cd MyApp
mkdir fastlane && cd fastlane 
touch Fastfile
Enter fullscreen mode Exit fullscreen mode

我们希望能够fastlane从 React Native 项目的根目录运行该命令。因此，我们将从根目录安装版本控制插件：



cd ..

# Install plugins
fastlane add_plugin increment_version_name increment_version_code load_json
Enter fullscreen mode Exit fullscreen mode

如果询问是否创建 Gemfile，请选择“是”。

前两个插件用于处理 Android 上的版本和版本代码，第三个插件用于读取 JSON 文件（我们的package.json）。

接下来，我们将添加 fastlane 脚本。将以下内容复制到 fastfile 文件中fastlane/Fastfile。



  desc 'Android: Increment versionCode and set versionName to package.json version.'
  package = load_json(json_path: "./package.json")

  private_lane :inc_ver_and do
    increment_version_code(
      gradle_file_path: "./android/app/build.gradle",
    )

    increment_version_name(
      gradle_file_path: "./android/app/build.gradle",
      version_name: package['version']
    )
  end


  desc 'iOS: Increment build number and set the version to package.json version.'
  private_lane :inc_ver_ios do
  package = load_json(json_path: "./package.json")

    increment_build_number(
      xcodeproj: './ios/' + package['name'] + '.xcodeproj'
    )
    increment_version_number(
      xcodeproj: './ios/' + package['name'] + '.xcodeproj',
      version_number: package['version']
    )
  end


  desc 'Bump build numbers, and set the version to match the pacakage.json version.'
  lane :bump do
    inc_ver_ios
    inc_ver_and
  end
Enter fullscreen mode Exit fullscreen mode

接下来，我们将向 package.json 文件中添加以下脚本，以实现自动补丁、次版本号和主版本号的升级：



{ 
  "name": "MyApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint .",
    "bump-patch": "npm version patch --no-git-tag-version && bundle exec fastlane bump",
    "bump-minor": "npm version minor --no-git-tag-version && bundle exec fastlane bump",
    "bump-major": "npm version major --no-git-tag-version && bundle exec fastlane bump",
},
Enter fullscreen mode Exit fullscreen mode

命令的第一部分会更新 JS 包的版本，但不会向 Git 仓库提交更改。第二部分会执行 fastlane bump 命令，该命令会自动更新 Android 和 iOS 的构建版本号，使其与 JS 端的版本保持一致。



# npm
npm run bump-patch  

# yarn
yarn bump-patch
Enter fullscreen mode Exit fullscreen mode

版本更新 Gif

PS：我正在维护一个 React Native模板，其中包含许多类似文章中提到的好东西。

文章来源：https://dev.to/osamaqarem/automatic-versioning-for-react-native-apps-2bf3
有关计算机科学的免费教程
过去一周最受欢迎的 7 篇开发者文章