ReactNativeUtil
ReactNativeUtil copied to clipboard
Error loading page Domain: WebKitErrorDomain Error Code: 101 The URL can't be shown

fix:
<WebView
style={{backgroundColor:'blue',flex:1}}
nativeConfig={//关键部分:这个修改错误
{
props: {
backgroundColor: '#ffffff',
flex: 1,
}
}
}
ref = {(webview)=>{this.web = webview}}
style={{width:'100%',height:'100%',marginTop:this.isIphoneX()?40:Platform.OS==='ios'?20:0}}
source={{uri: this.state.url}}
domStorageEnabled={true}
mixedContentMode={'always'}//指定混合内容模式。即WebView是否应该允许安全链接(https)页面中加载非安全链接(http)的内容,never,always,compatibility
onLoadEnd = {this.LoadEnd}//加载成功或者失败都会回调
onError = {this.isConnNet}
javaScriptEnabled = {true}//指定WebView中是否启用JavaScript
scalesPageToFit={true}
onNavigationStateChange={(e) => {
console.log("onNavigationStateChange",e)
this.onNavigationStateChange(e)
}}
startInLoadingState={true} //强制WebView在第一次加载时先显示loading视图
bounces={true}//指定滑动到边缘后是否有回弹效果。
scrollEnabled={true}//是否启用滚动
renderLoading={this.renderLoad}//返回一个加载指示器
renderError={ (e) => {//关键部分:这个出错渲染页面
return null;
}}
/>
原因分析:
https://www.jianshu.com/p/1e15a43d036f
如果webview的地址不可访问时,iOS会白屏而且双击还会缩小
如图:
fix:
renderError={(e) => {//这里判断如果加载报错 返回一个视图
if(e=="NSURLErrorDomain"){
console.log("e NSURLErrorDomain",e);
return <View style={{width:"100%",height:"100%",justifyContent:'center',alignItems:"center"}}>
<TouchableOpacity activeOpacity={0.8} onPress={this.refresh}>
<Text style={{fontSize:16,color:"#333333",}}>无法连接</Text>
</TouchableOpacity>
</View>
}else if(e=="WebKitErrorDomain"){
console.log("e WebKitErrorDomain",e);
return null;
}
console.log("e",e);
return <View/>;
}}