先说一下我使用webview的时候遇到的一个功能需求
是这样的，上图中的这个页面是用h5做的，但是由于点击“我的优惠劵”是需要跳转到我原生的页面，也就是说我需要获得这个h5提供的点击事件，但是由于这个页面不是在我们本地弄的，而是在后台那边弄好，然后通过给一个h5链接，所以我们在本地是没有办法给它添加点击事件。嗯，是的，我们没有办法给它添加事件点击，但是我们没有拿到这个点击事件，我们怎么进行跳转呢。到重点了。
在react native有一个第三方的组件，是可以实现这个功能的：
react-native-webview-bridge
是的就是这个东西。这个具体怎么有哪些方法，大家可以到Github上看看，直接搜索这个就可以了，我这里只说我实现这个功能用到的一些东东。
首先，我们得将这个家伙添加到我们的项目中去
var WebViewBridge = require('react-native-webview-bridge');
然后webViewBridge就可以作为一个控件一样使用了。
'use strict';
import React, {
Component
} from 'react'; import {
AppRegistry,
StyleSheet,
View,
WebView,
} from 'react-native'; import WebViewPage from '../wiget/webViewPage'; var WebViewBridge = require('react-native-webview-bridge'); /**
* webView
* * @url 跳转的地址
*/
export default class WebViewForBridge extends Component {
constructor(props) {
super(props);
} onBridgeMessage(message) {
const {navigator} = this.props;
if (message === "coupons") {
if (navigator) {
navigator.push({
component: WebViewPage,
params: {
url: this.props.myCoupons,
title: Strings.MyCoupons,
},
});
}
}
} render() {
return (
<View style={{flex: 1}}> <WebViewBridge
ref="webViewBridge"
onBridgeMessage={this.onBridgeMessage.bind(this)}
style={styles.webViewStyle}
source={{uri: this.props.url === undefined ? DEFAULT_URL : this.props.url}}
startInLoadingState={true}
domStorageEnabled={true}
javaScriptEnabled={true}/>
</View>
);
}
} var styles = StyleSheet.create({
webViewStyle: {
backgroundColor: ‘＃f2f2f2’
}
});
soource是我显示的h5链接，因为有些东西是我们自己项目封装的，所以不方便贴出来，朋友们不要傻傻的全部复制粘贴啊，嗯好了，原生代码就写完了，当然你现在测试的话，一点用都没有，因为我们还需要改h5链接里面的代码。
我在前面弄了一张图，我下面就把h5的源代码贴出来，
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=2.0">
<title>慢钱精选小额理财-慢钱</title>
<meta name="keywords" content="小额理财、零钱理财、普惠理财、精选理财">
<meta name="description" content="慢钱独家打造，精选小额理财，优中选优，轻松实现财务*"> <script> // 百度统计
var _vds = _vds || [];
window._vds = _vds;
(function(){
_vds.push(['setAccountId', 'df10dc61bd6c48c7854b439c2dbb4295']);
(function() {
var vds = document.createElement('script');
vds.type='text/javascript';
vds.async = true;
vds.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'dn-growing.qbox.me/vds.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(vds, s);
})();
})(); var browser = {
versions: function () {
var u = navigator.userAgent, app = navigator.appVersion;
return { //移动终端浏览器版本信息
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
} var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?4fbebe5a92c9c38862e6bad7fc00d6bd";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script> <link rel="stylesheet" type="text/css" href="/static/css/mui.min.css?v=2016123481123">
<link rel="stylesheet" type="text/css" href="/static/css/manqianbao.min.css?v=2016123481123">
<link rel="stylesheet" type="text/css" href="/static/css/swiper-3.4.0.min.css?v=2016123481123">
<script src="/static/js/jquery.v2.1.1-min.js?v=2016123481123"></script>
<script src="/static/js/swiper-3.4.0.jquery.min.js?v=2016123481123"></script>
<script src="/static/js/progressbar.min.js?v=2016123481123"></script>
<script src="/static/js/common.min.js?v=2016123481123"></script>
<script src="/static/js/jquery.dateFormat.min.js?v=2016123481123"></script>
<script src="/static/js/mui.min.js?v=2016123481123"></script> <div class="opt" style="z-index: 99;"></div>
<div class="head-daohang">
<table>
<tbody>
<tr>
<td onclick="window.location.href='/'">慢钱首页</td><td onclick="window.location.href='/bao/list.html'">零钱理财</td>
</tr>
<tr>
<td onclick="window.location.href='/product/index.html'">百万理财</td><td onclick="window.location.href='http://www.manqian.cn/master.html'">金牌理财师</td>
</tr>
<tr>
<td onclick="window.location.href='http://m.toutiao.manqian.cn/'">慢钱头条</td><td onclick="window.location.href='http://www.manqian.cn/research/all_1.html'">投研中心</td>
</tr>
<tr>
<td onclick="window.location.href='http://www.manqian.cn/subject.html'">热门资讯</td><td onclick="window.location.href='/user/index.html'">个人主页</td>
</tr>
</tbody>
</table>
</div> <!----------页面共用的错误提示------------>
<div class="common-error">
<p></p>
</div>
<script> //自动隐藏的错误提示框
function ErrorOut(){
$('.common-error').fadeOut();
}
function errorTip(msg, e) {
e.stopPropagation();
$('.common-error').find('p').text(msg);
$('.common-error').show();
setTimeout(ErrorOut,3000);
}
$('.common-error').click(function(e){
e.stopPropagation();
})
$('body').click(function(){
$('.common-error').fadeOut();
}) function result(code, msg) {
var result = new Object();
result.code = code;
result.msg = msg;
return result;
}
</script> <script src="/static/js/webviewbridge.min.js?v=2016123481123" type="text/javascript"></script>
</head> <body class="f2bg"> <div class="wrap">
<div class="center-banner my-zichan-YE">
<div class="my-zichan">
<table>
<tbody>
<tr><td>资产总额(元)</td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
</div> <div class="center-menu my-zichan-YE2 mt10">
<li>账户余额(元) <em></em> <button class="zichan-tixian zichan-tixian-red" id="withdraw">提现</button></li>
<li>待收本金(元) <span></span></li>
<li>待收收益(元) <span></span></li>
</div> <div class="center-menu my-zichan-YE3 mt10">
<li class="acticveBg-gray" onclick="window.location.href='/discountCoupon/list.html'">我的优惠券<span class="mui-icon mui-navigate-right"></span></li> </div> </div> </body> <script>
$(function () {
/* $('#myCoupons').on("click", function () {
WebViewBridge.send("coupons");
});
*/
$("#withdraw").click(function(){
window.location.href="/asset/withdrawInfo.html";
});
}) </script> </html>
前面一大堆的代码不用管，只需要关注几个地方就好了，
其中一个就是这里
<script src="/static/js/webviewbridge.min.js?v=2016123481123" type="text/javascript"></script>
这个就是将这个第三方集成进来，如果不懂的朋友，可以找做js的朋友帮忙。
其次是这里
<li class="acticveBg-gray" onclick="window.location.href='/discountCoupon/list.html'">我的优惠券<span class="mui-icon mui-navigate-right"></span></li>
给这个定义一个ID，
通过ID，我们可以写一个方法
$('#myCoupons').on("click", function () {
WebViewBridge.send("coupons");
});
然后通过webViewBridge.send();发送一个字符串过去，发送什么字符串，由自己决定，我这里传递这个，是方便我识别。
好了，又回到原生页面中，
找到这一段代码
onBridgeMessage(message) {
31 const {navigator} = this.props;
32 if (message === "coupons") {
33 if (navigator) {
34 navigator.push({
35 component: WebViewPage,
36 params: {
37 url: this.props.myCoupons,
38 title: Strings.MyCoupons,
39 },
40 });
41 }
42 }
43 }
是不是瞬间明白了。是不是很简单。吃饭去了