React Native 橋接原生 iOS 以及 Android 獲取 APP 版本號

在使用React Native進行跨平臺開發過程當中，或多或少須要涉及到原生開發，這裏主要說一下如何橋接原生 iOS 以及 Android，在此以獲取 APP 版本號爲例。

iOS 橋接

iOS 橋接比較簡單，只須要建立一個 Module 類，實現 RCTBridgeModule 協議就好。 首先咱們須要建立一個 RNBridgeManager 類

RNBridgeManager.h 中的代碼：

#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>

@interface RNBridgeManager : NSObject <RCTBridgeModule>

@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<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

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

//        添加一個安卓原生的activity模塊
        modules.add(new RNBridgeManager(reactContext));

        return modules;
    }

}
複製代碼

而後在 MainApplication.java 中添加剛剛註冊過的包名

@Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>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