android 调用rn方法,React Native与Android 原生通信的方法

最新推荐文章于 2024-05-07 18:21:59 发布

SSA丝社APP

最新推荐文章于 2024-05-07 18:21:59 发布

阅读量539

点赞数

文章标签： android 调用rn方法

我们用React Native 做混合开发的时候免不了要原生和React Native 进行通信交互，这篇文章就是分享原生模块与JS传递数据的几种方式。

总的步骤可以分为如下几点：

在原生端定义Module类,继承ReactContextBaseJavaModule,在Module类里,定义交互的方法.

定义Package类，继承ReactPackage,将Module实例添加到集合.

在android继承的ReactApplication,回调实现getPackages方法，将Package实例添加到getPackages下的集合。

如下是Mudule类的实例代码，为了方便大家理解，我把代码全部贴出来，在一一讲解。

import android.support.annotation.Nullable;

import android.widget.Toast;

import com.facebook.react.bridge.Arguments;

import com.facebook.react.bridge.Callback;

import com.facebook.react.bridge.Promise;

import com.facebook.react.bridge.ReactApplicationContext;

import com.facebook.react.bridge.ReactContext;

import com.facebook.react.bridge.ReactContextBaseJavaModule;

import com.facebook.react.bridge.ReactMethod;

import com.facebook.react.bridge.WritableMap;

import com.facebook.react.modules.core.DeviceEventManagerModule;

import java.util.HashMap;

import java.util.Map;

public class ToastExample extends ReactContextBaseJavaModule{

private static final String LONG_TIME = "LONG";

private static final String SHORT_TIME = "SHORT";

private static final String MESSAGE = "MESSAGE";

public ToastExample(ReactApplicationContext reactContext) {

super(reactContext);

}

@Override

public String getName() {

return "ToastForAndroid";

}

@ReactMethod

public void getDataFromIntent(Callback callback){

try{

Activity currentActivity=getCurrentActivity();

String result =currentActivity.getIntent().getStringExtra("data");

if(TextUtils.isEmpty(result)){

callback.invoke("no_data");

}else{

callback.invoke(result);

}

}catch (Exception e){

callback.invoke("error");

}

@Override

public Map getConstants() {

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

Map constants = new HashMap<>();

constants.put(LONG_TIME, Toast.LENGTH_LONG);

constants.put(SHORT_TIME,Toast.LENGTH_SHORT);

constants.put(MESSAGE,"getConstants");

return constants;

}

@ReactMethod

public void show(int duration){

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

}

@ReactMethod

public void sendEvent(){

onScanningResult();

}

@ReactMethod

public void testAndroidCallbackMethod(String msg, Callback callback){

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

callback.invoke("abc");

}

@ReactMethod

public void textAndroidPromiseMethod(String msg, Promise promise){

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

String result="谢汉杰";

promise.resolve(result);

}

public void onScanningResult(){

WritableMap params = Arguments.createMap();

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

sendEvent(getReactApplicationContext(),"EventName",params);

}

public static void sendEvent(ReactContext reactContext, String eventName, @Nullable WritableMap params) {

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

}

public void nativeCallRn(){

onScanningResult();

}

@Override

public boolean canOverrideExistingModule() {

return true;

}

在上面的Module代码中,getName()方法返回的名字是是在RN代码里面是需要这个名字来调用该类的方法,而@ReactMethod注解下的方法是我们自定义方法,表明这个方法可以被rn调用.至于上面四种形式的方法等步骤走完详解。

自定义ReactPackage 代码如下：

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 ExampleReactNativePackage implements ReactPackage{

public ToastExample toastExample;

@Override

public List createNativeModules(ReactApplicationContext reactContext) {

List modules = new ArrayList<>();

toastExample=new ToastExample(reactContext);

modules.add(toastExample);

return modules;

}

@Override

public List createViewManagers(ReactApplicationContext reactContext) {

return Collections.emptyList();

}

这一步很简单，就是把上面的ToastExample类加入NativeModule而已

接着第三步也很简单，代码如下

import android.app.Application;

import com.facebook.react.ReactApplication;

import com.facebook.react.ReactNativeHost;

import com.facebook.react.ReactPackage;

import com.facebook.react.shell.MainReactPackage;

import java.util.Arrays;

import java.util.List;

public class MyApplication extends Application implements ReactApplication{

public static final ExampleReactNativePackage exampleReactNativePackage=new ExampleReactNativePackage();

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

@Override

public boolean getUseDeveloperSupport() {

return BuildConfig.DEBUG;

}

@Override

protected List getPackages() {

return Arrays.asList(

new MainReactPackage(),

exampleReactNativePackage

);

}

};

@Override

public ReactNativeHost getReactNativeHost() {

return mReactNativeHost;

}

这也不也只是把ExampleReactNativePackage添加进ReactPackage而已，也很简单。

为此整个Android原生端已经完成编写。接着就是编写js端，下面也是js端的实例:(说句废话，我一般喜欢贴全部代码在一一讲解,这样比较连贯)

import React from 'react';

import {

AppRegistry,

StyleSheet,

Text,

View,

TouchableOpacity,

ToastAndroid,

NativeModules,

DeviceEventEmitter

} from 'react-native';

export default class HelloWorld extends React.Component {

constructor(props){

super(props);

this.state={

text1:'ToastForAndroid',

text2:'testAndroidCallbackMethod',

text3:'textAndroidPromiseMethod',

text4:'DeviceEventEmitter',

text5:'getValue',

data:'no_data',

}

componentWillMount() {

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

console.log(msg);

let rest=NativeModules.ToastForAndroid.MESSAGE;

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

});

NativeModules.ToastForAndroid.getDataFromIntent((result)=>{

this.setState({data:result});

});

}

render() {

return (

{this.state.data}

{this.state.text1}

{this.state.text2}

{this.state.text3}

{this.state.text4}

{this.state.text5}

)

}

_onPressButton(){

NativeModules.ToastForAndroid.show(1000);

}

_onPressButton2(){ NativeModules.ToastForAndroid.testAndroidCallbackMethod("HelloJack",(result)=>{

this.setState({text:result});

});

}

_onPressButton3(){ NativeModules.ToastForAndroid.textAndroidPromiseMethod("abcx").then((result)=>{

this.setState({text3:result});

}).catch((error)=>{

this.setState({text:'error'});

})

}

_onPressButton4(){

NativeModules.ToastForAndroid.sendEvent();

}

_onPressButton5(){

ToastAndroid.show(NativeModules.ToastForAndroid.MESSAGE, ToastAndroid.SHORT)

}

var styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

flexDirection: 'column',

hello: {

fontSize: 20,

textAlign: 'center',

margin: 10,

});

AppRegistry.registerComponent('HelloWorlds', () => HelloWorld);

这就是整个js端的调用实例。在React Naitve层，RN端可通过 NativeModules.[module名].[方法名]来调起原生的方法，同时也可以通过RN端可通过 NativeModules.[module名].[参数名]的方式来获取传递的参数，具体用法如上代码。

而对于原生调用调用React Native里面的方法，我们可以用RCTDeviceEventEmitter的方式，这种方式就相当于我们Android中的广播，具体对应的原生代码如下：

MyApplication.exampleReactNativePackage.toastExample.nativeCallRn();

和上面的代码也是连贯一起的。

最后总结交互的四种方式

第一种最简单，如上面代码的

@ReactMethod

public void show(int duration){

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

}

即用ReactMethod注解方法就可以调用原生了

Callback 回调方式，如上面代码的

@ReactMethod

public void testAndroidCallbackMethod(String msg, Callback callback){

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

callback.invoke("abc");

}

对应的js代码就是

_onPressButton2(){

NativeModules.ToastForAndroid.testAndroidCallbackMethod("HelloJack",(result)=>{

this.setState({text:result});

});

}

即你传入参数进行操作然后给你回调结果

3.Promise 回调方式类似的就是RxJava.可以通过链式将复杂代码结构转换为简短易读的代码.，如上面代码的

@ReactMethod

public void textAndroidPromiseMethod(String msg, Promise promise){

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

String result="谢汉杰";

promise.resolve(result);

}

对应的js代码就是

_onPressButton3(){

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

this.setState({text3:result});

}).catch((error)=>{

this.setState({text:'error'});

})

}

JS端通过then接口来获取Promise的数据,执行错误就返回error信息

通过事件方式：RCTDeviceEventEmitter，一般是native原生调用React Native 相当于广播。对应上面代码如下：

public static void sendEvent(ReactContext reactContext, String eventName, @Nullable WritableMap params) {

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

}

对应的js代码就是

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

console.log(msg);

let rest=NativeModules.ToastForAndroid.MESSAGE;

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

});

Native发送原生事件然后React Native 注册监听获取信息。

在这里举一个我们实战的一个例子，就是启动RN界面并且传递数据。怎么做呢，刚开始的初学者还是一下子反应不过来，起始也很简单，充分运用我们上面的例子就行了，

首先原生启动代码

Intent intent=new Intent(MainActivity.this,HelloReactActivity.class);

intent.putExtra("data","HelloJack");

startActivity(intent);

最终要的是是在上面的ToastExample类里加入

@ReactMethod

public void getDataFromIntent(Callback callback){

try{

Activity currentActivity=getCurrentActivity();

String result =currentActivity.getIntent().getStringExtra("data");

if(TextUtils.isEmpty(result)){

callback.invoke("no_data");

}else{

callback.invoke(result);

}

}catch (Exception e){

callback.invoke("error");

}

然后在RN端获取即可

NativeModules.ToastForAndroid.getDataFromIntent((result)=>{

this.setState({data:result});

});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

SSA丝社APP

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
android 调用rn方法,React Native与Android 原生通信的方法

我们用React Native 做混合开发的时候免不了要原生和React Native 进行通信交互，这篇文章就是分享原生模块与JS传递数据的几种方式。总的步骤可以分为如下几点：在原生端定义Module类,继承ReactContextBaseJavaModule,在Module类里,定义交互的方法.定义Package类，继承ReactPackage,将Module实例添加到集合.在android继...
复制链接

扫一扫