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

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

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

根据文档 ,我在我的视图管理器的createViewInstance方法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  } } 

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

要将自定义事件发送到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  } } 

希望能帮助到你。