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.
- "Reaccionar-nativo run-android" - BUILD es SUCCESSFUL pero obtener error tipo 3 Error: clase de actividad MainActivity no existe
- Reaccionar vista personalizada nativa, sin propType para prop nativo
- No se puede instalar firmado apk de React Native
- ¿Es posible crear un widget de escritorio con react-native?
- Com.android.ddmlib.InstallException: No se pudo instalar todo
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í.
- No se pudo encontrar tools.jar React Native Android En Windows 10
- Uso de sensores en Android con React Native
- Reaccionar La compilación androide nativa falló. SDK ubicación no encontrada
- Reaccionar Android nativo no se puede cargar JS paquete
- Reaccionar error de android nativo: no se puede encontrar el símbolo
- Reaccionar la aplicación nativa de Android se ha detenido
- Cómo deshabilitar la escala de fuentes en RN para Android?
- Error "No se pudo obtener BatchedBridge, asegúrese de que su paquete se empaqueta correctamente" al inicio de la aplicación
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