React Native 桥接原生 iOS 以及 Android 获取 APP 版本号

栏目: 服务器 · 发布时间: 6年前

内容简介:在使用React Native进行跨平台开发过程中,或多或少需要涉及到原生开发,这里主要说一下如何桥接原生 iOS 以及 Android,在此以获取 APP 版本号为例。iOS 桥接比较简单,只需要创建一个 Module 类,实现 RCTBridgeModule 协议就好。 首先我们需要创建一个 RNBridgeManager 类然后在 RNBridgeManager.m 中实现相应方法

在使用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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

与机器赛跑

与机器赛跑

[美]埃里克·布林约尔松(Erik Brynjolfsson)、[美]安德鲁·麦卡菲(Andrew McAfee) / 闾佳 / 2013-1-20 / 6.00

一场数字革命正在加速进行。 一些科幻小说里的场景已经在现实中发生:无人驾驶汽车开上了公路;智能设备能高效地翻译人类语言;人工智能系统在智力竞赛里击败了所有人类选手;工厂雇主开始购买更多的新机器,却不招新工人…… 这些例子都证明,数字技术正在快速地掌握原本只属于人类的技能,并深刻地影响了经济。虽然大多数影响是积极的:数字革新将提高效率、降低商品价格(甚至到免费),以及增加经济总量。 ......一起来看看 《与机器赛跑》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具