react-native-app-bundle

个人使用写的, react-native 项目 Android iOS 热更新， cli命令行工具打热更包、apk、ipa，上传到阿里云、蒲公英、App Store

Getting started

项目集成

$ npm i react-native-app-bundle

or

$ yarn add react-native-app-bundle

安装依赖的第三方

$ npm i react-native-fs react-native-zip-archive

or

$ yarn add react-native-fs react-native-zip-archive

安装本地命令行工具 cli脚手架

$ npm i react-native-app-bundle -g

iOS

1. 在 AppDelegate 导入头文件 #import "AppBundleUpdate.h"
2. 在 AppDelegate 的 sourceURLForBridge 返回 [AppBundleUpdate bundleURL]

Android

1. Open up android/app/src/main/java/[...]/MainApplication.java

• Add import com.appbundle.RNAppBundlePackage; to the imports at the top of the file
• Add

@Override
  protected String getJSBundleFile() {
      return RNAppBundlePackage.bundleURL();
  }

Usage

import { downloadBundle, downloadApk, getBundleVersion, updateBundle, installAPK } from 'react-native-app-bundle';

progress(bytesWritten, contentLength) {
    let progress = parseFloat(bytesWritten / contentLength);
    this.setState({
      curProgress: (progress * 100).toFixed(2),
    })
  }
//下载热更包
downloadBundle(url, this.progress.bind(this)).then((path) => {
        this.setState({
          curProgress: 100
        }, () => {
			//更新js包并立即刷新
          updateBundle(path)
        })
      }).catch((e) => {
        console.log('下载失败', e);
      })
//安卓下载apk
downloadApk(this.props.newVersionUrl, this.progress.bind(this)).then(path => {
          this.setState({
            curProgress: 100
          }, () => {
			//安装apk
            installAPK(path)
          })
        }).catch(e => {
          console.log('下载失败', e);
        })

cli 命令行工具

在项目根目录创建"appBundleConfig.json"文件

{
    "aliossUrl": "阿里云授权接口",
    "aliossEndpoint": "阿里云Endpoint",
    "aliossBucketName": "阿里云BucketName",
    "pgyerApiKey": "蒲公英apikey",
    "iosPack":{
		  "ipaPath":"ipa的路径",//默认值 iosPack/${name}/${name}.ipa
		  "ossPath":"阿里云上的路径",//默认值 ipa/${name}.ipa
      "workspace": "./ios/myApp.xcworkspace",
      "scheme":"schemeName",
		  "apiKey":"apikey",
      "apiIssuer":"apiIssuer"
    },
	  "androidPack":{
		  "apkPath":"apk的路径",//默认值 android/app/build/outputs/apk/release/app-release.apk
		  "ossPath":"阿里云上的路径"//默认值 apk/${name}.ipa
    }
}

apiKey 和 apiIssuer 的获取

使用开发者账号访问 https://appstoreconnect.apple.com 登录 App Store Connect 首页，点击【用户与访问】 选择【密钥】生成 AuthKey_<api_key>.p8密钥下载保存（只能下载一次）,密钥 ID填入 apiKey 参数，Issuer ID 填入 apiIssuer 参数, 在项目根目录或用户根目录下创建 private_keys 文件夹，再将下载的 AuthKey_<api_key>.p8文件复制或移动到private_keys文件夹下

js热更包命令

//name 项目的名字 version APP的版本号 platform 平台 "android" or "ios" or "all"
react-native-app-bundle bundle <name> <version> <platform> [options]

选项

//js入口文件
-ef, --entry-file [entryFile]
//ios-bundle-file iOS打包出来的jsbundle文件名
-if, --ios-bundle-file [iosBundleFile]
//android-bundle-file Android打包出来的jsbundle文件名
-af, --android-bundle-file [androidBundleFile]
//打包出来的文件夹在项目根目录的路径
-d, --dir [dir]

//是否上传阿里云
-ia, --is-aliyun
//更新内容描述
-des, --description [description]

打包命令 打包apk或ipa 上传到蒲公英 上传到App Store

//name 项目的名字 platform 平台 "android" or "ios" or "all"
react-native-app-bundle pack <name> <platform> [options]

ps: ios打包要安装xcpretty

gem install xcpretty

ps: android打包要安装aapt 一般androidSDK里有，设置下环境变量 编辑".zshrc"文件添加

export PATH=$PATH:$HOME/Library/Android/sdk/build-tools/x.x.x

选项

//是否编译打包
-ip, --is-pack [is]
//iOS是否上传到App Store
-iua, --is-upload-appStore
//是否上传到阿里云
-iuo, --is-upload-oss
//是否上传到蒲公英
-iup, --is-upload-pgyer
//上传到阿里云的路径
-op, --oss-path [path]
//apk路径
-apk, --apk-path [path]
//ipa路径
-ipa, --ipa-path [path]
//是否上传更新接口
-iu, --is-upload
//更新内容描述
-des, --description [description]