如何将Java Activity中的支付响应数据传递至React Native？

看起来你已经搭好了原生模块和Activity监听的基础框架，就差把支付响应的message数据成功传到React Native这一步了。咱们一步步来搞定这个问题：

第一步：修复Java端的事件发送逻辑 #

你已经在onActivityResult里正确拿到了支付响应的message，但之前的事件发送代码被注释掉了，而且需要确保在正确的作用域内调用RN的事件发射器。修改你的onActivityResult方法如下：

@Override
public void onActivityResult(Activity activity, int requestCode, int resultCode, Intent data) {
    if (requestCode == RaveConstants.RAVE_REQUEST_CODE && data != null) {
        String message = data.getStringExtra("response");
        // 获取RN的事件发射器实例
        DeviceEventManagerModule.RCTDeviceEventEmitter emitter = 
            reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class);
        
        // 把支付状态和响应消息打包成JSON字符串发送，方便RN端解析
        String resultJson;
        if (resultCode == RavePayActivity.RESULT_SUCCESS) {
            Toast.makeText(activity, "SUCCESS " + message, Toast.LENGTH_SHORT).show();
            resultJson = "{\"status\":\"success\",\"message\":\"" + message + "\"}";
        } else if (resultCode == RavePayActivity.RESULT_ERROR) {
            Toast.makeText(activity, "ERROR " + message, Toast.LENGTH_SHORT).show();
            resultJson = "{\"status\":\"error\",\"message\":\"" + message + "\"}";
        } else if (resultCode == RavePayActivity.RESULT_CANCELLED) {
            Toast.makeText(activity, "CANCELLED " + message, Toast.LENGTH_SHORT).show();
            resultJson = "{\"status\":\"cancelled\",\"message\":\"" + message + "\"}";
        } else {
            resultJson = "{\"status\":\"unknown\",\"message\":\"" + message + "\"}";
        }
        // 发送事件到RN端
        emitter.emit("paymentResult", resultJson);
    }
}

第二步：在React Native端监听事件 #

现在需要在RN代码里监听我们发送的paymentResult事件，根据组件类型选择对应的实现方式：

类组件实现示例 #

import React from 'react';
import { NativeEventEmitter, NativeModules, View, Button } from 'react-native';

const { HelloWorld } = NativeModules;
const paymentEmitter = new NativeEventEmitter(HelloWorld);

class PaymentScreen extends React.Component {
  componentDidMount() {
    // 注册支付结果监听器
    this.paymentListener = paymentEmitter.addListener(
      'paymentResult',
      (response) => {
        // 把JSON字符串解析成对象
        const paymentResult = JSON.parse(response);
        console.log('收到支付结果:', paymentResult);
        // 这里可以写你的业务逻辑，比如更新页面状态、跳转结算成功页等
      }
    );
  }

  componentWillUnmount() {
    // 组件卸载时移除监听器，避免内存泄漏
    this.paymentListener.remove();
  }

  async triggerPayment() {
    HelloWorld.sayHi(
      (err) => console.error('支付调用失败:', err),
      (msg) => console.log('支付调用成功:', msg)
    );
  }

  render() {
    return (
      <View>
        <Button title="发起支付" onPress={this.triggerPayment} />
      </View>
    );
  }
}

export default PaymentScreen;

函数组件实现示例（使用useEffect） #

import { useEffect, useState } from 'react';
import { NativeEventEmitter, NativeModules, View, Button, Text } from 'react-native';

const { HelloWorld } = NativeModules;
const paymentEmitter = new NativeEventEmitter(HelloWorld);

const PaymentScreen = () => {
  const [paymentStatus, setPaymentStatus] = useState('');
  const [paymentMessage, setPaymentMessage] = useState('');

  useEffect(() => {
    const listener = paymentEmitter.addListener(
      'paymentResult',
      (response) => {
        const result = JSON.parse(response);
        setPaymentStatus(result.status);
        setPaymentMessage(result.message);
        console.log('支付结果:', result);
      }
    );

    // 清理函数：组件卸载时移除监听器
    return () => listener.remove();
  }, []);

  const triggerPayment = async () => {
    HelloWorld.sayHi(
      (err) => console.error('支付调用出错:', err),
      (msg) => console.log('支付已发起:', msg)
    );
  };

  return (
    <View>
      <Button title="发起支付" onPress={triggerPayment} />
      {paymentStatus && (
        <View>
          <Text>支付状态: {paymentStatus}</Text>
          <Text>响应消息: {paymentMessage}</Text>
        </View>
      )}
    </View>
  );
};

export default PaymentScreen;

额外检查项 #

• 确保你的HelloWorldModule已经正确注册到React Native的Package中，比如在MainApplication.java的getPackages()方法里添加：

@Override
protected List<ReactPackage> getPackages() {
  List<ReactPackage> packages = new PackageList(this).getPackages();
  // 添加自定义原生模块包
  packages.add(new HelloWorldPackage());
  return packages;
}

（如果你的Package类命名为HelloWorldPackage）

• 确认reactContext在模块构造函数中已正确初始化，你的现有代码里这部分是没问题的。

这样修改后，当支付完成、失败或被取消时，Java端就会把对应的状态和消息发送到RN端，RN的监听器就能实时接收到数据并处理了。

内容的提问来源于stack exchange，提问作者biggest_boy