React Native接收不到Android事件

问题描述

在一次开发过程中，需要将Android中的点击事件传给RN端处理，按照例程很快就能写出发送事件的代码，看起来没有一点问题的代码最后发现RN端接收不到事件，代码如下：

reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
    getId(),
    "onButtonClick",
    null
);

问题原因

无奈只能拿出以前写的成功传递事件的代码一条条对，最后发现竟然是getId()这个方法出了问题，之前也怀疑过，但是修改了一下还是出错，现总结主要有两点误区：

1. 以为getId()返回任意一个数据，比如0，就可以达到效果
2. 以为资源文件R.layout.xx就等于设置了该布局的View的id

错误的代码如下：
1.返回任意一个数据

private int getId() {
    return 0;
}

2.返回资源文件作为id

private int getId() {
    return R.layout.ui_test;
}

正是上面两个误区导致了找不出RN端接收不到事件的原因。

解决方案

在知道了误区之后，就知道应该从view中获取id，代码如下：

public class RNLightAppUI extends SimpleViewManager {

    //用字段来保存View和Context
    private View view;
    private ThemedReactContext reactContext;

    ...

    //在初始化时将View和Context初始化  
    @Override
    protected RelativeLayout createViewInstance(ThemedReactContext reactContext) {
        RelativeLayout view = (RelativeLayout) LayoutInflater.from(reactContext).
        inflate(R.layout.ui_test, null);
        this.reactContext = reactContext;
        this.view = view;

        //设置点击事件
        view.findViewById(R.id.btn).setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                //发送事件到RN  
                reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
                    getId(),
                    "onButtonClick",
                    null
                );
            }
        });
    }

    /**
     * 传递事件的罪魁祸首，一定要传this.view.getId()
     */
    private int getId() {
        return this.view.getId();
    }

    //将事件映射到RN端
    @Override
    public Map getExportedCustomDirectEventTypeConstants() {
        return MapBuilder.of(
                "onButtonClick",
                MapBuilder.of("registrationName", "onButtonClick")
        );
    }
}