React Native Android原生组件事件无法传递至JavaScript

嘿，我看你遇到了Android原生扫码组件的事件没法传到JS代码里的问题，别着急，咱们一步步来排查和解决～

你提到正在构建一个封装了相机预览和QR码扫描功能的自定义React Native视图，Android原生端已经能检测到QR码，但事件就是没法传递到JavaScript层面。你贴出了部分MyTestView.kt的代码：

package com.custman  

import android.content.Context  
import android.graphics.Color  
import android.util.Log  
import android.widget.FrameLayout  
import android.widget.LinearLayout  
import com.facebook.react.bridge.ReactCont

（注：你粘贴的代码内容不完整，不过没关系，咱们从事件传递的核心逻辑入手）

下面是几个常见的问题点和对应的解决办法：

1. 确保原生端正确实现事件发送逻辑 #

React Native中，Android原生组件向JS发送事件需要借助DeviceEventManagerModule的事件发射器，或者在ViewManager中注册自定义事件回调。

如果是在扫码成功的回调方法里，你需要添加类似这样的代码来发送事件：

// 首先确保你持有有效的ReactContext实例
val reactContext = context as ReactContext
// 获取事件发射器
val eventEmitter = reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
// 发送事件，第一个参数是事件名称，第二个是传递给JS的数据（可以是Map、String等）
eventEmitter.emit("onQrCodeScanned", mapOf(
    "qrData" to "扫描到的QR码内容"
))

另外，你可以在这段代码前后加Log日志，确认扫码成功时确实执行了事件发送逻辑：

Log.d("QrScanner", "检测到QR码，准备发送事件")
// 上面的事件发送代码
Log.d("QrScanner", "事件已发送")

之后通过Android Studio的Logcat查看这些日志，验证原生端是否走到了这一步。

2. 在ViewManager中注册自定义事件（推荐方式） #

如果你的自定义视图是通过ViewManager来暴露给JS的，更规范的做法是在ViewManager中注册自定义事件，这样可以直接通过组件props接收回调。

在你的ViewManager类中添加如下方法：

override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any>? {
    return mutableMapOf(
        "onQrCodeScanned" to mutableMapOf(
            "registrationName" to "onQrCodeScanned"
        )
    )
}

这样在JS端使用自定义组件时，就能直接通过props绑定回调：

import MyTestView from './MyTestView';

// 在组件中使用
<MyTestView 
    onQrCodeScanned={(event) => {
        console.log('扫描到的QR码：', event.nativeEvent.qrData);
    }} 
/>

3. 检查ReactContext是否有效 #

确保你的原生视图或ViewManager中持有的ReactContext实例是有效的，没有出现null的情况。如果是在View的构造方法中获取上下文，要确保传入的是ReactContext而非普通的Context。

4. 验证JS端事件监听是否正确 #

如果你用的是全局事件监听（而非props回调），要确保JS端正确注册了事件监听：

import { DeviceEventEmitter } from 'react-native';

// 在组件挂载时注册监听
useEffect(() => {
    const subscription = DeviceEventEmitter.addListener(
        'onQrCodeScanned',
        (data) => {
            console.log('扫描到的QR码：', data);
        }
    );
    // 组件卸载时取消监听
    return () => subscription.remove();
}, []);

先从这几个点排查，应该能解决事件无法传递的问题～

备注：内容来源于stack exchange，提问作者Divit Rao