react-native监听Android（Android向RN发送事件）

在之前的文章介绍了在react-native中直接调用原生Android的方法，那么在Android中执行完某些操作再调用JS中的方法该怎么做呢。

下面来说一下RN监听Android。

1、按上一篇文章调用原生Android的支付宝支付为例，我们实现一个小功能：当支付失败的时候弹出一个提示框提示支付失败。

2、在MyNativeModule.java文件的支付失败的代码处添加：

if (TextUtils.equals(resultStatus, "9000")) {
                        // 该笔订单是否真实支付成功，需要依赖服务端的异步通知。
                        //Toast.makeText(mContext, "支付成功", Toast.LENGTH_SHORT).show();
                    } else {
                        // 该笔订单真实的支付结果，需要依赖服务端的异步通知。
                        //Toast.makeText(mContext, "支付失败", Toast.LENGTH_SHORT).show();
                        
                        //添加以下代码start
                        WritableMap event = Arguments.createMap();
                        sendEvent(mContext, "EventName",event);
                        //添加以下代码end
                    }
                    break;

//定义发送事件的函数
    public  void sendEvent(ReactContext reactContext, String eventName, @Nullable WritableMap params)
    {
        System.out.println("reactContext="+reactContext);

        reactContext
                .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                .emit(eventName,params);
    }

3、在RN中：

componentWillMount(){
        //监听事件名为EventName的事件
        DeviceEventEmitter.addListener('EventName', function() {
            alert("支付失败");
        });
    }

到此，当支付失败会弹出“支付失败”的弹框。

总结一下用到的代码：

① 在Android原生中：

//定义上下文对象
private ReactContext mContext;
    //定义发送事件的函数
    public  void sendEvent(ReactContext reactContext, String eventName, @Nullable WritableMap params)
    {
        System.out.println("reactContext="+reactContext);

        reactContext
                .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                .emit(eventName,params);
    }

WritableMap event = Arguments.createMap();
                        //传递的参数
                        event.putString("ceshi","132456456");
                        //EventName为JS监听的事件
                        sendEvent(mContext, "EventName",event);

②在JS中：

 componentWillMount(){
        //监听事件名为EventName的事件
        DeviceEventEmitter.addListener('EventName', (e)=> {
            //e是原生传过来的参数
            console.log(e)
            alert("支付失败");
        });
    }

注意：最好用es6中的箭头函数，这样设置this.state可以生效。

tip:在react-native调用原生的文章中，在继承ReactContextBaseJavaModule的类的java文件中：

 //定义上下文对象
    private ReactContext mContext;

public RnTest(ReactApplicationContext reactContext) {
        super(reactContext);
//mContext为上下文
        mContext=reactContext;
    }

必须加上这一句mContext=reactContext，否则会报mContext是空的错误提示。