ReactNative与原生之间的接口交互

React与Native交互官网

https://facebook.github.io/react-native/docs/native-modules-android.html

一、实现ReactContextBaseJavaModule接口

比如要做一个统计功能的Api，需要调用Java代码进行数据统计上报.

先新建一个Java类Statics.java

public class Statics extends ReactContextBaseJavaModule {

    public Statics(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    //这里要返回一个名称,在JS文件里导出成模块需要根据该名称查找当前接口;
    @Override
    public String getName() {
        return "Statics"; 
    }

    //这是开放给JS的API，需要用  @ReactMethod 进行标注;
    @ReactMethod
    public void onEvent(String clickName,String clickContent){
               Toast.makeText(getCurrentActivity(),
               clickName+","+clickContent,Toast.LENGTH_SHORT).show();
    }
}

第二步、实现ReactPackage接口

在实现的接口中需要添加Module模块

public class XNReactPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new Statics(reactContext));//添加实现的Statics接口实例;
        return modules;
    }

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

第三步、JS导出Java实现的Module接口

在工程目录下新建Statics.js文件内容如下

'use strict';
import { NativeModules } from 'react-native';
//export default NativeModules.Statics; 等同于下面代码
module.exports = NativeModules.Statics;

第四步、使用自定义的Module接口

比如在Welcome.js中引用Statics.js

import Statics from '../modlue/Statics';
    ... ...
    onButtonClicked() {
        Statics.onEvent("button","返回");
    }

image.png