React Native APPのアップデートに関する簡単な説明

React Native APPのアップデートに関する簡単な説明

アプリ更新プロセス

1. アプリを開いたときにインターフェイスまたはファイルを要求して、リモート バージョン/バージョン更新手順/アドレスなどの再利用情報を取得します。

2. ライブラリまたはネイティブソリューションを通じてアプリの最新バージョンを取得する

3. リモート バージョンと現在のバージョンの違いを比較します (ライブラリを使用することも、自分で比較ソリューションを作成することもできます)

4. 取得したリンクを介して操作します(Dandelionと同様に、対応するWebサイトにジャンプしてダウンロードできます。これは、apkリンク、Androidネイティブメソッドを介してダウンロードされるか、App Storeリンクである可能性があります)

大まかなフローチャート

詳細な説明:

1. これらのリモート情報はインターフェースになる可能性があり、それを制御するための中間プラットフォームが存在する可能性があります。もちろん、ファイルになる可能性があり、運用と保守が関連情報を制御できるようにします。リモートバージョンだけでなく、versionCode、versionCodeSwitch、notUpdate、deleteAppなどの他の属性もプロジェクトに追加できます。

  • 1.1 versionCode 通常は数字であるコードでバージョンをアップグレードします (iOS で App Store に提出するときに必要)。この方法では versionName は増加しません。ただし、versionCode が追加された場合、versionName をアップグレードする場合は versionCode も増加する必要があります。
  • 1.2 versionCodeSwitch は、versionCode に応じて更新するかどうかを制御するために使用されます。通常、テスト環境などではオンにして、本番環境ではオフにします。
  • 1.3 notUpdate リモート情報に基づいて更新するかどうか。通常はオン
  • 1.4 deleteApp Androidアプリは、直接インストールすると問題が発生する可能性があるため、アンインストールして再インストールする必要があります。この情報は、最初にアプリを削除してから再度ダウンロードするために使用されます。

2. 現在の携帯電話の情報を取得する方法はたくさんあります。私は react-native-device-info ライブラリを使用しており、より完全な情報を提供しています。もちろん、ネイティブメソッドを使用して APP の情報を取得することもできます。

3. ライブラリを使用するか、独自のライブラリを作成して、ローカル バージョン番号とネイティブ バージョン番号を比較できます。ここでは、100 万回以上ダウンロードされている 2 つのライブラリ (semver-compare と compare-versions) を紹介します。以下は、比較的シンプルな versionName 比較ソリューションです。

/**
 * 2つのバージョン番号を比較する * @param currentVersion 
 * @return ブール値 
 * true=更新が必要、false=不要*/
compareVersion = (currentVersion: 文字列): ブール値 => {
    const {バージョン名: リモートバージョン} = this.remoteInfo || {}
    if (!remoteVersion) {
        偽を返す
    }
    (現在のバージョン === リモートバージョン) の場合 {
        偽を返す
    }
    定数 currentVersionArr = currentVersion.split('.')
    定数 remoteVersionArr = remoteVersion.split('.')
    (i = 0; i < 3; i++ とします) {
        (数値(現在のバージョン配列[i])<数値(リモートバージョン配列[i]))の場合{
            真を返す
        }
    } 
    偽を返す
}

アプリをダウンロードする方法はたくさんあります。最も簡単な方法は、Dandelionなどのサードパーティプラットフォームにジャンプし、RNが提供するLinkingメソッドを使用して直接ジャンプすることです。もちろん、Androidはそれ自体が提供するアドレスから直接ダウンロードできます。方法は次のとおりです(この方法はインターネットから取得されます)。

@Reactメソッド
パブリック void installApk(文字列 filePath、文字列 fileProviderAuthority) {
    ファイル file = new File(filePath);
    ファイルが存在する場合(){
        Log.e("RNUpdater", "installApk: ファイルが存在しません '" + filePath + "'");
        // FIXME これはpromiseを受け取り、失敗させる必要があります
 戻る;
    }
    Build.VERSION.SDK_INT >= 24の場合{
        // API24以降にはFileProvider content:// URIを処理できるパッケージインストーラーがあります
 URI コンテンツ URI;
        試す {
            contentUri = FileProvider.getUriForFile(getReactApplicationContext(), fileProviderAuthority, ファイル);
        } キャッチ (例外 e) {
            // FIXMEは実際にはPromise.rejectであるべきである
 Log.e("RNUpdater", "権限名 '" + fileProviderAuthority + "'" の installApk 例外", e);
            eを投げる;
        }
        インテント installApp = 新しいインテント(Intent.ACTION_INSTALL_PACKAGE);
        インストールApp.addFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION);
        インストール時に、Intent.FLAG_ACTIVITY_NEW_TASK フラグを追加します。
        インストールApp.setData(contentUri);
        installApp.putExtra(Intent.EXTRA_INSTALLER_PACKAGE_NAME、 reactContext.getApplicationInfo().packageName);
        reactContext.startActivity(インストールアプリ);
    } それ以外 {
        // 古いAPIはcontent:// URIを処理できないので、古いfile://スタイルを使用してください
 文字列 cmd = "chmod 777 " + ファイル;
        試す {
            Runtime.getRuntime().exec(cmd);
        } キャッチ (例外 e) {
            e.printStackTrace();
        }
        インテントのインテント = 新しいインテント(Intent.ACTION_VIEW);
        フラグを追加します。
        intent.setDataAndType(Uri.parse("file://" + ファイル)、"application/vnd.android.package-archive");
        reactContext.startActivity(インテント);
    }
}

ダウンロード サービスを独自に提供する場合には、帯域幅に注意する必要があります。ネットワーク速度が遅すぎると、ユーザー エクスペリエンスが悪くなり、トラフィック消費も増加します。トレードオフは開発者が決定する必要があります。

アプリ情報の更新

パッケージ化するときに、スクリプトを通じてインターフェースまたはファイル情報を更新します。もちろん、これは特定のパッケージ化ソリューションによって異なります。たとえば、私の現在のソリューションは、パッケージ化に Jenkins を使用し、パッケージ化時にシェル スクリプトを使用して対応する情報を更新することです (必要に応じて他の言語のスクリプトも使用できます)。

1. まず取得する必要があるファイルアドレスを定義します

androidVersionFilePath="$WORKSPACE/android/app/build.gradle" // このファイルから Android のバージョン情報を取得しますiosVersionFilePath="$WORKSPACE/ios/veronica/Info.plist" // このファイルから iOS のバージョン情報を取得しますchangeLogPath="$WORKSPACE/change.log" // このファイルにバージョン更新情報を保存します

2. ファイルアドレスからパッケージ化後のバージョン情報を取得する

Androidバージョンを取得する(){
  androidVersion=$(cat $androidVersionFilePath | grep "versionName" | awk '{print $2}' | sed 's/\"//g')
  androidCode=$(cat $androidVersionFilePath | grep "versionCode " | awk '{print $2}' | sed 's/\"//g')
  androidDelete=$(cat $androidVersionFilePath | grep "deleteApp" | awk '{print $4}' | sed 's/\"//g')
  0を返す
}

getIOSVersion(){
  行 = $(awk '/CFBundleShortVersionString/ {getline; print}' $iosVersionFilePath)
  iosVersion=$(echo "$rows" | sed -ne 's/<文字列>\(.*\)<\/文字列>/\1/p')
  iosVersion=$(echo "$iosVersion" | sed 's/^[[:space:]]*//')

  行2 = $(awk '/バージョンコード/ {getline; print}' $iosVersionFilePath)
  iosCode=$(echo "$rows2" | sed -ne 's/<文字列>\(.*\)<\/文字列>/\1/p')
  iosCode=$(echo "$iosCode" | sed 's/^[[:space:]]*//')
  0を返す
}

desc=$(cat $changeLogPath | tr "\n" "#")

3. 既存のファイルの情報を置き換える

sed -i '' "s/\"releaseInfo\":.*$/\"releaseInfo\": \"$desc\"/" $JsonPath/$fileName
sed -i '' "s/\"versionName\":.*$/\"versionName\": \"$versionName\",/" $JsonPath/$fileName
sed -i '' "s/\"versionCode\":.*$/\"versionCode\": \"$versionCode\",/" $JsonPath/$fileName
sed -i '' "s/\"deleteApp\":.*$/\"deleteApp\": \"$deleteApp\",/" $JsonPath/$fileName

私のファイルは json 形式であり、説明テキストは任意に入力できるため、解析の問題が発生します。

  • \、```、\n、\r、\" など、JSON.parse が失敗する原因となる記号は使用できません。
  • 説明テキストを区切るために # を使用しているため、この記号は使用できません。

大まかなフローチャート

要約する

これは基本的に、APP のネイティブ バージョンの更新プロセスです。もちろん、このプロセスは APP だけでなく、PC ソフトウェアの更新にも適用されます。ネイティブ バージョンの更新に加えて、ホット アップデートもあり、これも非常に重要です。

上記はReact Native APPアップデートの詳細についての簡単な説明です。React Native APPアップデートの詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • React setStateデータ更新メカニズムの詳細な説明
  • React Nativeはホットアップデートと自動署名パッケージング機能を実装
  • 原則的な詳細な分析 VueのレスポンシブアップデートはReactよりも高速です
  • React コンポーネントのレンダリングと更新の実装コード例
  • コンポーネントに渡されたプロパティが変更されたときにReactでコンポーネントを更新するためのいくつかの実装方法の詳細な説明
  • iOS 上の React Native で差分増分アップデートを実装する方法
  • react-native のホットアップデートと react-native のプッシュ統合で発生した問題について簡単に説明します。

<<:  MySQL で 2 つのテーブルをクエリする場合の from と join の違いの概要

>>:  Dockerコンテナの操作手順の概要と詳細説明

推薦する

VUE ユニアプリの条件付きコーディングとページレイアウトに関する簡単な説明

目次条件付きコンパイルページレイアウト要約する条件付きコンパイル条件付きコンパイルでは、特別なコメン...

VMware 仮想マシンに Centos7.3 をインストールするチュートリアル図

VMware の準備 CentOS の準備、こちらは CentOS 7.3 CentOS-7-x86...

MySQL トリガーの追加、削除、変更、クエリ操作の例

この記事では、例を使用して、MySQL トリガーの追加、削除、変更、およびクエリ操作について説明しま...

Vueはページを更新するために3つの方法を使用する

プロジェクトを作成しているときに、ユーザーがアクションを実行し、特定の状態を変更し、ページを更新して...

CentOS7 で MySQL 5.7.24 をコンパイルしてインストールする詳細なチュートリアル

目次依存関係をインストールするブーストをインストールMySQLをコンパイルしてインストールする構成依...

2時間のDocker入門チュートリアル

目次1.0 はじめに2.0 Dockerのインストール3.0基本的なDockerコマンド4.0 Do...

JavaScript の矢印関数と通常の関数の違いの詳細な説明

この記事では、JavaScriptにおけるアロー関数と通常の関数の違いについて解説します。具体的な内...

MySQL の group by と order by を一緒に使用する方法

テーブル:reward(報酬テーブル)があるとします。テーブル構造は次のようになります。 テーブルt...

JavaScriptカルーセルの実装について

今日もとても実践的な事例です。名前を聞くだけで高度で難しそうですよね?今日はカルーセル画像の真髄を簡...

Ubuntu システムにおける Mysql ERROR 1045 (28000): ユーザー root@localhost へのアクセスが拒否される問題の解決方法

最初の方法: skip-grant-tables: 非常に便利なmysql起動パラメータ非常に便利な...

グループ化されたクエリでのGROUP BYの使用とSQL実行順序の説明

SQL では、GROUP BY は SELECT の結果のデータをグループ化するために使用されます。...

Ubuntu 20.04 中国語入力方法のインストール手順

この記事では、Google 入力方法をインストールします。実は以前はSogou入力方式を使っていたの...

Linux での MySQL マルチインスタンスの展開とインストール ガイド

MySQLマルチインスタンスとは簡単に言うと、MySQL マルチインスタンスとは、サーバー上で複数の...

Linux で完全な Samba サーバーを構築する方法 (CentOS バージョン)

序文smb は、クライアントとサーバー間の Web 接続および情報通信に使用できるプロトコルの名前で...

HTTP 戻りコード一覧(中国語と英語の説明)

httpリターンコードリスト(以下は概要です)詳細な中国語の説明についてはここをクリックしてくださ...