React Native Android本地用户界面组件中的自定义事件

我想在Android的React Native应用程序中使用OpenStreetMap磁贴,所以我试图按照这里所述来包装OSMDroid原生UI组件。 大多数情况下,它工作正常,但我很难找出如何正确处理事件,特别是在onScrollonZoom

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

基于文档 ,我已经在我的视图pipe理器的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代码中没有任何事情发生。 有谁知道如何正确地做到这一点? 我觉得我必须在这里错过一些基本的概念。

Solutions Collecting From Web of "React Native Android本地用户界面组件中的自定义事件"

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

在本土方面:

 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}/> } } 

希望能帮助到你。