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 相关文章推荐
js读取本地excel文档数据的代码
Nov 11 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
Jun 15 Javascript
一个可拖拽列宽表格实例演示
Nov 26 Javascript
简单实用jquery版三级联动select示例
Jul 04 Javascript
jQuery :first选择器使用介绍
Aug 09 Javascript
JS获取浏览器语言动态加载JS文件示例代码
Oct 31 Javascript
深入理解ES6的迭代器与生成器
Aug 19 Javascript
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
在vue组件中使用axios的方法
Mar 16 Javascript
深入浅出vue图片路径的实现
Sep 04 Javascript
详解小程序BackgroundAudioManager踩坑之旅
Dec 08 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 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中include()与require()的区别说明
2010/03/10 PHP
PHPEXCEL 使用小记
2013/01/06 PHP
php中 $$str 中 &quot;$$&quot; 的详解
2015/07/06 PHP
JavaScript 对象成员的可见性说明
2009/10/16 Javascript
JavaScript Eval 函数使用
2010/03/23 Javascript
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
2013/12/10 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
2014/12/10 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
JavaScript中闭包的写法和作用详解
2016/06/29 Javascript
jQuery 如何实现一个滑动按钮开关
2016/12/01 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
2017/02/10 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
prototype.js简单实现ajax功能示例
2017/10/18 Javascript
vue中动态绑定表单元素的属性方法
2018/02/23 Javascript
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
Python中跳台阶、变态跳台阶与矩形覆盖问题的解决方法
2018/05/19 Python
对python程序内存泄漏调试的记录
2018/06/11 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
Python 文件操作之读取文件(read),文件指针与写入文件(write),文件打开方式示例
2019/09/29 Python
简单了解python字符串前面加r,u的含义
2019/12/26 Python
python 爬取古诗文存入mysql数据库的方法
2020/01/08 Python
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
卡塔尔航空官方网站:Qatar Airways
2017/02/08 全球购物
怎样建立和理解非常复杂的声明?例如定义一个包含N 个指向返回 指向字符的指针的函数的指针的数组?
2013/03/19 面试题
运动会开幕式邀请函
2014/01/22 职场文书
5.12护士节演讲稿
2014/04/30 职场文书
2014年保安个人工作总结
2014/11/13 职场文书
师德承诺书
2015/01/20 职场文书
高中生军训感言
2015/08/01 职场文书
2016年优秀团员事迹材料
2016/02/25 职场文书
XX部保密工作制度范本
2019/08/27 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS