java rct 交互 linux,ReactNative与java交互

在ReactNative中与Android进行交互

第一实现ReactContextBaseJavaModule接口，

在ReactContextBaseJavaModule中与React交互的方法需要@ReactMethod注解：如下

public class ToastExampleMoudle extends ReactContextBaseJavaModule {

private static final String MESSAGE = "MESSAGE";

public ToastExampleMoudle(ReactApplicationContext reactContext) {

super(reactContext);

}

@Nullable

@Override

public Map getConstants() {

//让js那边能够使用这些常量

Map constants = new HashMap<>();

return constants;

}

@ReactMethod

public void show(int duration){

Toast.makeText(getReactApplicationContext(), "dongnao:" + duration, Toast.LENGTH_SHORT).show();

}

@ReactMethod

public void testAndroidCallBack(String msg, Callback callback) {

Toast.makeText(getReactApplicationContext(),msg,Toast.LENGTH_LONG).show();

callback.invoke("david");

}

@ReactMethod

public void textAndroidPromiseMethod(String msg, Promise promise){

Toast.makeText(getReactApplicationContext(),msg,Toast.LENGTH_SHORT).show();

String result = "david";

promise.resolve(result);

}

@ReactMethod

public void onScaning() {

WritableMap params = Arguments.createMap();

params.putString("key","mydata");

getReactApplicationContext().getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)

.emit("EventName", params);

}

@Override

public String getName() {

return "ToastForAndroid";//名称

}

@Override

public boolean canOverrideExistingModule() {

return true;

}

}

上面代码中我使用四种方式与react交互

1、show方法直接获得react数据

2、testAndroidCallBack方法获得react数据之后需要放回数据给react这里采用Callback接口回调

3、textAndroidPromiseMethod方法是Promise返回给react数据

4、onScaning方法是react调用Java

第二步、实现ReactPackage接口

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

如下：

/注册模块

public class ExampleReactNativePackage implements ReactPackage {

//完成注入需要被js调用java方法

@Override

public List createNativeModules(ReactApplicationContext reactContext) {

List modules = new ArrayList<>();

modules.add(new ToastExampleMoudle(reactContext));

return modules;

}

@Override

public List createViewManagers(ReactApplicationContext reactContext) {

return Collections.emptyList();

}

}

第三步 需要在MainApplication中重写getPackage方法将注册ExampleReactNativePackage添加进去

如下

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

@Override

public boolean getUseDeveloperSupport() {

return BuildConfig.DEBUG;

}

@Override

protected List getPackages() {

return Arrays.asList(

new MainReactPackage(),

new ExampleReactNativePackage()//添加进去

);

}

@Override

protected String getJSMainModuleName() {

return "index";

}

};

第四、js调用原生的

需要导入import {NativeModules} from 'react-native';

如下

import React, {Component} from 'react';

import {Platform, StyleSheet,ToastAndroid, DeviceEventEmitter,Text, TouchableOpacity,View,NativeModules} from 'react-native';

export default class App extends Component {

constructor(props){

super(props);

this.state= {

text:"river",

text2: "默认",

}

}

componentDidMount(): void {

//观察者对象 监听java 调用js

DeviceEventEmitter.addListener("EventName",function (msg) {

let rest = NativeModules.ToastForAndroid.MESSAGE;

ToastAndroid.show("DeviceEventEmitter收到消息:" + "\n" + rest, ToastAndroid.SHORT)

})

}

_onPressButton(){

NativeModules.ToastForAndroid.show(1000);//表示传递数据给java

}

_onPressButton2(){

//表示表示传递数据给java之后， Java返回数据给js

NativeModules.ToastForAndroid.testAndroidCallBack("hello David",(result)=>{

this.setState({

text: result

})

});

}

_onPressButton3(){

//表示表示传递数据给java之后， Java通过Promise返回数据给js

NativeModules.ToastForAndroid.textAndroidPromiseMethod("hello David").then((result)=>{

this.setState({

text2: result

})

})

}

_onPressButton4(){

//java传递传递数据给js

NativeModules.ToastForAndroid.onScaning();

}