Eventos personalizados en React Native Componente nativo de la interfaz de usuario de Android

Me gustaría usar los mosaicos de OpenStreetMap en mi aplicación React Native en Android, así que estoy tratando de envolver el componente de interfaz de usuario nativo de OSMDroid tal como se describe aquí. En su mayor parte, funciona bien, pero tengo problemas para averiguar cómo manejar correctamente eventos, específicamente onScroll y onZoom .

Con OSMDroid, se establece un DelayedMapListener para manejar los eventos, lo que es bastante sencillo. He confirmado que los eventos están siendo manejar correctamente Java-lado hasta el punto donde el código JS debe ser activado. Sin embargo, no están activando mi código JavaScript.

• AssertionError: Esta vista raíz ya se ha adjuntado a un gestor de instancias de catalizador
• Cómo ocultar barras de desplazamiento en Android WebView a través de React Native
• Running React Proyectos nativos presentes en github en dispositivos Android
• ToolBarAndroid no representa en ReactNative
• ¿Cómo acceder a Actividad desde un módulo React Native Android?

Sobre la base de la documentación , he implementado los manejadores de eventos en Java en el método createViewInstance de mi gestor de vistas:

 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)); 

La parte relevante de mi código JS es básicamente idéntica al código en la documentación vinculada arriba:

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

No hay errores o signos de que algo anda mal. El código del controlador de eventos Java se llama correctamente. No hay señales de que algo suceda en el código JS cuando ocurre un evento. ¿Alguien sabe cómo hacer esto correctamente? Siento que debo de faltar algún concepto básico aquí.

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

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