1：Error loading page Domain: WebKitErrorDomain Error Code: 101 The URL can't be shown
参考：
https://github.com/wuyunqiang/ReactNativeUtil/labels/webview
1：webview添加header问题
- header中是以key:value的形式存在的并且，key中不能有"_"。
constructor(props){
super(props);
this.header = { //header中不能有"_"
'xxxxx':'testing', //right
'xxx-xxx':'native', //right
'xxx_xxx':'native', //fail
};
this.webviewParams = {};
}
<WebView
nativeConfig={
{
props: {
backgroundColor: '#ffffff',
flex: 1,
justifyContent:'center',
alignItems: 'center',
}
}
}
userAgent='MyApp'
ref = {(webview)=>{this.web = webview}}
style={{width:'100%',height:'100%',justifyContent:'center', alignItems: 'center'}}
source={{uri:this.state.destinationUrl,headers:this.header}}
onLoadStart={this.onLoadStart}
// domStorageEnabled={true}
// mixedContentMode={'always'}//指定混合内容模式。即WebView是否应该允许安全链接（https）页面中加载非安全链接（http）的内容,never,always,compatibility
// onLoadEnd = {this.LoadEnd}//加载成功或者失败都会回调
onError = {this.isConnNet}
// scalesPageToFit = {true}
// javaScriptEnabled = {true}//指定WebView中是否启用JavaScript
onNavigationStateChange={(e) => {
this.onNavigationStateChange(e)//可以获取标题 url 等信息
}}
startInLoadingState={true} //强制WebView在第一次加载时先显示loading视图
// bounces={true}//指定滑动到边缘后是否有回弹效果。
// scrollEnabled={true}//是否启用滚动
renderLoading={this.renderLoad}//返回一个加载指示器
renderError={(e) => {
return <View/>;
}}
/>
3：如何查看header头部信息
有时候使用webview需要查看发送的header信息是否正确发送，一般我们都是和后台配合来检验的。其实我们也可以自己来检验，自己启动一个node作为服务端，然后连接本地的node服务来查看header信息。
var http = require('http');
var port = 9000;
function logRequest(request) {
console.log("request headers: ", request.headers)
console.log("Processing request for: ", request.url)
console.log('Time',new Date().toString())
}
http.createServer(function(request, response) {
response.writeHead(200, {"Content-Type": "text/html"});
switch(request.url) {
case "/":
response.write("<html><body>Welcome<a href='/bye'>Bye</a></body></html>");
logRequest(request)
break;
case "/bye":
response.write("<html><body>Bye<a href='/'>Welcome</a></body></html>");
logRequest(request)
break;
default:
break;
}
response.end();
}).listen(port);
1：新建js文件取名server.js 然后复制上面的代码
2：打开命令行 node ../../server.js（server.js 路径）
3：修改webview 的source路径 添加header信息
source={{uri: "http://localhost:9000/", headers: {name:"wuyunqiang",do:"testing"}}}
4：正常运行应用 打开webview页面 命令行显示如下
7C5797FE-CC3E-402F-971F-632DB13C067B.png
网友评论