javascript - react-native-webview的方法stopLoading导致网站卡顿

Question

我想在 react-native 中拦截对我的 webview 中链接的点击并执行自定义操作，而不是像官方 guide 中描述的那样导航到链接的目标。 .这是我的做法:

import React from 'react';
import {View, Linking} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import {WebView} from 'react-native-webview';

export default class WebViewScreen extends React.Component {
    static navigationOptions = {
        title: 'Produck',
    };

    constructor(props) {
        super(props);
    }

    /**
     * Defines content and look of the WebViewScreen.
     */
    render() {
        const DEFAULT_URL = "https://www.myurl.de/index.html";

        return (
            <View style={{ flex: 1 }}>
                <WebView
                    ref = {webview => {
                        this.myWebView = webview;
                    }}
                    renderLoading = {this.renderLoading}
                    startInLoadingState = {true}
                    automaticallyAdjustContentInsets = {true}
                    source = {{ uri: DEFAULT_URL }}
                    javaScriptEnabled = {true}
                    domStorageEnabled = {true}
                    cacheEnabled = {false}
                    useWebKit = {true} // use WKWebView on iOS (http://facebook.github.io/react-native/blog/2018/08/27/wkwebview)
                    onNavigationStateChange={this.handleWebViewNavigationStateChange.bind(this)}
                />
            </View>
        );
    }

    handleWebViewNavigationStateChange = newNavState => {
        const {url} = newNavState;
        if (!url) return;

        if (isExternal(url)) {
            this.myWebView.stopLoading();

            // do something else, e.g.
            Linking.openURL(url);
        }
    };

如果我单击该 web View 中的链接，该 URL 将按预期在系统浏览器中打开。然而，问题是之后 webview 被卡住了。我无法再点击任何链接，甚至无法滚动页面。当然这不是应该的。重点是在其他地方打开一个链接，以便 webview 中的页面仍然可用。结果将保持不变，即使我删除了 Linking 部分。然后页面会在点击链接时卡住。

有人知道怎么办吗？我想 stopLoading 方法的作用不仅仅是中止加载。它是否也可能取消当前页面上任何正在运行的 Javascript？如果是这样，我可以阻止它吗？

Answer 1

多亏了this，我至少找到了解决方案拉取请求。我没有使用 onNavigationStateChange 和 stopLoading，而是使用了 onShouldStartLoadWithRequest。在此事件的回调方法中，您可以简单地通过返回 false 或 true 来定义就当前 webview 而言是否应丢弃请求。所以你得到这样的东西:

render() {
    ...
    return(...
        <WebView
            ...
            onShouldStartLoadWithRequest={this.handleWebViewRequest.bind(this)}
            ...
        />
    );
}

handleWebViewRequest = request => {
    const {url} = request;
    if (!url) return false;

    if (isExternal(url)) {
        Linking.openURL(url);
        return false;
    } else {
        return true;
    }
}

到目前为止，“做什么”部分。好吧，我还想回答我的其他问题并深入研究 react-native-webview 的代码(这一点都不好玩……评论呢？->“让代码说话”->好吧，事实并非如此) .在花费一些时间从一个委托(delegate)目标跳转到下一个委托(delegate)目标后，某处 stopLoading 调用似乎已移交给 native WebView。因此，Android 和 iOS 的行为也可能完全不同(我目前只为 Android 开发)。至于“我能阻止”——整个问题的一部分，我可以说:“不”。当然，最有趣的部分应该是“stopLoading 实际上做了什么？我在某处读到它确实阻止了当前页面上的链接被点击。但这只是一个未经证实的陈述。当我到达本地 Android-WebView-documentation 时，我找到了非常非常好的解释“停止当前负载。”(去谷歌，是的)。然后我失去了深入挖掘的所有动力。好吧，除非有人比我更开明，可以提出更详尽的解释，否则我可能会接受我自己的答案，因为它至少是我面临的开发问题的解决方案。