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.

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í.

Para enviar eventos personalizados a Javascript, puede utilizar RCTDeviceEventEmitter:

En el lado nativo:

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

Dentro de su módulo JS sólo tiene que registrar un oyente usando 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}/> } } 

Espero eso ayude.

  • No se puede reconocer el servidor JS
  • Proyecto de la biblioteca de Android con React Native
  • TypeError: undefined no es una función (evaluando 'remoteModules.forEach')
  • Reaccionar Android nativo se bloquea al intentar depurar en Chrome
  • Cómo el estilo de la norma reaccionar-seleccionador de Android nativo?
  • Cómo actualizar el número de versión de la aplicación de reaccionar nativo
  • Cómo configurar la pantalla de bienvenida para reaccionar con Android nativo
  • Cómo devolver un booleano de @ReactMethod en React Native?
  • React-native no puede ejecutar android
  • ¿Cómo hace la interfaz ReadableMap en React-native convertir JS a JAVA?
  • Problema de comando run-android de React-Native
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.