reactnative利用webvView嵌入h5页面以及RN与webView的通信教程
前言：这边主要是记录下，在react native中如何使用h5页面，以及h5页面发生点击，或者跳转到react native时，如何与react native进行通信。
一、react native中的webview
1、为什么要用webview页面。
我这边用webview是因为用rn来写页面，速度实在是感人。而且rn里面的样式没有css那么全面。如果要做弹出层等，还需要使用rn的组件。实在是麻烦。所以就选择用webview做h5页面。
2、关于webview的详细介绍：
二、webview在rn中的使用
1、在页面顶部引入webview组件
import{
view,
scrollview,
image,
text,
webview,
} from 'react-native';
2、引入组件之后，在页面中使用webview引入h5的页面
__detail_webview(){
/*
* scrollenabled:是否允许滚动
* javascriptenabled 是否允许插入js代码到webview里面
* injectedjavascript 插入到webview的
标签中的js代码 * onmessage:获取webview传过来的数据 * source:这个部分可以是webview页面的url，也可以是直接的html代码 * */ let it = this; let {params} = it.props.navigation.state; let webview_style = {height: it.state.webview_h,width: gscreen.width}; return (
这部分使用的是部分webview的属性。具体的请看注释，都大致解释了一下是干嘛的。在source部分引入可访问的h5页面的链接之后，我们需要渲染视图。
3、渲染视图
//在页面中调用__detail_webview方法，渲染页面
__render() {
return this.__detail_webview();
}
4、显示h5页面
到这里，我们写好的h5页面就已经在rn中显示出来了。主要还是引链接的问题。如果需要往这个页面传参数，我们直接在webview的source中传递参数即可。
三、webview与react native的通信
1、实现react native和webview的通信，我们需要先了解h5解决跨域的全局函数。
postmessage()方法 onmessage()方法
建议大家去百度查一下，先做个了解。这样就知道我们是要通过什么实现通信了。
2、比如我们在webview页面中，也就是新增地址这里，我们加一个点击事件，然后需要返回给react native一个路由字符串，供我们跳转。
3、webview中的点击事件代码：
<script type="text/javascript">
function add_address() {
var route = 'smart';
var type = 'set_route';
var obj = {
"type": type,
"route": route,
};
console.log("obj");
console.log(obj);
window.postmessage(
json.stringify(obj)
);
}
</script>
这里是点击之后，我们通过postmessage（）方法，传递两个参数。一个是type值，是我们做判断时候用的。判断是哪种类型的消息。另一个是我们想传递的其他参数。这里记得参数传递前做一次：json.stringfy()方法，解析json字符串。
4、react native中获取postmessage()传过来的数据
//这个方法就是我们在最上面，给webview加的onmessage属性调用的方法
msg_from_webview_h(event) {
let it = this.p; // 视图指针
//使用json.parse()获取传过来的数据
let get_data = json.parse(event.nativeevent.data);
console.log('get_data:');
console.log(get_data);
//判断type值是不是我们想要的type值
if(get_data.type === 'set_route'){
let str ="获取到的route信息："+ json.stringify(get_data);
//这里是一个小弹窗组件，弹出我们postmessage()方法传过来的数据，看看是不是我们想要的数据。
toastmodule.run(str, 0);
return false;
}
}
5、点击“添加地址”，看看react native有没有和webview通信成功
如图所示，点击之后，我们弹出了我们想要的消息。接下来就是根据自己的业务逻辑来处理弹出来的数据了。通信成功。
夜深了，越来越熬不住，老了老了。
end