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两种function的定义介绍及区别说明
May 02 Javascript
将list转换为json失败的原因
Dec 17 Javascript
jQuery构造函数init参数分析续
May 13 Javascript
浏览器兼容的JS写法总结
Apr 27 Javascript
IE下JS保存图片的简单实例
Jul 15 Javascript
原生JS中slice()方法和splice()区别
Mar 06 Javascript
图解Javascript——作用域、作用域链、闭包
Mar 21 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
Javascript删除数组里的某个元素
Feb 28 Javascript
jquery获取input输入框中的值
Nov 13 jQuery
js实现简单点赞操作
Mar 17 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
Aug 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
手把手教你使用DedeCms V3的在线采集图文教程
2007/04/03 PHP
PHP 采集程序 常用函数
2008/12/18 PHP
Symfony2 session用法实例分析
2016/02/04 PHP
ThinkPHP框架搭建及常见问题(XAMPP安装失败、Apache/MySQL启动失败)
2016/04/15 PHP
php微信公众号开发(4)php实现自定义关键字回复
2016/12/15 PHP
js截取函数(indexOf,join等)
2010/09/01 Javascript
JavaScript之自定义类型
2012/05/04 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
2012/05/04 Javascript
js写的方法实现上传图片之后查看大图
2014/03/05 Javascript
jquery中子元素和后代元素的区别示例介绍
2014/04/02 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
2014/05/20 Javascript
JS小游戏之仙剑翻牌源码详解
2014/09/25 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
javascript数组输出的两种方式
2015/01/13 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
2019/06/12 Javascript
Vue实现跑马灯效果
2020/05/25 Javascript
原生JS实现拖拽效果
2020/12/04 Javascript
[42:23]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第二场 12.10
2020/12/13 DOTA
python远程登录代码
2008/04/29 Python
Python最长公共子串算法实例
2015/03/07 Python
Python的函数的一些高阶特性
2015/04/27 Python
Python自定义函数计算给定日期是该年第几天的方法示例
2019/05/30 Python
Pytorch 卷积中的 Input Shape用法
2020/06/29 Python
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
智能旅行箱:Horizn Studios
2018/04/30 全球购物
乌克兰电子产品和家用电器购物网站:TOUCH
2019/08/09 全球购物
南京某公司笔试题
2013/01/27 面试题
税务专业毕业生自荐信
2013/11/10 职场文书
节能减排倡议书
2014/04/15 职场文书
技术入股合作协议书
2014/10/07 职场文书
2015年教师工作总结范文
2015/03/31 职场文书
春风化雨观后感
2015/06/11 职场文书
宫崎骏十大动画电影,宫崎骏好看的动画电影排名
2022/03/22 日漫