ReactNative アプリへの WindVane ミニアプリコンテナの統合 - SuperApp

WindVane ミニアプリコンテナを ReactNative アプリに統合すると、ReactNative アプリで WindVane を使用してミニアプリを読み込むことができます。

手順

WindVane ミニアプリコンテナを ReactNative アプリに統合するには、WindVane SDK をネイティブアプリに統合し、ReactNative のネイティブモジュール機能を使用して、ネイティブアプリで WindVane SDK によって提供されるメソッドを呼び出して、ミニアプリをクエリおよび開く必要があります。次の操作を実行します。

WindVane SDK をネイティブ Android または iOS アプリに統合します。
Android または iOS アプリでネイティブモジュールを定義し、対応するメソッドを定義および実装します。
定義されたネイティブモジュールを JavaScript 環境にインポートし、ネイティブモジュールで対応するメソッドを呼び出します。

ステップ 1：ネイティブアプリへの WindVane ミニアプリコンテナの統合

WindVane をネイティブアプリに統合する方法の詳細については、次のトピックを参照してください。

ステップ 2：ネイティブアプリでのネイティブモジュールの定義と実装

Android

ReactContextBaseJavaModule を継承する Java クラスを作成し、ネイティブモジュールが定義されている getName() メソッドを実装します。
サンプルコード：
```
public class EMASMiniAppModule extends ReactContextBaseJavaModule {
  @NonNull
  @Override
  public String getName() {
    return "EMASMiniAppModule";
  }
}
```

@ReactMethod アノテーションを使用して、JavaScript で呼び出すことができるメソッドを定義します。

サンプルコード：

@ReactMethod
public void openMiniApp(String appId, Promise promise) {
  IMiniAppService miniAppService = ServiceManager.getInstance().getService(
			IMiniAppService.class.getName());
  if (miniAppService != null) {
    miniAppService.openMiniApp(this, appId, null, new OnOpenMiniAppListener() {
      @Override
      public void onOpenMiniApp() {
        //start open
      }
      
      @Override
      public void onOpenSuccess(String appId) {
        WritableMap result = new WritableNativeMap();
        result.putString("success", "true");
        promise.resolve(result);
      }
      
      @Override
      public void onOpenFailed(String appId, int errorCode) {
        WritableMap result = new WritableNativeMap();
        result.putString("success", "false");
        result.putString("errorCode", errorCode + "");
        promise.resolve(result);
      }
    });
  }
}

ReactPackage を継承する Java クラスを作成し、ネイティブモジュールクラスが登録されている createNativeModules メソッドを実装します。

サンプルコード：

public class EMASMiniAppPackage implements ReactPackage {
  @NonNull
  @Override
  public List<NativeModule> createNativeModules(
    	@NonNull ReactApplicationContext reactApplicationContext) {
    List<NativeModule> modules = new ArrayList<>();
    modules.add(new EMASMiniAppModule());
    return modules;
  }
  
  @NonNull
  @Override
  public List<ViewManager> createViewManagers(
    	@NonNull ReactApplicationContext reactApplicationContext) {
    return Collections.emptyList();
  }
}

作成した ReactPackage クラスを、Application クラスの getPackages() メソッドに登録します。

サンプルコード：

@Override
protected List<ReactPackage> getPackages() {
  @SuppressWarnings("UnnecessaryLocalVariable")
  List<ReactPackage> packages = new PackageList(this).getPackages();
  // 自動リンクできないパッケージは、ここに手動で追加できます。例：
  packages.add(new EMASMiniAppPackage());
  return packages;
}

iOS

RCTBridgeModule プロトコルを実装するクラスを作成します。
サンプルコード：
```
#import <React/RCTBridgeModule.h>

@interface EMASMiniAppModule : NSObject <RCTBridgeModule>
@end
```
RCT_EXPORT_MODULE マクロを使用して、JavaScript で呼び出すことができるネイティブモジュールをエクスポートします。
サンプルコード：
```
#import "EMASMiniAppModule.h"

@implementation EMASMiniAppModule

RCT_EXPORT_MODULE();

@end
```

RCT_EXPORT_METHOD マクロを使用して、JavaScript で呼び出すことができるメソッドを定義およびエクスポートします。

サンプルコード：

#import "EMASMiniAppModule.h"

@implementation EMASMiniAppModule

RCT_EXPORT_MODULE();

RCT_REMAP_METHOD(openMiniApp, 
                 openMiniAppWithAppId:(NSString *)appId
                 openMiniAppWithResolver:(RCTPromiseResolveBlock)resolve
                 openMiniAppWithRejecter:(RCTPromiseRejectBlock)reject)
{
  id<EMASMiniAppService> miniAppService = [[EMASServiceManager sharedInstance] serviceForProtocol:@"EMASMiniAppService"];
  if (miniAppService) {
    [miniAppService openMiniApp:appId openConfiguration:nil completionBlock:^(int resultCode, NSDictionary * _Nonnull resultDict) {
      resolve(nil);
    }];
  }
}

@end

ステップ 3：JavaScript でネイティブモジュールを呼び出す

NativeModules インターフェイスを JavaScript ファイルにインポートします。
サンプルコード：
```
import { NativeModules } from 'react-native';
```

NativeModules インターフェイスを使用して、ネイティブアプリで定義されているネイティブモジュールを取得します。

サンプルコード：

const EMASMiniAppModule = NativeModules.EMASMiniAppModule
  ? NativeModules.EMASMiniAppModule
  : new Proxy(
    {},
    {
      get() {
        throw new Error(LINKING_ERROR);
      },
    }
  );

ネイティブモジュールで定義されているメソッドを呼び出します。
サンプルコード：
```
EMASMiniAppModule.openMiniApp(`${appId}`).then((value) => {});
```