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 相关文章推荐
javascript下arguments,caller,callee,call,apply示例及理解
Dec 24 Javascript
轻量级 JS ToolTip提示效果
Jul 20 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
Apr 27 Javascript
javascript 拖动表格行实现代码
May 05 Javascript
JavaScript 原型继承之构造函数继承
Aug 26 Javascript
jQuery 拖动层(在可视区域范围内)
May 24 Javascript
javascript常用对话框小集
Sep 13 Javascript
快速掌握Node.js环境的安装与运行方法
Feb 16 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 Javascript
JS监控关闭浏览器操作的实例详解
Sep 12 Javascript
Vue 进阶之路(三)
Apr 18 Javascript
sortable+element 实现表格行拖拽的方法示例
Jun 07 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 超链接 抓取实现代码
2009/06/29 PHP
PHP 多维数组的排序问题 根据二维数组中某个项排序
2011/11/09 PHP
php导出CSV抽象类实例
2014/09/24 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
Win7环境下Apache连接MySQL提示连接已重置的解决办法
2017/05/09 PHP
Javascript 不能释放内存.
2006/09/07 Javascript
Jquery 学习笔记(一)
2009/10/13 Javascript
extjs之去除s.gif的影响
2010/12/25 Javascript
javascript实现动态加载CSS
2015/01/26 Javascript
nodejs爬虫抓取数据乱码问题总结
2015/07/03 NodeJs
论JavaScript模块化编程
2016/03/07 Javascript
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
AngularJs IE Compatibility 兼容老版本IE
2016/09/01 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
D3.js中强制异步文件读取同步的几种方法
2017/02/06 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
Python随机生成数模块random使用实例
2015/04/13 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
使用python3调用wxpy模块监控linux日志并定时发送消息给群组或好友
2019/06/05 Python
Python使用百度翻译开发平台实现英文翻译为中文功能示例
2019/08/08 Python
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
应届大专毕业生个人自荐信
2013/09/22 职场文书
英语专业推荐信
2013/11/16 职场文书
防汛工作情况汇报
2014/10/28 职场文书
小学教育见习报告
2014/10/31 职场文书
分居协议书范本
2014/11/03 职场文书
小学生红领巾广播稿
2015/08/19 职场文书
导游词之天下银坑景区
2019/11/21 职场文书
导游词之沈阳植物园
2019/11/30 职场文书
Java Socket实现多人聊天系统
2021/07/15 Java/Android