react native与webview通信的示例代码


Posted in Javascript onSeptember 25, 2017

WebView是ReactNative中的组件 , 它可以创建一个原生的WebView,可以用于访问一个网页.

有时候我们需要在RN与WebView之间进行通信,或者进行数据传递,或者发送消息通知.这时候就要用以下知识了.

react native与webview通信的示例代码

一:WebView向RN端发送数据:

首先,我们构建一个webview:

<WebView
  ref={'webview'}
  source={require('./index.html')}
  style={{width: 375, height: 220}}
  onMessage={(e) => {
    this.handleMessage(e)
  }}
  
/>

可以看到其中有一个onMessage方法,

onMessage function

在webview内部的网页中调用window.postMessage方法时可以触发此属性对应的函数,从而实现网页和RN之间的数据交换。 设置此属性的同时会在webview中注入一个postMessage的全局函数并覆盖可能已经存在的同名实现。

网页端的window.postMessage只发送一个参数data,此参数封装在RN端的event对象中,即event.nativeEvent.data。data只能是一个字符串。

由此可见,这个方法是用来接收从Webview(也就是html)中传来数据的方法.

内部实现是对接收到的数据进行处理:

handleMessage(e) {
  this.setState({webViewData: e.nativeEvent.data});
}

e.nativeEvent.data就是从webview内部发送过来的数据.

光做这个还不 够, 这只是Rn端的处理,我们还需要在html中写一个发送数据的方法:

var data = 0;

function sendData(data) {
  if (window.originalPostMessage) {
    window.postMessage(data);
  } else {
    throw Error('postMessage接口还未注入');
  }
}
document.getElementById('button').onclick = function () {
  data += 100;
  sendData(data);
}

window.postMessage就是向RN发送数据.

二: RN向Webview发送数据:

首先定义一个发送数据的方法:

sendMessage() {
  this.refs.webview.postMessage(++this.data);
}

这步很简单 .
直接把想发送的数据作为参数写在这个方法里就好.

然后, 在html中也要有相应的接收数据的方法:

window.onload = function () {
  document.addEventListener('message', function (e) {
    document.getElementById('data').textContent = e.data;
  });

}

这就可以实现Rn与Webview之间的通信了.

之后放上源码:

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div style="text-align: center">
  <button id="button">发送数据到react native</button>
  <p style="text-align: center">收到react native发送的数据: <span id="data"></span></p>
</div>
<script>
  var data = 0;

  function sendData(data) {
    if (window.originalPostMessage) {
      window.postMessage(data);
    } else {
      throw Error('postMessage接口还未注入');
    }
  }

  window.onload = function () {
    document.addEventListener('message', function (e) {
      document.getElementById('data').textContent = e.data;
    });
    document.getElementById('button').onclick = function () {
      data += 100;
      sendData(data);
    }
  }
</script>
</body>
</html>

web.js:

/**
 * Created by 卓原 on 2017/8/17.
 * zhuoyuan93@gmail.com
 */
import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  WebView
} from 'react-native';

export default class Web extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      webViewData: ''
    }
    this.data = 0;
  }

  sendMessage() {
    this.refs.webview.postMessage(++this.data);
  }

  handleMessage(e) {
    this.setState({webViewData: e.nativeEvent.data});
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={{width: 375, height: 220}}>
          <WebView
            ref={'webview'}
            source={require('./index.html')}
            style={{width: 375, height: 220}}
            onMessage={(e) => {
              this.handleMessage(e)
            }}

          />

        </View>
        <Text>来自webview的数据 : {this.state.webViewData}</Text>
        <Text onPress={() => {
          this.sendMessage()
        }}>发送数据到WebView</Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 22,
    backgroundColor: '#F5FCFF',
  },

});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 使用手册(六)
Sep 23 Javascript
Jquery ThickBox插件使用心得(不建议使用)
Sep 08 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
Oct 01 Javascript
js图片延迟加载的实现方法及思路
Jul 22 Javascript
用Javascript获取页面元素的具体位置
Dec 09 Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 Javascript
JS判断页面是否出现滚动条的方法
Jul 17 Javascript
jQuery基础_入门必看知识点
Jul 04 Javascript
JavaScript中函数声明与函数表达式的区别详解
Aug 18 Javascript
js严格模式总结(分享)
Aug 22 Javascript
微信小程序HTTP请求从0到1封装
Sep 09 Javascript
js Math数学简单使用操作示例
Mar 13 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
Sep 25 #Javascript
vuex中使用对象展开运算符的示例
Sep 25 #Javascript
Three.js利用性能插件stats实现性能监听的方法
Sep 25 #Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 #Javascript
Three.js入门之hello world以及如何绘制线
Sep 25 #Javascript
es6系列教程_ Map详解以及常用api介绍
Sep 25 #Javascript
简单谈谈js的数据类型
Sep 25 #Javascript
You might like
PHP删除非空目录的函数代码小结
2013/02/28 PHP
浅析PHP文件下载原理
2014/12/25 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
15款优秀的jQuery导航菜单插件分享
2011/07/19 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
Jquery中val()表单取值赋值的实例代码
2013/08/15 Javascript
javascript 用函数实现继承详解
2016/05/28 Javascript
利用VUE框架,实现列表分页功能示例代码
2017/01/12 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
2018/06/11 Javascript
nodejs使用async模块同步执行的方法
2019/03/02 NodeJs
Openlayers实现地图全屏显示
2020/09/28 Javascript
[02:57]DOTA2英雄基础教程 风行者
2014/01/16 DOTA
Python3中的2to3转换工具使用示例
2015/06/12 Python
基础的十进制按位运算总结与在Python中的计算示例
2016/06/28 Python
用virtualenv建立多个Python独立虚拟开发环境
2017/07/06 Python
关于Python 3中print函数的换行详解
2017/08/08 Python
python使用正则表达式替换匹配成功的组并输出替换的次数
2017/11/22 Python
python实现决策树分类(2)
2018/08/30 Python
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
Python自动化导出zabbix数据并发邮件脚本
2019/08/16 Python
python爬虫 猫眼电影和电影天堂数据csv和mysql存储过程解析
2019/09/05 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
德国宠物用品、宠物食品及水族馆网上商店:ZooRoyal
2017/07/09 全球购物
智能钱包:Ekster
2019/11/21 全球购物
Booking.com缤客中国:全球酒店在线预订网站
2020/05/03 全球购物
俄罗斯第一家多品牌在线奢侈品精品店:Aizel.ru
2020/09/06 全球购物
幼儿园运动会入场词
2014/02/10 职场文书
工商企业管理应届生求职信
2014/05/04 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
创意婚礼策划方案
2014/05/18 职场文书
电子专业毕业生自荐信
2014/05/25 职场文书
民政局离婚协议书范本
2014/10/20 职场文书
教你怎么用python selenium实现自动化测试
2021/05/27 Python
Redis+Lua脚本实现计数器接口防刷功能(升级版)
2022/02/12 Redis