Question

我想在本地视图中拦截我的Web视图中某个链接的点击，并执行自定义操作，而不是像官方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视图中的链接，则URL将按预期在系统浏览器中打开。但是，问题在于，随后Web视图被冻结。我无法再单击任何链接，甚至无法滚动页面。当然，事实并非如此。关键是要在其他位置打开链接，以便使Web视图中的页面保持可用。即使删除Linking部分，结果也将保持不变。然后，该页面仅在单击链接时冻结。

有人知道该怎么做吗？我猜想stopLoading-method不仅仅是终止加载。是否还会取消当前页面上正在运行的Javascript？如果是这样，我可以防止吗？

Answer 1

多亏了this拉取请求，我至少找到了解决方案。我没有使用onNavigationStateChange和stopLoading，而是转向onShouldStartLoadWithRequest。在此事件的回调方法中，您可以简单地通过返回false或true来定义是否应放弃请求（就当前Web视图而言）。这样您会得到如下内容：

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的代码中（这一点都不好玩...评论呢？->'让代码说话'->事实并非如此）。在花了一些时间从一个委派目标跳到下一个委派目标之后，似乎将stopLoading调用转移到了本地WebView。因此，对于Android和iOS，行为也可能完全不同（我目前仅针对Android开发）。至于“我能阻止”吗？在整个问题中，我可以说：“不”。当然，最有趣的部分应该是“ stopLoading的实际作用是什么？我读到某处它确实阻止了当前页面上的链接被单击。但这只是未经证实的陈述。对母语Android-WebView-documentation的了解，我发现了一个很好的解释：“停止当前的负载。”（去Google，是的），然后我失去了进行更深入挖掘的动力。好吧，除非有人比我更开明，否则可以提出更详尽的解释，我可能会接受我自己的答案，因为这至少是我所面临的开发问题的解决方案。

react-native-webview的stopLoading方法导致网站冻结

1 个答案: