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.
- ¿Cómo obtener un nombre de versión en la aplicación de reactivo nativo en Android?
- W / unknown: ViewManagerPropertyUpdater: No se pudo encontrar el generador generado para la clase com.facebook.react. *
- React-Native El nivel de API Android más bajo
- Reaccionar-nativo: app: installDebug FALLA
- Cómo mostrar varios componentes en reactjs
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í.
- TextInput flexDirection: la fila no funciona en React-Native
- Cómo tocar y mantener presionado para seleccionar texto en React Native
- Cómo ocultar barras de desplazamiento en Android WebView a través de React Native
- Error: No se puede encontrar el archivo con path: prelude_dev.js
- Reaccionar Nativo: ¿Cómo gestiono los tamaños de pantalla de Android 9000?
- ¿Cómo configurar reaccionar la biblioteca nativa de Android para usar npm instalado reaccionar-nativo?
- ¿Reactivo-Nativo innecesarios permisos de usuario de Android añadido automáticamente en la compilación?
- Reaccionar la aplicación nativa de Android se ha detenido
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.
- Telegrama: obtener fileid del cliente de telegrama
- SwipeRefreshLayout cargador no sube cuando tire hacia abajo de Android