RN android 给rn传值

原创

mob64ca12f6066e 2023-11-19 14:47:28 ©著作权

文章标签 Android 数据传递数据 文章分类 Android 移动开发

©著作权归作者所有：来自51CTO博客作者mob64ca12f6066e的原创作品，请联系作者获取转载授权，否则将追究法律责任

RN Android给RN传值实现流程

1. 概述

在React Native (RN)开发中，我们经常需要在Android原生代码和RN代码之间传递数据。本文将介绍如何在Android原生代码中向RN传递值，并提供了详细的步骤和代码示例。

2. 流程图

flowchart TD
    A[Android原生代码] --> B[传递数据到RN]
    B --> C[RN代码接收数据]

3. 步骤及代码示例

步骤1：在Android原生代码中传递数据到RN

在Android原生代码中，我们需要使用ReactContext来传递数据到RN。以下是示例代码：

// 导入ReactContext
import com.facebook.react.bridge.ReactContext;

// 获取ReactContext实例
ReactContext reactContext = (ReactContext) getContext();

// 创建传递给RN的数据
String data = "Hello RN!";

// 将数据传递给RN
reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
  .emit("eventName", data);

代码说明：

第1行：导入ReactContext类。
第4行：获取ReactContext实例，需要在合适的上下文中获取，比如在Activity或Fragment中的某个方法中。
第7行：创建需要传递给RN的数据，这里示例为字符串"Hello RN!"，你可以根据实际需求创建不同的数据类型。
第10-12行：通过ReactContext实例的getJSModule方法获取DeviceEventManagerModule.RCTDeviceEventEmitter的实例，然后调用emit方法传递数据到RN。

步骤2：在RN代码中接收数据

在RN代码中，我们需要使用DeviceEventEmitter来监听来自Android原生代码的事件，并接收传递过来的数据。以下是示例代码：

import { DeviceEventEmitter } from 'react-native';

// 监听事件
const eventListener = DeviceEventEmitter.addListener('eventName', (data) => {
  // 处理接收到的数据
  console.log(data);
});

// 移除事件监听（可选）
// eventListener.remove();

代码说明：

第1行：导入DeviceEventEmitter模块。
第4行：使用addListener方法监听来自Android的事件，第一个参数是事件名，需要和Android代码中保持一致；第二个参数是一个回调函数，接收Android传递过来的数据。
第7行：在回调函数中处理接收到的数据，这里示例为简单地打印数据到控制台。
第10行：（可选）如果不再需要监听该事件，可以使用remove方法移除事件监听。