android – React Native WebView加载错误处理

概述当webview加载无效的url时,我应该设置哪个属性来显示错误视图？我尝试renderError,它触发控制台消息,但没有显示视图. 这是代码： <View style={styles.webview_body}> <WebView source={{uri:this.props.url}} onNavigationStateChange={this.onNavigationSt 当webvIEw加载无效的url时,我应该设置哪个属性来显示错误视图？我尝试renderError,它触发控制台消息,但没有显示视图.

这是代码：

<VIEw style={styles.webvIEw_body}>  <WebVIEw   source={{uri:this.props.url}}   onNavigationStateChange={this.onNavigationStateChange.bind(this)}   renderError={this.loadError.bind(this)} /></VIEw>//the fucntion which display the error messageloadError(){console.log('loaded');return (  <VIEw>    <Text>    something goes wrong.    </Text>  </VIEw>)}

这是截图

@L_419_0@

[更新]当我重新加载以清除错误时,会出现一个显示错误视图的临时状态.

解决方法 您可以使用onError prop如下所示在出错后呈现视图,并尝试处理不同的WebVIEw错误. renderError可用于呈现在解析WebVIEw错误时显示的视图

onError={ (e) => {    let uri = new URI(this.props.url);    let host = uri.host();    let insecureHosts = [-1004,-6,-1202];//all error codes as displayed on your console     if(e){        //Handles NSURLErrorDomain in iOS and net:ERR_CONNECTION_REFUSED in AndroID        if(insecureHosts.indexOf(e.nativeEvent.code) !== -1){            this.setState({url: `http://${host}`});            }        //Handles name resolution errors by redirecting to Google        else if(e.nativeEvent.code === -1003 ||  e.nativeEvent.code === -2){            this.setState({url: `https://www.Google.com/#q=${host}`});        }    } else {    //loads the error vIEw only after the resolving of the above errors has Failed        return(            <VIEw>                Error occurred while loading the page.            </VIEw>            );        }}}renderError={(e) => {//Renders this vIEw while resolving the error     return(        <VIEw>            <ActivityIndicator            animating={ true }            color='#84888d'            size='large'            hIDesWhenStopped={true}            style={{alignItems:'center',justifyContent:'center',padding:30,flex: 1}}/>            </VIEw>    );}}

请记住安装urijs并导入它以便使用URI.

总结

以上是内存溢出为你收集整理的android – React Native WebView加载错误处理全部内容，希望文章能够帮你解决android – React Native WebView加载错误处理所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。