インストールとネイティブ環境の設定

環境を準備する

• すでにビルドされている React Native、Expo、または RNOH プロジェクト。特に明記されていない限り、コマンドは package.json を含む アプリ ルート から実行されます。

• Node.js ≥18.17 および既存のプラットフォーム ツールチェーン。 iOS ビルドには macOS が必要です。

• 個別のテスト アプリケーションとデバイス。 1 つのプラットフォームから始めます。

SDK ピアの依存関係では、React ≥16.8 および RN ≥0.59 が宣言されています。これは、すべてのバージョンおよびアーキテクチャに対するテストを保証するものではありません。プロジェクトのバージョンを維持し、以下のホスト構造に従ってください。

SDK をインストールします

プロジェクトのタイプを選択します。 package.json を含むディレクトリでコマンドを実行します。

npm install -g rn-update-cli
npm install rn-update

npm install -g rn-update-cli
npx expo install rn-update

React Native の iOS プロジェクトでは、ios ディレクトリで（Bundler を使う場合は bundle exec を付けて）pod install を実行し、その後アプリのルートに戻ります。Expo はビルド手順の実行時にネイティブプロジェクトを生成します。ネイティブディレクトリがない場合は、先に npx expo prebuild を実行してください。

サインインしてアプリケーションを作成または選択します

Pakta コンソールに登録し、アプリのルートからサインインします。

pakta login

デフォルトでは、CLI はセッションを現在のディレクトリに .pakta.token として保存し、プロジェクトにすでに CLI 一時ディレクトリがある場合は .pakta を .gitignore に追加します。どちらのパスもコミットされていないことを確認します。パスワード、セッション ファイル、または PAKTA_API_TOKEN をリポジトリに置かないでください。 RNU_SERVICE_URL がセルフホステッド サービスを指す場合、資格情報はサービス URL ごとに個別に保存されます。

アプリケーションを作成する

Android、iOS、HarmonyOS は別個のプラットフォーム アプリケーションです。必要に応じてそれぞれ作成します。 CLI は、新しく作成されたアプリケーションを選択し、それを update.json に書き込みます。

実際に出荷するプラットフォームの行のみを実行します。未使用のプラットフォーム アプリケーションを作成しないでください。

pakta createApp --platform android --name PaktaDemo
pakta createApp --platform ios --name PaktaDemo
pakta createApp --platform harmony --name PaktaDemo

名前は一致する可能性があります。プラットフォームは、構築するインストーラーと一致する必要があります。

既存のアプリケーションを選択します

アプリケーションがすでにコンソールに存在する場合は、プラットフォームのアプリケーションをリストし、1 つ選択します。

pakta apps --platform android
pakta selectApp --platform android

CLI には、アプリケーションとその appId が表示されます。使用する appId を入力します。これらのターゲットのプラットフォームを ios または harmony に置き換えます。 1 つの update.json で 3 つの選択をすべて保持できます。 1 つのプラットフォームを選択すると、他のエントリが保持されます。

`appId`、`appKey`、`update.json`

選択後、アプリのルートには次のようなファイルが含まれます。

{
  "android": {
    "appId": "YOUR_ANDROID_APP_ID",
    "appKey": "YOUR_ANDROID_APP_KEY"
  },
  "ios": {
    "appId": "YOUR_IOS_APP_ID",
    "appKey": "YOUR_IOS_APP_KEY"
  },
  "harmony": {
    "appId": "YOUR_HARMONY_APP_ID",
    "appKey": "YOUR_HARMONY_APP_KEY"
  }
}

実際のファイルには、作成または選択したプラットフォームのみが含まれます。従来のサービスは、appId 数値を書き込む場合があります。 Pakta スタンドアロン サービスは UUID を書き込む可能性があります。どちらもサーバーによって生成されたアプリケーション ID です。編集、並べ替え、変換しないでください。

update.json には公開資格情報が含まれていないため、チーム共有用にコミットできます。アプリケーション コードがそれをインポートすると、その内容は JavaScript バンドルに入ります。 CLI のみがそれを使用する場合、設定は公開されたままになります。プラットフォーム固有の appKey の読み込みについては、ルート コンポーネント setup を参照してください。

プロジェクトに一致するセクションのみに従ってください。

Android: 接続バンドル読み込み

MainApplication.kt が reactHost および getDefaultReactHost を使用する場合は、既存のホストに jsBundleFilePath を追加します。

import cn.reactnative.modules.update.UpdateContext

// Keep existing ReactHost, PackageList and getDefaultReactHost imports.
override val reactHost: ReactHost by lazy {
  getDefaultReactHost(
    context = applicationContext,
    packageList = PackageList(this).packages,
    jsBundleFilePath = UpdateContext.getBundleUrl(this),
  )
}

DefaultReactNativeHost / ReactNativeHost の場合、UpdateContext をインポートし、既存のホスト オブジェクトのメソッドをオーバーライドします。

override fun getJSBundleFile(): String? =
  UpdateContext.getBundleUrl(this@MainApplication)

既存のリリース設定で PNG クランチを無効にして、リソース バイトの差を減らします。

android {
  buildTypes {
    release {
      crunchPngs false
    }
  }
}

自動リンクによってモジュールが接続され、SDK の Gradle 統合によってビルド ID が提供されます。 buildTime を発明しないでください。既存の署名とビルド設定を保持します。

ルート コンポーネント を接続し、android から ./gradlew assembleRelease を実行するか、Windows では .\gradlew.bat assembleRelease を実行します。フレーバー付きプロジェクトには、一致するリリース タスクを使用します。

Java プロジェクト

android/app/src/main/java/your/package/MainApplication.java を開きます。 import cn.reactnative.modules.update.UpdateContext; を先頭に追加し、このオーバーライドを既存の ReactNativeHost または DefaultReactNativeHost オブジェクト内に追加します。

@Override
protected String getJSBundleFile() {
    return UpdateContext.getBundleUrl(MainApplication.this);
}

iOS: リリース バンドルに Pakta を使用

ios: Bundler プロジェクトの場合は bundle exec pod install、それ以外の場合は pod install からポッドをインストールします。以下から RN テンプレートに一致するものを選択してください: RN 0.74+ は bundleURL を使用します。古いテンプレートは通常、sourceURLForBridge: を使用します。

#import "RCTPakta.h"

- (NSURL *)bundleURL
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
  return [RCTPakta bundleURL];
#endif
}

#import "RCTPakta.h"

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
  return [RCTPakta bundleURL];
#endif
}

既存のデバッグ エントリ ポイント、モジュール名、ライフサイクル メソッドを維持します。 Swift テンプレートでは、実際のリリース バンドル URL プロバイダーは RCTPakta.bundleURL() を返す必要があります。 AppDelegate 全体を置き換えるのではなく、プロジェクトの Objective-C ブリッジング ヘッダーを通じて RCTPakta.h を公開します。

root に接続した後、Xcode で .xcworkspace を開き、署名とデバイスを選択し、リリース ビルドを確認します。登録用に同じアーカイブから IPA を保持します。

Swift および古い AppDelegate テンプレート

#import "RCTPakta.h" をアプリターゲットの Objective-C ブリッジング ヘッダーに追加します。必要に応じて、そのヘッダーを作成し、[ビルド設定] → [Objective-C ブリッジング ヘッダー] で相対パス (YourApp/YourApp-Bridging-Header.h など) を設定します。

既存の URL プロバイダーを変更します。新しいテンプレートでは、このメソッドが ReactNativeDelegate 内に配置される場合があります。

override func bundleURL() -> URL? {
#if DEBUG
  return RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
#else
  return RCTPakta.bundleURL()
#endif
}

sourceURLForBridge: のみを含む古い Objective-C テンプレートの場合は、その署名を保持し、非 DEBUG ブランチで [RCTPakta bundleURL] を返します。混合ネイティブ アプリは、固定バンドル パスを使用してルート ビューを作成するのではなく、ブリッジ デリゲートを通じて URL を取得する必要があります。

Expo: ネイティブモジュールを使ってビルドする

Expo Go には、rn-update のネイティブ モジュールが含まれていません。次の手順に従います。

1. npx expo install rn-update を使用して 依存関係をインストールします。カスタム チャネルの場合は、組み込みの構成プラグインを expo.plugins に追加します。

2. ルート レイアウトを接続: 既存の Stack / Slot を app/_layout.tsx で UpdateProvider でラップします。コンポーネントの外部にクライアントを作成します。

3. ネイティブ アプリを構築します: npx expo run:android --variant release、npx expo run:ios --configuration Release、または既存の EAS 運用プロファイルを実行します。

4. インストールして確認、Metro なしで起動します。その後、bundle --expo プラットフォーム android / ios を使用して OTA パッケージを作成します。

完全な手順については、Expo ガイド を参照してください。

HarmonyOS: RNOH を統合する

HarmonyOS には、npm インストール以外に、HAR、ArkTS、および C++ の統合が必要です。これらの場所を例と比較してください。

pakta bundle --platform harmony --output .pakta/output/harmony.ppk --no-interactive

DevEco Studio でネイティブ .app を同期、署名、ビルドします。生成された raw ファイルのパスがホストと一致することを確認し、インストールして確認し、uploadApp に登録します。

完全なプロジェクトは SDK サンプル : testHotUpdate、expoUsePakta、および harmony_use_pakta] にあります。リポジトリの相対パスを依存関係のパスに置き換えます。

HarmonyOS ファイルの変更

これらのパスは、harmony と node_modules がアプリ ルート内の兄弟であることを前提としています。エントリを既存の依存関係、プラグイン、パッケージ リストにマージします。既存の登録をすべて保持します。 HAR、Hvigor プラグイン、ArkTS、および C++ の登録を追加し、リリース バンドル プロバイダーを設定します。

"pakta": "file:../../node_modules/rn-update/harmony/pakta.har"

import { hapTasks } from '@ohos/hvigor-ohos-plugin';
import { reactNativeUpdatePlugin } from '../../node_modules/rn-update/harmony/hvigor-plugin';

export default {
  system: hapTasks,
  plugins: [reactNativeUpdatePlugin()],
};

import type { RNPackageContext, RNPackage } from '@rnoh/react-native-openharmony';
import PaktaPackage from 'pakta';

export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
  return [new PaktaPackage(ctx)];
}

set(PAKTA_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules/rn-update/harmony/pakta/src/main/cpp")
target_include_directories(rnoh_app PRIVATE "${PAKTA_CPP_DIR}")
target_sources(rnoh_app PRIVATE "${PAKTA_CPP_DIR}/PaktaTurboModule.cpp")

#include "RNOH/PackageProvider.h"
#include "PaktaPackage.h"
using namespace rnoh;

std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
  return {std::make_shared<PaktaPackage>(ctx)};
}

import { PaktaFileJSBundleProvider } from 'pakta';
import { AnyJSBundleProvider, ResourceJSBundleProvider } from '@rnoh/react-native-openharmony';

jsBundleProvider: new AnyJSBundleProvider([
  new PaktaFileJSBundleProvider(this.rnohCoreContext.uiAbilityContext),
  new ResourceJSBundleProvider(
    this.rnohCoreContext.uiAbilityContext.resourceManager,
    'bundle.harmony.js'
  ),
]),

他の RNAApp プロパティを保持し、rnohCoreContext が準備されていることを確認します。リリース ビルドでは、埋め込みリソースの前に Pakta ファイルを試行する必要があり、その前に Metro プロバイダーはありません。

ルート レイアウトとチャンネル プラグインについては、完全な Expo ガイド を参照してください。

セルフホスティング: SDK と CLI を個別に構成

ホスト型サービスのユーザーはこのセクションをスキップできます。 SDK はパブリック更新 API を使用します。 CLI は管理エンドポイントを使用します。

server: {
  main: ['https://YOUR_HOST/api'],
  queryUrls: ['https://YOUR_CDN/endpoints.json'],
},

ホストを展開アドレスに置き換えます。検出ファイルはデプロイメントに属している必要があります。サインインする前に CLI ホストを設定します。

$env:RNU_SERVICE_URL = 'https://YOUR_HOST'

export RNU_SERVICE_URL=https://YOUR_HOST

手動リンク: 自動リンクが利用できない場合のみ

React Native 0.60 以降は通常自動リンクします。 npx react-native config を実行して、rn-update の検出を確認し、iOS ポッドをインストールします。すでにリンクされている場合は、手動登録をスキップします。

古い Android プロジェクトには、Gradle 依存関係エントリと React パッケージ登録の両方が必要です。

include ':rn-update'
project(':rn-update').projectDir = new File(rootProject.projectDir, '../node_modules/rn-update/android')

implementation project(':rn-update')

MainApplication.java で、new UpdatePackage() を既存の getPackages() リストに追加してインポートします。

import cn.reactnative.modules.update.UpdatePackage;

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
    new MainReactPackage(),
    new UpdatePackage()
  );
}

既存のパッケージをすべて保持し、new UpdatePackage() のみを追加します。 2 番目の React Host を作成しないでください。リンク後も、「Android バンドルのロード ](#android)」の説明に従って UpdateContext.getBundleUrl(...) を設定します。

iOS の検出が失敗した場合は、Podfile のアプリ ターゲット内に pod 'rn-update', :path => '../node_modules/rn-update' を追加し、pod install を実行します。リンクだけでは、上記のバンドル読み込みエントリは構成されません。

Pakta には、古い Xcode プロジェクトに直接組み込むための単独の RCTPakta.xcodeproj はありません。CocoaPods を使わない RN <0.60 の場合は、CocoaPods を導入するか、先に React Native をアップグレードしてください。手動で統合する場合は、アプリのターゲットに ios/RCTPakta、共有 C++ コア、SSZipArchive 依存関係、pakta_build_time.txt を含めます。その後、リリース版アプリの起動とネイティブパッケージの登録を確認してください。

React-native-screens を使用した Android アクティビティの復元

React-native-screens を使用するアプリの場合は、MainActivity 復元構成を確認してください。以下には、RNScreensFragmentFactory を提供するバージョンが必要です。オーバーライドを MainActivityDelegate ではなく MainActivity に直接配置します。

import android.os.Bundle
import com.swmansion.rnscreens.fragment.restoration.RNScreensFragmentFactory

override fun onCreate(savedInstanceState: Bundle?) {
  supportFragmentManager.fragmentFactory = RNScreensFragmentFactory()
  super.onCreate(savedInstanceState)
}

複製を追加するのではなく、既存の onCreate にマージします。このクラスのない古いリリースには、独自の 画面のインストール手順 。

オプション: ディープリンクからテスト更新を開く

既存のスキャナー関数はparseTestQrCodeです。ブラウザーやカメラからアプリを開けるようにするには、paktademo などの独自のスキームを設定してください。

既存の Android MainActivity アクティビティ内に別のフィルターを追加し、そのランチャー フィルターを保持し、 android:launchMode="singleTask" を使用します。

<intent-filter>
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data android:scheme="paktademo" />
</intent-filter>

iOS の場合、アプリ ターゲットの [情報] → [URL タイプ] に paktademo を追加し、AppDelegate でアプリの React Native Linking 転送を保持します。 Expo は expo.scheme を使用します。ネイティブ インストーラーを再構築します。

テスト更新をアップロードした後、その完全なハッシュをコピーして、paktademo://update?type=__rnPaktaVersionHash&data=ACTUAL_HASH を開きます。プロバイダーはそれをチェックし、アプリのダウンロード/アクティベーションのフローに従います。 testChannel:false はテスト ペイロードを拒否します。

Android AAB インストーラー

実際に Google Play に送信された AAB を保持します。 pakta parseAab PATHで検査し、pakta uploadAab PATHで登録します。別のビルドの APK を置き換えないでください。

統合するためだけに、すべての言語、密度、ABI 分割を無効にしないでください。 Pakta CLI はデフォルトで base モジュールを抽出します。分散ビルドが追加の分割に依存する場合は、それらを明示的に選択します。

pakta uploadAab ./android/app/build/outputs/bundle/release/app-release.aab --splits config.xxhdpi,config.arm64_v8a

--includeAllSplits を使用して、すべてのスプリットを含む登録 APK を作成することもできます。分散ビルドを使用してリソースと更新を確認します。スプリットにアセットがない場合は、リソースのパッケージ化とネイティブ バージョンを調査します。

次のステップ

依存関係がインストールされ、CLI が正しいプラットフォーム アプリケーションを選択し、ネイティブ ローディングが構成されます。 app を接続し、バージョン パネルを追加して、ネイティブ パッケージをビルドします。

Local Expo のビルド フラグは、公式 Expo CLI リファレンス に従います。