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問(wèn)題
- 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'}//指定混合內(nèi)容模式。即WebView是否應(yīng)該允許安全鏈接（https）頁(yè)面中加載非安全鏈接（http）的內(nèi)容,never,always,compatibility
// onLoadEnd = {this.LoadEnd}//加載成功或者失敗都會(huì)回調(diào)
onError = {this.isConnNet}
// scalesPageToFit = {true}
// javaScriptEnabled = {true}//指定WebView中是否啟用JavaScript
onNavigationStateChange={(e) => {
this.onNavigationStateChange(e)//可以獲取標(biāo)題 url 等信息
}}
startInLoadingState={true} //強(qiáng)制WebView在第一次加載時(shí)先顯示loading視圖
// bounces={true}//指定滑動(dòng)到邊緣后是否有回彈效果。
// scrollEnabled={true}//是否啟用滾動(dòng)
renderLoading={this.renderLoad}//返回一個(gè)加載指示器
renderError={(e) => {
return <View/>;
}}
/>
3：如何查看header頭部信息
有時(shí)候使用webview需要查看發(fā)送的header信息是否正確發(fā)送，一般我們都是和后臺(tái)配合來(lái)檢驗(yàn)的。其實(shí)我們也可以自己來(lái)檢驗(yàn)，自己?jiǎn)?dòng)一個(gè)node作為服務(wù)端，然后連接本地的node服務(wù)來(lái)查看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 然后復(fù)制上面的代碼
2：打開(kāi)命令行 node ../../server.js（server.js 路徑）
3：修改webview 的source路徑 添加header信息
source={{uri: "http://localhost:9000/", headers: {name:"wuyunqiang",do:"testing"}}}
4：正常運(yùn)行應(yīng)用 打開(kāi)webview頁(yè)面 命令行顯示如下
7C5797FE-CC3E-402F-971F-632DB13C067B.png
