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之dhDataGrid Ver2.0.0代码
Jul 01 Javascript
javascript 必知必会之closure
Sep 21 Javascript
详解jQuery中的元素的属性和相关操作
Aug 14 Javascript
JQuery validate插件Remote用法大全
May 15 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
May 18 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
Feb 09 Javascript
利用Three.js如何实现阴影效果实例代码
Sep 26 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
微信小程序实现上传图片功能
May 28 Javascript
纯javascript实现选择框的全选与反选功能
Apr 08 Javascript
基于VUE实现判断设备是PC还是移动端
Jul 03 Javascript
node.js基础知识汇总
Aug 25 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入门的学习方法
2007/01/02 PHP
PHP 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
php多层数组与对象的转换实例代码
2013/08/05 PHP
十大使用PHP框架的理由
2015/09/26 PHP
php实现文件管理与基础功能操作
2017/03/21 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
使用jquery插件qrcode生成二维码
2015/10/22 Javascript
理解jquery事件冒泡
2016/01/03 Javascript
JS组件Bootstrap实现下拉菜单效果代码
2016/04/26 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
javascript验证内容为数字以及长度为10的简单实例
2016/08/20 Javascript
基于ajax与msmq技术的消息推送功能实现代码
2016/12/26 Javascript
详谈jQuery.load()和Jsp的include的区别
2017/04/12 jQuery
nodejs模块学习之connect解析
2017/07/05 NodeJs
layui select获取自定义属性方法
2018/08/15 Javascript
[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python 自动安装 Rising 杀毒软件
2009/04/24 Python
闭包在python中的应用之translate和maketrans用法详解
2014/08/27 Python
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
对Python Class之间函数的调用关系详解
2019/01/23 Python
Flask教程之重定向与错误处理实例分析
2019/08/01 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
Python MySQL 日期时间格式化作为参数的操作
2020/03/02 Python
解决jupyter运行pyqt代码内核重启的问题
2020/04/16 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
Steve Madden官网:美国鞋类品牌
2017/01/29 全球购物
Sephora丝芙兰菲律宾官方网站:购买化妆品和护肤品
2017/04/05 全球购物
美国滑板店:Tactics
2020/11/08 全球购物
事业单位请假制度
2014/01/13 职场文书
竞选学生会主席演讲稿
2014/04/24 职场文书
班主任高考寄语
2015/02/26 职场文书
教师师德表现自我评价
2015/03/05 职场文书
鸡毛信观后感
2015/06/11 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书
用Python进行栅格数据的分区统计和批量提取
2021/05/27 Python