javascript - React Native Android 原生 UI 组件中的自定义事件

Question

我想在我的 Android 上的 React Native 应用程序中使用 OpenStreetMap 磁贴，所以我尝试按照 here. 的描述包装 OSMDroid 原生 UI 组件在大多数情况下它工作正常，但我无法弄清楚如何正确处理事件，特别是 onScroll 和 onZoom。

使用 OSMDroid，您可以设置一个 DelayedMapListener 来处理事件，这非常简单。我已经确认事件在 Java 端被正确处理，直到应该触发 JS 代码。但是，它们并没有触发我的 JavaScript 代码。

基于 the documentation ，我在 View 管理器的 createViewInstance 方法中用 Java 实现了事件处理程序:

map.setMapListener(new DelayedMapListener(new MapListener() {
    public boolean onScroll(ScrollEvent event) {
        WritableMap eventData = Arguments.createMap();

        // Fill in eventData; details not important

        ReactContext reactContext = (ReactContext)map.getContext();
        reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
            map.getId(),
            "topChange",
             eventData);

        return true;
    }

    public boolean onZoom(ZoomEvent event) {
        // Basically the same as above
    }
}, 100));

我的JS代码的相关部分与上面链接的文档中的代码基本相同:

class OSMDroidMapView extends Component {
    constructor(props) {
        super(props);
        this._onChange = this._onChange.bind(this);
    }

    _onChange(event: Event) {
        console.log(event);
        // Handle event data
    }

    render() {
        return <OSMDroidMapView {...this.props} onChange={this._onChange}/>
    }
}

没有错误或任何错误迹象。 Java 事件处理程序代码被正确调用。当事件发生时，JS 代码中没有任何迹象。有谁知道如何正确地做到这一点？我觉得我必须在这里遗漏一些基本概念。

Answer 1

要将自定义事件发送到 Javascript，您可以使用 RCTDeviceEventEmitter:

在 Native 端:

import com.facebook.react.modules.core.DeviceEventManagerModule;

...

public boolean onScroll(ScrollEvent event) {
    WritableMap eventData = Arguments.createMap();

    // Fill in eventData; details not important

    ReactContext reactContext = (ReactContext)map.getContext();
    reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                .emit("YouCustomEventName", eventData);

    return true;
}

在您的 JS 模块中，您只需使用 DeviceEventEmitter 注册一个监听器:

class OSMDroidMapView extends Component {
    constructor(props) {
        super(props);
        this._onChange = this._onChange.bind(this);
    }

    componentWillMount() {
        DeviceEventEmitter.addListener('YouCustomEventName', this._onChange);
    }

    componentWillUnmount() {
        DeviceEventEmitter.removeListener('YouCustomEventName', this._onChange);
    }

    _onChange(event: Event) {
        console.log(event);
        // Handle event data
    }

    render() {
        return <OSMDroidMapView {...this.props} onChange={this._onChange}/>
    }
}

希望对您有所帮助。