第七章、 ReactNative與原生之間的接口交互

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();
    }

    //當然你也可以通過這種方式和原生的Activity進行切換
}

第二步、實現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","返回");
    }