react native 中webview内的点击事件传到外部原生调用

先说一下我使用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     }

是不是瞬间明白了。是不是很简单。吃饭去了

react native 中webview内的点击事件传到外部原生调用的更多相关文章

React Native 中 CSS 的使用
首先声明,此文原作者为黎跃春 React Native中CSS 内联样式对象样式使用Stylesheet.Create 样式拼接导出样式对象下面的代码是index.ios.js中的代码: / ...
[转] 「指尖上的魔法」 - 谈谈 React Native 中的手势
http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...
[转] 在React Native中使用ART
http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下Rea ...
react native中使用echarts
开发平台:mac pro node版本:v8.11.2 npm版本:6.4.1 react-native版本:0.57.8 native-echarts版本:^0.5.0 目标平台:android端收 ...
react native中一次错误排查 Error:Error: Duplicate resources
最近一直在使用react native中,遇到了很多的坑,同时也学习到了一些移动端的开发经验. 今天在做一个打包的测试时,遇到了一个问题,打包过程中报错“Error:Error: Duplicate ...
react native中如何往服务器上传网络图片
let common_url = 'http://192.168.1.1:8080/'; //服务器地址 let token = ''; //用户登陆后返回的token /** * 使用fetch实现 ...
react native中state和ref的使用
react native中state和ref的使用因props是只读的,页面中需要交互的情况我们就需要用到state. 一.如何使用state 1:初始化state 第一种方式: construct ...
React Native中组件的props和state
一.组件的属性(props)和状态(state) 1.属性(props) 它是组件的不可变属性(组件自己不可以自己修改props). 组件自身定义了一组props作为对外提供的接口,展示一个组件时只需 ...
react native 中的redux 理解
redux 中主要分为三大块,分别是Action Reducer 与Store. 1.Action是js的一个普通对象,是store数据的唯一来源.通过store.dispath()讲action传到 ...

随机推荐

ActiveMQ中的Destination高级特性(一)
---------------------------------------------------------------------------------------- Destination ...
SQL 删除索引错误
SQL Server 数据库执行 ”DROP INDEX 索引名 ON 表名“ 时出现“不允许对索引 '索引名' 显式地使用 DROP INDEX.该索引正用于 PRIMARY KEY 约束的强制执行 ...
RESTful API URI 设计的一些总结
非常赞的四篇文章: Resource Naming Best Practices for Designing a Pragmatic RESTful API 撰写合格的 REST API JSON 风 ...
vtkTubeFilter实例
filter that generates tubes around lines vtkTubeFilter is a filter that generates a tube around each ...
【ueditor】api方法
//让其选中文本高亮 editor.selection.getRange().select(); //高亮后,才能获取到选中文本,当选中字失去焦点的情况下是获取不到的选中文本的 var text = ...
[老文章搬家] [翻译] 深入解析win32 crt 调试堆
09 年翻译的东西. 原文见: http://www.nobugs.org/developer/win32/debug_crt_heap.html 在DeviceStudio的Debug编译模式下, ...
SVN搭建简单教程
一.引言笔者曾经试图在网上搜索一篇关于SVN源代码服务器搭建方面的中文技术文章,可惜,所找到的,要么是不完整,要么就是对笔者没什么帮助的文章,TortoiseSvn的帮助文档固然强大,但因为是英文, ...
solr基本入门
一直想接触下搜索,虽然之前也玩了下solr,但一直没深入,所以也都忘得差不多了,现在solr都6.1了,发展真快.重新拾起,记录下也好,为以后出问题查找起来快一点. 1.搜索最重要的概念就是倒排索引, ...
Java的垃圾回收和内存分配策略
本文是<深入理解Java虚拟机 JVM高级特性与最佳实践>的读书笔记在介绍Java的垃圾回收方法之前,我们先来了解一下Java虚拟机在执行Java程序的过程中把它管理的内存划分为若干个不 ...
HTML 接收本地文件
HTML代码请把文件拖到下面的框里触发drop事件读取拖放的文件常用情况:结合XMLHttpRequest和拖放文件实现上传查看和管理本地文件和图片 <!DOCTYPE HTML> < ...

react native 中webview内的点击事件传到外部原生调用

react native 中webview内的点击事件传到外部原生调用的更多相关文章

随机推荐

热门专题