当前位置: 开发笔记 > Android > 正文

ReactNative与Android原生通信的方法

作者：24吴梦琦_581 | 来源：互联网 | 2022-10-19 16:37

本篇文章主要介绍了ReactNative与Android原生通信的方法，主要是分享原生模块与JS传递数据的几种方式，非常具有实用价值，需要的朋友可以参考下

我们用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});
});

同理其他情况请参考RN之Android:原生界面与React界面的相互调用及数据传递 ,这也是我的参考之一。

最后献上大家最期待的源码 https://github.com/jack921/ReactNativeParam 还有什么不明白就开源码吧

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

推荐阅读

build
chrome安装reactdevtools开发工具

我开始安装react-devtools的时候百度了一波，都是写的不清不楚，官网又都是英文的也不是完全理解，经过一番折腾出来以后，写个文档记录一下，也可避免新手首次安装走弯路我安装react-devtools的前提是本地安装了git以及node我相信准备学react的同学，应该都有了解使用1.首先打开官网：https:github.comfacebook ... [详细]

蜡笔小新 2024-12-03 08:34:47
json
基于Node.js、Express、MongoDB和Socket.io的实时聊天应用开发

本文详细介绍了使用Node.js、Express、MongoDB和Socket.io构建的实时聊天应用程序。涵盖项目结构、技术栈选择及关键依赖项的配置。 ... [详细]

蜡笔小新 2024-12-22 15:31:28
json
企业级项目中 Webpack 配置优化指南

本文详细介绍了在企业级项目中如何优化 Webpack 配置，特别是在 React 移动端项目中的最佳实践。涵盖资源压缩、代码分割、构建范围缩小、缓存机制以及性能优化等多个方面。 ... [详细]

蜡笔小新 2024-12-24 14:41:48
java
Redux入门指南

本文介绍Redux的基本概念和工作原理，帮助初学者理解如何使用Redux管理应用程序的状态。Redux是一个用于JavaScript应用的状态管理库，特别适用于React项目。 ... [详细]

蜡笔小新 2024-12-22 10:04:31
android
Android 开发面试经验与心得

本文回顾了2017年的转型和2018年的收获，分享了几家知名互联网公司提供的工作机会及面试体验。 ... [详细]

蜡笔小新 2024-12-21 16:10:08
android
程序员如何优雅应对35岁职业转型？这里有深度解析

本文探讨了程序员在职业生涯中如何通过不断学习和技能提升，优雅地应对35岁左右的职业转型挑战。我们将深入分析当前热门技术趋势，并提供实用的学习路径。 ... [详细]

蜡笔小新 2024-12-20 18:26:03
android
React Native Android 源码分析之前期准备

前言ReactNative是目前最流行的跨平台框架，并且是Facebook团队开源的项目。架构及实现技术上都有很高的研究价值，本系列就来分析一下Reac ... [详细]

蜡笔小新 2024-12-12 20:19:17
android
图像分类算法的优化策略与实践

本文探讨了《Bag of Tricks for Image Classification with Convolutional Neural Networks》论文中的多项技术，旨在通过具体实例和实验验证，提高卷积神经网络在图像分类任务中的性能。文章详细介绍了从模型训练加速、网络结构调整到训练参数优化等多个方面的改进方法。 ... [详细]

蜡笔小新 2024-12-09 16:01:40
android
ABT 钱包正式全球发布，引领数字身份自主新时代

2023年5月20日凌晨5:20（北京时间），由区块链技术和去中心化应用平台ArcBlock（区块基石）研发的ABT钱包移动应用程序，在苹果App Store和Google Play同步上线，标志着用户在数字世界中首次能够完全掌控自己的身份。 ... [详细]

蜡笔小新 2024-12-08 16:58:51
android
在Linux系统中配置并启动ActiveMQ

本文详细介绍了如何在Linux环境中安装和配置ActiveMQ，包括端口开放及防火墙设置。通过本文，您可以掌握完整的ActiveMQ部署流程，确保其在网络环境中正常运行。 ... [详细]

蜡笔小新 2024-12-27 14:38:54
android
如何在WPS Office for Mac中调整Word文档的文字排列方向

本文将详细介绍如何使用最新版WPS Office for Mac调整Word文档中的文字排列方向。通过这些步骤，用户可以轻松更改文本的水平或垂直排列方式，以满足不同的排版需求。 ... [详细]

蜡笔小新 2024-12-27 12:34:14
android
Ionic 5 APK打包与QRScanner插件优化：常见问题及解决方案

本文总结了在使用Ionic 5进行Android平台APK打包时遇到的问题，特别是针对QRScanner插件的改造。通过详细分析和提供具体的解决方法，帮助开发者顺利打包并优化应用性能。 ... [详细]

蜡笔小新 2024-12-27 12:10:17
xml
Android LED 数字字体的应用与实现

本文介绍了一种适用于 Android 应用的 LED 数字字体（digital font），并详细描述了其在 UI 设计中的应用场景及其实现方法。这种字体常用于视频、广告倒计时等场景，能够增强视觉效果。 ... [详细]

蜡笔小新 2024-12-27 10:34:22
android
移动 UI 设计基础：打造简洁高效的用户界面

本章将深入探讨移动 UI 设计的核心原则，帮助开发者构建简洁、高效且用户友好的界面。通过学习设计规则和用户体验优化技巧，您将能够创建出既美观又实用的移动应用。 ... [详细]

蜡笔小新 2024-12-27 08:43:40
build
深入解析com.datastax.driver.core.Metadata中的triggerOnUserTypeChanged方法

本文详细介绍了Java库com.datastax.driver.core.Metadata中的triggerOnUserTypeChanged方法的使用场景和代码实现，通过多个实际案例帮助开发者更好地理解和应用此方法。 ... [详细]

蜡笔小新 2024-12-06 20:12:21

24吴梦琦_581

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章