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

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 webview html5 vídeo autoplay no funciona en android 4.0.3
  • Comunicación con vistas Web integradas (UI) en aplicaciones iOS y Android existentes
  • Configuración correcta de AppCache para Android WebView
  • Cómo desplazar WebView a la parte superior de android?
  • Cómo cargar o recuperar una página web en modo en línea y fuera de línea en la aplicación android?
  • Cómo iniciar sesión en facebook en WebView si ya tiene acceso token de FB SDK en Android
  • WebView loadUrl sólo funciona una vez
  • Guardar el estado de un WebView y volver a cargar la posición
  • Vista web de Android: detección de desplazamiento
  • ¿Cómo utilizar WebView para mostrar páginas html en modo lector de libros electrónicos?
  • ¿Qué está causando esto en android webView?
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.