防止WebView在Android中加载URL（React Native）

Question

目前，OnShouldStartLoadWithRequest 仅在 iOS 上受支持。 在 Android 上添加对此支持的 PR 已关闭。如果 Android 上的 WebView 尝试打开自定义 URL 方案，应用程序将崩溃——这也会导致我的应用程序崩溃。

我正在开发的应用程序需要拦截尝试打开自定义 URL 方案的 WebView，并在打开该 URL 之前取消它（在 iOS 上，在

false

上返回

OnShouldStartLoadWithRequest

是一个很好的方法）。

在 Android 上执行此操作的最佳方法是什么？

我希望这段代码能够工作：

        <WebView
            ref={WEBVIEW_REF} 
            source={{uri: INITIAL_URI}}
            onShouldStartLoadWithRequest={this.onShouldStartLoadWithRequest}
            style={{width, height: height - navBarHeight, backgroundColor: "#fff"}}
        />

---

 onShouldStartLoadWithRequest(navigator) {
    if (navigator.url.indexOf(INTERCEPT_URL) === -1) {
        return true;
    }    
    return false;
  }

我个人对几乎所有有效的方法都满意——包括手动修改

ReactWebViewManager.java

。我只需要把它带出去。

Answer 1

您可以使用

onNavigationStateChange

属性，它将获得与您在函数 navigator

 中获得的相同的 

onShouldStartLoadWithRequest 对象。

 <WebView
        ref={WEBVIEW_REF} 
        source={{uri: INITIAL_URI}}
        onShouldStartLoadWithRequest={this.onShouldStartLoadWithRequest} //for iOS
        onNavigationStateChange ={this.onShouldStartLoadWithRequest} //for Android

        style={{width, height: height - navBarHeight, backgroundColor: "#fff"}}
    />

然后在函数中

onShouldStartLoadWithRequest(navigator) {
    if (navigator.url.indexOf(INTERCEPT_URL) === -1) {
        return true;
    } else {
        this.refs[WEBVIEW_REF].stopLoading(); //Some reference to your WebView to make it stop loading that URL
        return false;
    }    
}

我和你有同样的需求，这就是我解决的方法。

Answer 2

如果您可以修改方案，则可以为其添加

http

后缀，这样

WebViewManager

就不会尝试使用该方案创建意图并尝试解决它。

正如您可能在

ReactWebViewManager

中看到的那样

public boolean shouldOverrideUrlLoading(WebView view, String url) {
    if (url.startsWith("http://") || url.startsWith("https://")) {
        return 
    }
    ...
}

如果 url 以 http 开头，管理器不会将其视为方案。我知道这是一个丑陋的解决方法，但是嘿，它确实有效。

Answer 3

我希望这会有所帮助，尽管如果它对任何人有帮助，那么将其留在这里已经很晚了。尝试像这样使用 props onShouldStartLoadWithRequest

<WebView
 source={{uri:'https://stackoverflow.com/'}}
 onShouldStartLoadWithRequest={request => {
  if (request.url.includes('https')) {
      return false;
  } else return true;
 }}
 />

Answer 4

找不到适用于 Android 的解决方案。 WebView 存在一个未解决的问题。这是问题的链接

https://github.com/react-native-webview/react-native-webview/issues/1869

Answer 5

添加此标签：

setSupportMultipleWindows={false}

与

onShouldStartLoadWithRequest

一起出奇地对我有用。