ReactNative中js与原生如何交互

最新推荐文章于 2022-09-27 11:44:09 发布

WinterfellSo

最新推荐文章于 2022-09-27 11:44:09 发布

阅读量2.5k

点赞数

分类专栏： ReactNative 文章标签： ReactNative

本文链接：https://blog.csdn.net/mwp123555/article/details/72902403

版权

本文探讨在ReactNative中，如何实现原生模块与JavaScript的交互，主要通过原生向JS发送事件的方式。详细介绍了在ViewManager中定义和发送消息的方法，以及如何在JS组件中监听和响应这些事件。查看Git仓库（https://github.com/Springever/Test）获取具体代码示例。

摘要由CSDN通过智能技术生成

第一部分，在ReactNative中，原生与js交互常用的是原生通过向js发送事件，参考webview源代码。

1、定义事件与发送消息方法

public class ReactExpandListViewEvent extends Event<ReactExpandListViewEvent> {

    public static final String EVENT_NAME = "topExpandListViewClick";

    private WritableMap mEventData;

    public ReactExpandListViewEvent(int viewId, WritableMap eventData) {
        super(viewId);
        mEventData = eventData;
    }

    @Override
    public String getEventName() {
        return EVENT_NAME;
    }

    @Override
    public void dispatch(RCTEventEmitter rctEventEmitter) {
        rctEventEmitter.receiveEvent(getViewTag(), getEventName(), mEventData);
    }
}

2、注册事件（topExpandListViewClick）
在ViewManager重写以下方法

    //注册事件（ReactExpandListViewEvent）
    @Override
    public Map<String, Object> getExportedCustomDirectEventTypeConstants() {
        return MapBuilder.<String, Object>builder()
                .put("topExpandListViewClick", MapBuilder.of("registrationName", "onExpandListViewClick"))
                .build();
    }

3、组装发送到js的数据

在ViewManger中组装数据

    //组装发送到js的数据
    private WritableMap createExpandListViewEvent(ExpandableListView expandListView) {
        WritableMap event = Arguments.createMap();
        event.putDouble("target", 2222222);
        event.putString("url", "22222");
        event.putBoolean("loading", true);