Question

我正在使用react-native webview在应用程序中呈现网站。我想防止用户导航到其他主机。为此，我正在使用 state 解决方法：

state = {
        key: 1,
        isWebViewUrlChanged: false,
        url: 'https://google.com'
    };

并更改Web视图中的状态

<WebView
    key={this.state.key}
    url={this.state.url }
    onNavigationStateChange={this.setWebViewUrlChanged}
    />

使用此功能

setWebViewUrlChanged = (webviewState) => {
        if (webviewState.url.toString().indexOf('google.com') < 0) {
            this.setState({ url: 'https://google.com' });
            this.setState({ isWebViewUrlChanged: true });

    };

这个想法是，每当用户导航到不包含google.com的页面时，该URL就会再次更改为google.com，由于状态变化而迫使组件重新呈现。但是，这似乎不起作用。状态更改已正确触发，但是Web视图仍然会加载用户导航到的所有URL，并且我无法触发Web视图来加载我提供的URL。

应该做什么：如果用户导航到另一台服务器（例如github.com），请再次加载google.com。我尝试了react-native-blockable-webview（https://www.npmjs.com/package/react-native-blockable-webview），它似乎可以满足我的需求，但是已经过时了，不再兼容了，但是策略的概念恰恰是我们想要的。

注意：我仅在android上使用它。我很清楚，NavigationStateChange不适用于iOS。

react-native webview：在运行时加载URL

0 个答案: