React-nativo de Android WebView manejar clic en Url antes de cargar

Hola tengo la siguiente situación:

Estoy mostrando un sitio web a través de un WebView en reaccionar-nativo. En este sitio web hay un enlace a un archivo PassWallet (.pkpass) (no el único caso de uso). Cuando hago clic en cualquier enlace de este sitio web, quiero comprobar si se trata de otro sitio web o un archivo .pkpass o lo que sea. Mientras esta comprobación se está ejecutando, no quiero cargar nada, sólo espere hasta que mi función esté terminada y estoy sabiendo si debo abrir un sitio web o abrir otra aplicación o lo que sea. Quiero hacer esto en el lado de JavaScript, porque todas mis funciones de enrutamiento están allí y en mi opinión react-native fue construido para este casos 🙂

En iOS hay esta hermosa función onShouldStartLoadWithRequest que hace exactamente lo que necesito.

 _onShouldStartLoadWithRequest(e) { if(checkUrl(e.url)) { let Router = this.props.navigator.props.router; let route = Router.getRouteFromUrl(e.url); this.props.navigator.push(route); return false; } return true; } 

Estoy recibiendo el evento (e) y puedo comprobar qué url está intentando cargar. Puedo incluso comprobar con e.navigationType si era un tecleo o lo que.

Ahora en Android esta función no existe. En el lado nativo existe la función shouldOverrideUrlLoading pero esta función no se implementa en react-native. He encontrado el siguiente problema GitHub / PR https://github.com/facebook/react-native/pull/6478 Creo que ahora, porque este problema está cerrado y hay explicaciones para, por lo tanto, esta función no se implementan.

Así que empecé a encontrar un camino por mí mismo. He creado un componente de interfaz de usuario nativo que muestra un WebView y, a continuación, implementar este método.

CustomWebViewManager.java:

 package ch.mypackage; import android.support.annotation.Nullable; import android.webkit.WebView; import com.facebook.react.uimanager.SimpleViewManager; import com.facebook.react.uimanager.ThemedReactContext; import com.facebook.react.uimanager.annotations.ReactProp; public class CustomWebViewManager extends SimpleViewManager<CplusWebView> { @Override public String getName() { return "CplusWebView"; } @Override protected CustomWebView createViewInstance(ThemedReactContext reactContext) { return new CustomWebView(reactContext); } @ReactProp(name = "url") public void setUrl(CustomWebView view, @Nullable String url) { view.loadUrl(url); } @ReactProp(name = "javascriptEnabled") public void setJavascriptEnabled(CustomWebView view, boolean enabled) { view.getSettings().setJavaScriptEnabled(enabled); } } 

CustomWebView.java

 package ch.couponplus; import android.util.Log; import android.webkit.WebView; import android.webkit.WebViewClient; import com.facebook.react.bridge.Arguments; import com.facebook.react.bridge.ReactContext; import com.facebook.react.bridge.WritableMap; import com.facebook.react.uimanager.ThemedReactContext; import com.facebook.react.uimanager.events.EventDispatcher; import com.facebook.react.uimanager.events.RCTEventEmitter; public class CustomWebView extends WebView { EventDispatcher eventDispatcher; EventWebClient eventWebClient; public CustomWebView(ThemedReactContext reactContext) { super(reactContext); eventWebClient = new EventWebClient(); setWebViewClient(eventWebClient); } protected class EventWebClient extends WebViewClient { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { WritableMap event = Arguments.createMap(); event.putString("message", "MyMessage"); ReactContext reactContext = (ReactContext)getContext(); reactContext.getJSModule(RCTEventEmitter.class).receiveEvent( getId(), "topChange", event); return true; } } } 

Funciona como se esperaba. Ahora puedo activar la función shouldOverrideUrlLoading en JS y hacer logs o lo que sea.

Pero mi pregunta es ¿cómo puedo establecer true o false en Javascript para controlar mi función shouldOverrideUrlLoading ? ¿Y hay una posibilidad de hacer mis propias funciones disponibles? ¿Hasta ahora sólo conseguí activar el evento onChange ?

Sólo quiero hacer lo mismo que hice en iOS :-(. Tal vez alguien viene y me dice que esto no es posible por cualquier razón, pero ¿cómo debo o cómo manejar casos como este? Sé que hay Url Esquemas pero tanto sé que no funcionan en este caso.

Estoy agradecido por cualquier ayuda en este ….

One Solution collect form web for “React-nativo de Android WebView manejar clic en Url antes de cargar”

Estoy mostrando un sitio web a través de un WebView en reaccionar-nativo. En este sitio web hay un enlace a un archivo PassWallet (.pkpass) (no el único caso de uso). Cuando hago clic en cualquier enlace de este sitio web, quiero comprobar si se trata de otro sitio web o un archivo .pkpass o lo que sea.

Tuve un problema similar, así, donde quería comprobar el tipo de enlace pulsado dentro de la webView de mi aplicación reactiva-nativo. Como has dicho, en el lado de iOS la función onShouldStartLoadWithRequest , que no está presente en el lado de Android.

Esta fue mi solución en el lado de Android.

  <WebView source={{uri: this.props.url}} onLoad={this.onLoad.bind(this)} onShouldStartLoadWithRequest={this._onShouldStartLoadWithRequest} onNavigationStateChange = {this._onShouldStartLoadWithRequest} /> 

Entonces usted puede hacer algo como esto:

  _onShouldStartLoadWithRequest(e) { if(checkUrl(e.url)) { let Router = this.props.navigator.props.router; let route = Router.getRouteFromUrl(e.url); this.props.navigator.push(route); this.refs[WEBVIEW_REF].stopLoading(); // <---- Add a similar line //This will tell your webView to stop processing the clicked link return false; } return true; 

Si he entendido su problema correctamente, desea una manera de comprobar la URL pulsada en su WebView y luego decidir sobre la base de la URL para continuar o detener y hacer otra cosa. La solución por encima de la forma en que lo manejé en nuestra aplicación.

Echa un vistazo a los siguientes enlaces:

https://facebook.github.io/react-native/docs/webview.html#stoploading https://github.com/facebook/react-native/pull/6886

  • Android PhoneGap obtener guiñada, tono, rollo, relativo a las coordenadas de tierra
  • ¿Qué está causando esto en android webView?
  • Selección de texto de Webview no borrada
  • ¿Pasar la URL de WebView a ShareActionProvider?
  • Cómo detener el desplazamiento interno de WebView en Android?
  • Necesita ayuda con el botón de retroactiva para volver a la vista web
  • Guardar / restaurar estado de android webview
  • Cómo ver la transmisión de vídeo RTSP a través de WebView en la aplicación para Android
  • Flash no se muestra en WebView para Android 3.0.1
  • Diálogo de carga de la vista web de Android
  • WebView en un fragmento (android.support.v4)
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.