React-native android WebView handle щелкнул по URL-адресу перед загрузкой

Привет, у меня сложилась следующая ситуация:

Я показываю веб-сайт через WebView в интерактивном режиме. На этом веб-сайте есть ссылка на файл PassWallet (.pkpass) (не единственный вариант использования). Когда я нажимаю на любую ссылку на этом веб-сайте, я хочу проверить, является ли это другим сайтом или файлом .pkpass или что-то еще. Пока эта проверка выполняется, я не хочу ничего загружать, просто подождите, пока моя функция не будет закончена, и я знаю, открывать ли я сайт или открывать другое приложение или что-то еще. Я хочу сделать это на стороне JavaScript, потому что все мои функции маршрутизации есть и, на мой взгляд, для этих случаев была создана реакция-родная 🙂

На iOS есть эта красивая функция onShouldStartLoadWithRequest которая точно делает то, что мне нужно.

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

Я получаю событие (e) и могу проверить, какой url он пытается загрузить. Я могу даже проверить с помощью e.navigationType, если это щелчок или что-то еще.

Теперь на Android эта функция не существует. На shouldOverrideUrlLoading стороне есть функция shouldOverrideUrlLoading но эта функция не реализована в реакции-native. Я нашел следующую проблему GitHub / PR https://github.com/facebook/react-native/pull/6478, я думаю, теперь, потому что эта проблема закрыта, и поэтому есть объяснения, эта функция не реализуется.

Поэтому я начал самостоятельно искать путь. Я создал собственный компонент пользовательского интерфейса, который отображает WebView и затем реализует этот метод.

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

Он работает так, как ожидалось. Теперь я могу запускать функцию shouldOverrideUrlLoading в JS и создавать журналы или что-то еще.

Но мой вопрос заключается в том, как теперь я могу установить true или false в Javascript для управления функцией shouldOverrideUrlLoading ? И есть ли возможность сделать мои собственные функции доступными? До сих пор мне удалось запустить событие onChange ?

Я просто хочу сделать то же, что и в iOS 🙁 Может быть, кто-то подходит и говорит мне, что это невозможно по какой-либо причине, но как мне или как вы справляетесь с такими случаями? Я знаю, что есть Url Схемы, но я знаю, что они не работают в этом случае.

Я благодарен за любую помощь в этом …

Я показываю веб-сайт через WebView в интерактивном режиме. На этом веб-сайте есть ссылка на файл PassWallet (.pkpass) (не единственный вариант использования). Когда я нажимаю на любую ссылку на этом веб-сайте, я хочу проверить, является ли это другим сайтом или файлом .pkpass или что-то еще.

У меня была аналогичная проблема, где я хотел проверить тип ссылки, нажатой в веб-браузере моего адаптивного приложения. Как вы сказали, на стороне iOS функция onShouldStartLoadWithRequest , которой нет на стороне Android.

Это было мое решение на стороне Android.

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

Тогда вы можете сделать что-то вроде этого:

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

Если я правильно понял вашу проблему, вам нужен способ проверить URL-адрес, указанный в вашем веб-браузере, а затем решить, на основе URL-адреса, чтобы продолжить или остановить и сделать что-то еще. Решение выше того, как я справился с этим в нашем приложении.

Посмотрите ссылки ниже:

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

Intereting Posts
Как добавить панели инструментов в AppCompatPreferenceActivity? Получить выбранный элемент в ListItem ContextMenu Выровнять к самому большому элементу в RelativeLayout Сообщения XMPP, потерянные на Android при переключении передачи данных (например, включение Wi-Fi, GSM <-> Wifi-переключатель) Android двойной SIM-карты API Как я могу воссоздать фрагмент? Первая кнопка «Переключить» не влияет на вторую Захват кадры предварительного просмотра Camera2 возвращает пустой буфер Android: как узнать, нажата ли кнопка RequestPermission () не полностью воссоздает стек действий Курсор EditText находится после подсказки Насколько безопасна локальная база данных Firebase в Android? Пропустили 60 кадров! Приложение может слишком много работать над своей основной нитью Google Plus GoogleApiClient connect () без диалога выбора аккаунта Проверьте, включен ли беспроводной (даже если он не подключен к какой-либо сети)