专栏首页向治洪ReactNative调用Android原生模块

ReactNative调用Android原生模块

有时候App需要访问平台API,但React Native可能还没有相应的模块包装;或者你需要复用一些Java代码,而不是用Javascript重新实现一遍;又或者你需要实现某些高性能的、多线程的代码,譬如图片处理、数据库、或者各种高级扩展等等。 我们把React Native设计为可以在其基础上编写真正的原生代码,并且可以访问平台所有的能力。要想实现访问Android原生API,总结一下,主要有以下几个步骤:

1. 创建一个原生模块

这个原生模块是一个继承ReactContextBaseJavaModule的Java类,它可以实现一些JavaScript所调用的原生功能。我们的目标是可以在JavaScript里写ToastAndroid.show(‘Awesome’, ToastAndroid.SHORT);,来调起一个Toast通知。例如:

public class RnTest extends ReactContextBaseJavaModule {
  public RnTest(ReactApplicationContext reactContext) {
    super(reactContext);
  }
  // ReactContextBaseJavaModule要求派生类实现getName方法。这个函数用于返回一个字符串
  // 这个字符串用于在JavaScript端标记这个原生模块
  @Override
  public String getName() {
    return "ToastByAndroid";
  }
  // 获取应用包名
  // 要导出一个方法给JavaScript使用,Java方法需要使用注解@ReactMethod
   @ReactMethod
   public void getPackageName() {
     String name = getReactApplicationContext().getPackageName();
     Toast.makeText(getReactApplicationContext(),name,Toast.LENGTH_LONG).show();
    }
}

ReactContextBaseJavaModule要求派生类实现getName方法。这个函数用于返回一个字符串名字,这个名字在JavaScript端标记这个模块。这里我们把这个模块叫做ToastByAndroid,这样就可以在JavaScript中通过React.NativeModules.ToastByAndroid访问到这个模块。 注意:模块名前的RCT前缀会被自动移除。所以如果返回的字符串为”RCTToastAndroid”,在JavaScript端依然通过React.NativeModules.ToastByAndroid访问到这个模块。

2. 注册模块

要使JavaScript端调用到原生模块还需注册这个原生模块,需要实现一个类实现ReactPackage接口,并实现其中的抽象方法。例如:

public class ExampleReactPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
      List<NativeModule> modules = new ArrayList<>();
      modules.add(new RnTest(reactContext));
      return modules;
    }

    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
      return Collections.emptyList();
    }

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

MainApplication声明

除了上面的步骤外,还需在MainApplication.java文件中的getPackages方法中,实例化上面的注册类。例如:

 @Override
  protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
      new MainReactPackage(),
      // 实例化注册类
      new ExampleReactPackage());
    }
  };

3. JS调用android原生方法

3.1 引入NativeModules模块

import { NativeModules } from 'react-native';

3.2 调用Android原生方法

var rnToastAndroid = NativeModules.ToastByAndroid;
rnToastAndroid.getPackageName();

4. 获取android返回值

提供给js调用的原生android方法的返回类型必须是void,React Native的跨语言访问是异步进行的,所以想要给JavaScript返回一个值的唯一办法是使用回调函数或者发送事件。

4.1 回调函数

Callback是React.bridge中的一个接口,它作为ReactMethod的一个传参,用来映射JavaScript的回调函数(function)。Callback接口只定义了一个方法invoke,invoke接受多个参数,这个参数必须是react.bridge中支持的参数。 Android端代码:

 @ReactMethod
  public void tryCallBack(String name,String psw,Callback errorCallback,Callback successCallback){
    try{
      if(TextUtils.isEmpty(name)&&TextUtils.isEmpty(psw)){
        // 失败时回调
        errorCallback.invoke("user or psw  is empty");
      }
      // 成功时回调
      successCallback.invoke("add user success");
     }catch(IllegalViewOperationException e){
        // 失败时回调
        errorCallback.invoke(e.getMessage());
      }
    }

rn端代码:

var rnToastAndroid = NativeModules.ToastByAndroid;
rnToastAndroid.tryCallBack("luo","131",(errorCallback)=>{alert(errorCallback)},(successCallback)=>{alert(successCallback);});

5.调用测试

android主动向rn发送消息。

5.1 android端代码

public  static void sendEvent(ReactContext reactContext, String eventName, int status)
    {
        System.out.println("reactContext="+reactContext);

        reactContext
                .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                .emit(eventName,status);
    }

5.2 RN端代码

// eventName为5.1中的eventName,reminder为5.1中的status
DeviceEventEmitter.addListener(eventName, (reminder) => {
      console.log(reminder):
    });

RN调用Android原生模块的代码如下:

const RNBridgeModule = NativeModules.RNBridgeModule;
nativeLanuchApp(message) {
    RNBridgeModule.nativePlayVideo(message);
  }

  <TouchableOpacity onPress={() => {
                            this.nativeLanuchApp("111");
                        }} >
      <Text >
        try
      </Text>
    </TouchableOpacity>   

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • android scrollview嵌套listview计算高度的问题

     ScrollView中只能放一个控件,一般都放LinearLayout,orientation属性值为vertical。在LinearLayout中放需要呈...

    xiangzhihong
  • Flutter环境搭建

    这几年,移动跨平台的趋势可以说是越来越明显,技术实现上也是百花争艳,不过究其实现,无外乎有那么几种。 Web 流:也被称为 Hybrid 技术,它基于 Web ...

    xiangzhihong
  • 史上最全webview详解

    WebView在现在的项目中使用的频率应该还是非常高的。 我个人总觉得HTML5是一种趋势。找了一些东西,在此总结。 本篇最后有一个非常不错 的 Html5...

    xiangzhihong
  • Android-实用的MVP

    code_horse
  • C++项目中采用CLR的方式调用C#编写的dll

    1、注意事项:在编写C#DLL类库时,最好不要出现相同的命名空间,否则在C++中调用可能会出现编译错误。 2、将C#的源码生成的“dll”文件复制到C++项目中...

    指尖改变世界
  • POJ 刷题系列:3080. Blue Jeans

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/...

    用户1147447
  • POJ 刷题系列:2255. Tree Recovery

    POJ 刷题系列:2255. Tree Recovery 传送门:POJ 2255. Tree Recovery 题意: 给出先序和中序,求后序。 思路: ...

    用户1147447
  • 快速排序原理JAVA和Scala实现-函数式编程的简洁演示

    高快省的排序算法 有没有既不浪费空间又可以快一点的排序算法呢?那就是“快速排序”啦!光听这个名字是不是就觉得很高端呢。 假设我们现在对“6 1 2 7 ...

    Albert陈凯
  • 理解 Python 中的 for 循环

    我们将通过一些「gotchas」(陷阱)来开始今天的旅程。等我们知道 Python 中的 for 循环的原理时,我们再回过头来看这些 gotchas,并解释原因...

    Alan Lee
  • golang-101-hacks(13)——Array

    注:本文是对golang-101-hacks中文翻译。 在Go语言中,长度值是数组类型的一部分。下面的代码声明了一个数组:

    羊羽shine

扫码关注云+社区

领取腾讯云代金券