Question

我想防止在react-native-webview中重定向到新页面。除了重定向之外，我想打开新的Webview模式并在此处打开url。

有可能做到这一点吗？

在IOS中，使用stopLoading效果很好，但在Android上不起作用

onNavigationStateChanged(navState) {
    if(navState.canGoBack)
    {
        this._webView.stopLoading();

        if(navState.url.indexOf('newWebViewPage') !== -1)
        {
            this.props.navigation.navigate('WebViewModal',{
                'url':navState.url,
                'title':navState.url
            })

            return false;
        }
        else
        {
            return true;
        }
    }
}

render() {
    let headers = {
        'Authorization':'Basic ' + btoa(NetworkUtils.USERNAME + ":" + NetworkUtils.PASSWORD),
        'Content-Type':'multipart/form-data',
    }

    return (
        <WebView
            source={{ uri: this.props.url, headers:headers }}
            bounces={false}
            javaScriptEnabled={true}
            onMessage={this.onMessage.bind(this)}
            injectedJavaScript={injectedJavascript}
            ref={(webView) => { this._webView = webView; }}
            style={[styles.webview,this.props.style]}
            startInLoadingState={false}
            useWebKit={true}
            onNavigationStateChange={this.onNavigationStateChanged.bind(this)}
            onLoadEnd={this.props.onLoadEnd?this.props.onLoadEnd:()=>{}}
            mixedContentMode={'compatibility'}
        />
    );
}

请帮助！

Answer 1

我正在使用反应导航。我这样做：

navigationRedirect = navState => {
    const { dispatch } = this.props.navigation
    const url = navState.url

      if(url.includes('www.unotv.com')){

         if(navState.canGoBack && navState.loading){

            this.webview.goBack()

             return dispatch(StackActions.push({
                 routeName: 'VisorWebView',
                 params: { url },
                 actions: [this.trackingForAnalytics(url)] //This function not affect the navigation
            }))

         }

     }else{
           this.webview.stopLoading()
           this.webview.goBack()
           Linking.openURL(url)
    }

}

  <WebView
     ref={ref => this.webview = ref }
     source={{ uri: this.state.baseURI }}
     originWhitelist={["https"]}
     userAgent="Mozilla/5.0 (Linux; Android 4.4.4; One Build/KTU84L.H4) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/33.0.0.0 Mobile Safari/537.36 [FB_IAB/FB4A;FBAV/28.0.0.20.16;]"
                decelerationRate='normal'
                allowsInlineMediaPlayback={true}                    
                mediaPlaybackRequiresUserAction={false}
                sharedCookiesEnabled={true}
                mixedContentMode='always'
                startInLoadingState={true}
                containerStyle={{ marginTop: isTablet ? -60 : -50 }}
                renderLoading={() => (
                    <ActivityIndicator
                        color='#29aae1'
                        size='large'
                        style={{ flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'flex-start' }}
                    />
                )}
                onNavigationStateChange={this.redirect}
            />

触摸我的权限范围之外的链接时，将打开浏览器（Safari）。如果链接在我的域中，请使用其他webview打开另一个屏幕：）

在Android上使用react-native-webview时如何防止重定向

1 个答案: