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设置FieldSet展开与收缩
May 15 Javascript
js定时器的使用(实例讲解)
Jan 06 Javascript
一个仿糯米弹框效果demo
Jul 22 Javascript
new Date()问题在ie8下面的处理方法
Jul 31 Javascript
JavaScript每天必学之数组和对象部分
Sep 17 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
分享十三个最佳JavaScript数据网格库
Apr 07 Javascript
JavaScript创建对象_动力节点Java学院整理
Jun 27 Javascript
Vue-cli项目获取本地json文件数据的实例
Mar 07 Javascript
vue项目设置scrollTop不起作用(总结)
Dec 21 Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 Javascript
JavaScript中跨域问题的深入理解
Mar 04 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入门学习笔记之一
2010/10/12 PHP
谷歌音乐搜索栏的提示功能php修正代码
2011/05/09 PHP
PHP使用GETDATE获取当前日期时间作为一个关联数组的方法
2015/03/19 PHP
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
2011/09/02 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
2014/09/28 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
cookie的secure属性详解
2015/04/08 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
vue v-model表单控件绑定详解
2017/05/17 Javascript
JavaScript设计模式之策略模式详解
2017/06/09 Javascript
浅谈nodejs中的类定义和继承的套路
2017/07/26 NodeJs
Vue自定义指令详解
2017/07/28 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
js实现录音上传功能
2019/11/22 Javascript
JavaScript实现简单日历效果
2020/09/11 Javascript
JavaScript实现切换多张图片
2021/01/27 Javascript
wxPython框架类和面板类的使用实例
2014/09/28 Python
python对数组进行反转的方法
2015/05/20 Python
Python中atexit模块的基本使用示例
2015/07/08 Python
详解使用pymysql在python中对mysql的增删改查操作(综合)
2017/01/18 Python
Python线性回归实战分析
2018/02/01 Python
Python 多线程不加锁分块读取文件的方法
2018/12/11 Python
Win10下python 2.7与python 3.7双环境安装教程图解
2019/10/12 Python
使用PyTorch将文件夹下的图片分为训练集和验证集实例
2020/01/08 Python
css图标制作教程制作云图标
2014/01/19 HTML / CSS
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
实习单位接收函
2014/01/11 职场文书
报告会主持词
2014/04/02 职场文书
小学生演讲稿大全
2014/04/25 职场文书
社会学专业求职信
2014/07/17 职场文书
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书
pytorch 中nn.Dropout的使用说明
2021/05/20 Python