React NativeブリッジオリジナルiOSおよびAndroidアプリバージョン番号

React Nativeを使用してプラットフォーム間開発を行う過程で、多かれ少なかれオリジナル開発に関わる必要があります.ここでは、オリジナルiOSとAndroidをどのようにブリッジするかを主に説明し、ここではアプリのバージョン番号を取得することを例に挙げます.
iOSブリッジ
iOSブリッジは比較的簡単で、Moduleクラスを作成し、RCTbridgeModuleプロトコルを実装すればよい.まずRNBridgeManagerクラスを作成する必要があります
RNBridgeManager.hのコード:

#import 
#import 

@interface RNBridgeManager : NSObject 

@end

RNBridgeManagerでmにおける対応する方法の実現
RCTbridgeModuleプロトコルを実装するには、クラスにRCTを含める必要があります.EXPORT_MODULE()マクロ.このマクロは、Javascriptを使用してこのモジュールにアクセスする名前を指定するための指定パラメータを追加することもできます.
RNBridgeManager.mのコード

#import "RNBridgeManager.h"
@implementation RNBridgeManager

@synthesize bridge = _bridge;

RCT_EXPORT_MODULE(ToolModule);
//          ,Callback
RCT_EXPORT_METHOD(getAppVersion:(RCTResponseSenderBlock)callback)
{
  NSString *version = [[[NSBundle mainBundle] infoDictionary] objectForKey:@"CFBundleShortVersionString"];//       
  callback(@[[NSNull null],version]);
}

@end

最後にRNで呼び出す

import React, { Component } from 'react';
import { NativeModules } from 'react-native';

var iOSToolModule = NativeModules.ToolModule;

export default class Me extends Component {
    constructor(props) {
        super(props);
        this.state = {
            version: '', 
        }

        this.getVerSion();
    }

    //      
    getVerSion() {
    iOSToolModule.getAppVersion((error,event)=>{
                if(error){
                    console.log(error)
                }else{
                    this.setState({
                        version:event
                    })
                }
            }) 
    }
 }  

これでiOS部分のブリッジ作業はすべて完了しました.
Android
AndroidはiOSに比べて複雑ですが、まずAndroid/app/src/main/java/comフォルダの下にreactnativeフォルダを作成し、そのフォルダの下にRNBridgeManagerを作成する必要があります.JAvaファイルおよびRNReactPackage.JAvaファイル、具体的なコードは以下の通りです.
RNBridgeManager.JAvaのコード

package com.reactnative;

import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.uimanager.IllegalViewOperationException;
import android.content.pm.PackageInfo;
import android.content.pm.PackageManager;

public class RNBridgeManager extends ReactContextBaseJavaModule {

    public RNBridgeManager(ReactApplicationContext reactContext) {

        super(reactContext);

    }

//      getName    Module   , RN     
    @Override
    public String getName() {
        return "BridgeManager";
    }

//         ，    
    @ReactMethod
    public void getAppVersion(Callback successCallback) {
        try {
            PackageInfo info = getPackageInfo();
            if(info != null){
                successCallback.invoke(info.versionName);
            }else {
                successCallback.invoke("");
            }
        } catch (IllegalViewOperationException e){

        }
    }

//       APP   
    private PackageInfo getPackageInfo(){
        PackageManager manager = getReactApplicationContext().getPackageManager();
        PackageInfo info = null;
        try{
            info = manager.getPackageInfo(getReactApplicationContext().getPackageName(),0);
            return info;
        }catch (Exception e){
            e.printStackTrace();
        }finally {

            return info;
        }
    }
}

RNReactPackage.JAvaのコード

package com.reactnative;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
public class RNReactPackage implements ReactPackage {


    @Override
    public List createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    @Override
    public List createNativeModules(
            ReactApplicationContext reactContext) {
        List modules = new ArrayList<>();

//                 activity  
        modules.add(new RNBridgeManager(reactContext));

        return modules;
    }

}

そしてMainApplication.JAvaに登録したばかりのパッケージ名を追加

@Override
    protected List getPackages() {
      return Arrays.asList(
          new MainReactPackage(),
          new RNReactPackage()
      );
    }
    

最後に、RNで呼び出す

import React, { Component } from 'react';
import { NativeModules } from 'react-native';

export default class Me extends Component {
    constructor(props) {
        super(props);

        this.state = {
            version: '',
        }
        this.getVerSion();
    }
//      
    getVerSion() {
    NativeModules.BridgeManager.getAppVersion((event) =>{
                this.setState({
                    version:event
                })
            });
          }
             

注意事項

iOSブリッジの場合、漏れないように@synthesize bridge=bridge;

Androidブリッジの場合、露出の仕方は前に@ReactMethod

を付ける必要があります.

関連の機能方法を実現する時、できるだけCallbackの形式を使って、ネット上の多くの文章はreturnの形式を使って、開発の時参考にしたことがあって、しかし

に成功していません

iOSのRCT_EXPORT_MODULE(ToolModule)およびAndroidでgetNameバインドされた名前、すなわちRN呼び出しのクラス名

AndroidブリッジMainApplicationで対応するPackage

をバインドすることを覚えています.