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

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

内容简介:在使用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

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

查看所有标签

猜你喜欢:

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

全景探秘游戏设计艺术

全景探秘游戏设计艺术

Jesse Schell / 吕阳、蒋韬、唐文 / 电子工业出版社 / 2010-6 / 69.00元

撬开你脑子里的那些困惑,让你重新认识游戏设计的真谛,人人都可以成为成功的游戏设计者!从更多的角度去审视你的游戏,从不完美的想法中跳脱出来,从枯燥的游戏设计理论中发现理论也可以这样好玩。本书主要内容包括:游戏的体验、构成游戏的元素、元素支撑的主题、游戏的改进、游戏机制、游戏中的角色、游戏设计团队、如何开发好的游戏、如何推销游戏、设计者的责任等。 本书适合任何游戏设计平台的游戏设计从业人员或即将......一起来看看 《全景探秘游戏设计艺术》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

html转js在线工具
html转js在线工具

html转js在线工具