rn webview 显示html,Rn webview deal with H5 html

H5

计算 AB相加为

var bt= document.getElementById('cacl');

bt.addEventListener('click',function(){

var valA = document.getElementById('A').value;

var valB = document.getElementById('B').value;

window.postMessage(JSON.stringify({

type:'add',

data:{

A:valA,

B:valB

}

}))

});

document.addEventListener('message',function(e){

document.getElementById('sum').innerText = JSON.parse(e.data).result;

})

RN code

export default class RNWebbViewMessage extends Component {

constructor(props){

super(props);

this.onMessage = this.onMessage.bind(this);

}

onMessage(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);

this.refs.webviewRef.postMessage(JSON.stringify({

result:a+b

}))

}

}

render() {

return (

);

}

}

So in general ,we found method how to fetch message between RN.webview and html.

1.HTML:Use 'window.postMessage' to post message , fetch message from that method named 'document.addEventListener('message',callback)'.

2.RN:Use that method named 'onMessage' to fetch message from web via nativeEvent.data, also can use postMessage to web .