想要藉助`webview`動態的渲染`html`代碼,但是我html中需要用到的一些`css`或者`js`我該如何加載呢？全部寫在html中?這好像也可以,但是他呀的,這樣樣式這麼多，在加上`js`,這代碼是不是太多了？下面我們來看下如何在`RN`中加載靜態資源吧！
我這裏的只針對`Android`平臺,至於`ios`的我還沒有研究過.
1.第一步先打開android/app/src/main/assets,如果沒有assets這個文件夾,那就創建一個吧!
2.在assets中創建一個web文件夾用來放js和css文件
3.在web中創建一個index.js和index.css用於測試,具體的自己寫吧
4.修改代碼
4.1 在WebView中添加baseurl屬性:source={{ html:this.props.html,baseUrl:'file:///android_asset/web/'}}重點:file:///android_asset/web/就是我們需要的靜態資源地址.
4.2 在html中使用靜態文件，只需直接輸入文件名即可,如index.js.因爲webview中有設置baseUrl.所以會找到assets中你需要的資源並加載進來.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>內容展示</title>
</head>
<script src="index.js"></script>
<link id="mobile-style" type="text/css" rel="stylesheet" href="index.css" />
<body>
<div class="contert">
內容展示
</div>
<div class="name-box" οnclick='window.postMessage(JSON.stringify(${JSON.stringify(list[1])}))'>
11111 </div>
<div style="padding-top:50px;">
<input id='A' value="1" />
<input id='B' value="1" />
</div>
<Button id='cacl'>計算</Button> <span>AB相加爲</span><span id='sum'></span>
<div id="output">
</div>
</body>
<script>
function init(data) {
document.getElementById('output').innerHTML = JSON.stringify(data)
}
</script>
<script>
window.onload = function(){
var bt= document.getElementById('cacl');
bt.addEventListener('click',function(){
var valA = document.getElementById('A').value;
var valB = document.getElementById('B').value;
var message = JSON.stringify({
type:'add',
data:{
A:valA,
B:valB
}
})
try {
window.ReactNativeWebView.postMessage(message);
} catch (error) {
alert(error)
}
});
// 通過註冊message方式來監聽數據變化
document.addEventListener('message',function(e){
document.getElementById('sum').innerText = JSON.parse(e.data).result;
})
}
</script>
</html>
react-native 通過onMessage綁定相應的方法，
Html通過 window.ReactNativeWebView.postMessage(message);把消息發送給RN, Html在加載的時候通過： document.addEventListener('message',callback);方式來監聽RN迴轉過來的消息
RN：接收到信息後，通過：this.refs.webView.postMessage(‘’)，把消息回傳給Html
document.addEventListener('message',function(e){
document.getElementById('sum').innerText = JSON.parse(e.data).result;
})
export default class App extends Component {
handleMessage = (e) => {
var event =e.nativeEvent;
var data=JSON.parse(event.data);
if(data.type ==='add'){
let args= data.data;
let a = Number(args.A);
let b = Number(args.B);
console.log( this.refs.webView.postMessage);
// 向htnl 發送數據
this.refs.webView.postMessage(JSON.stringify({
result:a+b
}))
}
}
render () {
return (
<WebView style={styles.container} bounces={false}
ref="webView"
scalesPageToFit={true}
javaScriptEnabled={true}
automaticallyAdjustContentInsets={false}
source= {source}
onMessage={this.handleMessage}
>
</WebView>
)
}
}