react native与webview通信的示例代码
WebView是ReactNative中的组件 , 它可以创建一个原生的WebView，可以用于访问一个网页.
有时候我们需要在RN与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',
},
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
深入理解React Native原生模块与JS模块通信的几种方式
每种语言都有自己的设计理念.语法.运行环境,这也导致了不同语言间相互交流通信时必须要有中介来翻译,如JAVA与C/C++通过JNI来交流.OC与C/C++需要在.mm文件混编.而JAVA/OC与Lua通信时需要通过C/C++语言来做中介.那么在React-Native中JSX是如何与底层模块进行通信的呢?这里主要以iOS系统来做说明. 原理 通信本质上是信息的交流,具体到计算机语言则是数据的流动.应用中数据在React-Native与原生模块间的流动与共享,完成了与用户的交互,达成了应用的目标.
-
详解React native全局变量的使用(跨组件的通信)
RN中有两种方式使用全局变量 1.通过导入导出文件的方式 新建constants.js文件 const object = { website:'http://www.hao123.com', name:'好123', }; export default object; 需要用到的时候导入文件 import constants from './constansts.js' <Text>{constants.name}</Text> 还可以有另外一种导入文件的写法 export def
-
Android React-Native通信数据模型分析
无论是计算机领域还是日常生活中,我们所言的通信,其核心都是数据信息的交换,而数据模型的优劣对通信效率有着决定性的作用. 在React-Native项目中,Javascript语言与Native两种语言(Java或OC等)间存在着大量的数据交换,也就是所谓的通信.众所周知,移动APP对性能的要求无比苛刻,如果通信数据模型设计地不合理,很可能引起多线程下的数据安全问题,以及应用性能问题,比如内存泄漏,UI绘制缓慢等. 前面几篇博客我们详细分析过React-Native的通信机制,主要有两个方向: J
-
Android React Native原生模块与JS模块通信的方法总结
Android React Native原生模块与JS模块通信的方法总结 前言: 在做React Native开发的时候避免不了的需要原生模块和JS之间进行数据传递,这篇文章将向大家分享原生模块向JS传递数据的几种方式. 方式一:通过Callbacks的方式 说起Callbacks大家都不陌生,它是最常用的设计模式之一.无论是Java,Object-c,C#,还是JavaScript等都会看到Callbacks的身影. 原生模块支持Callbacks类型的参数,该Callbacks对应JS中的f
-
react native与webview通信的示例代码
WebView是ReactNative中的组件 , 它可以创建一个原生的WebView,可以用于访问一个网页. 有时候我们需要在RN与WebView之间进行通信,或者进行数据传递,或者发送消息通知.这时候就要用以下知识了. 一:WebView向RN端发送数据: 首先,我们构建一个webview: <WebView ref={'webview'} source={require('./index.html')} style={{width: 375, height: 220}} onMessage
-
React Native悬浮按钮组件的示例代码
React Native悬浮按钮组件:react-native-action-button,纯JS组件,支持安卓和IOS双平台,支持设置子按钮,支持自定义位置和样式和图标. 效果图 安装方法 npm i react-native-action-button --save react-native link react-native-vector-icons 因为用到了react-native-vector-icons图标组件,需要做下link.如果你项目中已经使用了react-native-ve
-
React Native日期时间选择组件的示例代码
React Native日期时间选择组件:react-native-datepicker,支持安卓和IOS双平台,支持单独选择日期.单独选择时间和选择日期和时间,支持自定义日期格式. 效果图 安装方法 npm install react-native-datepicker --save 示例代码 <Text style={styles.instructions}>time: {this.state.time}</Text> <DatePicker style={{width:
-
React Native 截屏组件的示例代码
React Native 截屏组件:react-native-view-shot,可以截取当前屏幕或者按照当前页面的组件来选择截取,如当前页面有一个图片组件,一个View组件,可以选择截取图片组件或者View组件.支持iOS和安卓. 安装方法 npm install react-native-view-shot react-native link react-native-view-shot 使用示例 captureScreen() 截屏方法 截取当前屏幕,跟系统自带的截图一致,只会截取当前屏幕
-
React Native JSI实现RN与原生通信的示例代码
目录 什么是JSI JSI有什么不同 在iOS中使用JSI iOS端配置 RN端配置 js调用带参数的原生方法 原生调用JS 原生调用带参数的JS方法 在原生端调用js的函数参数 总结 问题 参考资料 什么是JSI React Native JSI (JavaScript Interface) 可以使 JavaScript 和 原生模块 更快.更简单的通信.它也是React Native 新的架构体系中Fabric UI层 和 Turbo 模块的核心部分. JSI有什么不同 JSI 移除了原生代
-
Qt实现UDP通信的示例代码
目录 服务器端-单线程 客户端 测试结果-单线程 服务器端-多线程 测试结果-多线程 设想有如下场景:若干的客户端与服务器端建立连接,建立连接后,服务器端随机发送字符串给客户端,客户端打印输出.该节案例使用TCP编程. 服务器端-单线程 头文件 #pragma once // //tcp服务端-单线程处理客户端连接 #include <QAbstractSocket> #include <QObject> class QTcpServer; class SimpleTcpSocke
-
React 实现拖拽功能的示例代码
本文介绍了React 实现拖拽功能的示例代码,分享给大家,具体如下: 实现效果: 因为工作中会用到 JIRA 所以想实现一下相似的功能,顺便学习一下 H5 的拖拽.不支持拖拽改变顺序,感觉有点麻烦,而且没必要.感觉相关的博文好少的,大部分都是直接上代码,没有解释. 图片默认可以拖动,其他元素的拖动效果同图片.正常的 div 是不能被拖动的,鼠标点击选择后移动没有效果,需要加 draggable="true" 使得元素可以被拖动. 拖拽相关的几个事件,有被拖动元素的事件,也有拖动进入的
-
react native 仿微信聊天室实例代码
一.前言 9月,又到开学的季节.为每个一直默默努力的自己点赞!最近都沉浸在react native原生app开发中,之前也有使用vue/react/angular等技术开发过聊天室项目,另外还使用RN技术做了个自定义模态弹窗rnPop组件. 一.项目简述 基于react+react-native+react-navigation+react-redux+react-native-swiper+rnPop等技术开发的仿微信原生App界面聊天室--RN_ChatRoom,实现了原生app启动页.As
-
React实现登录表单的示例代码
作为一个Vue用户,是时候扩展一下React了,从引入antd.配置less.router,终于实现了一个简单的登录表单. 代码如下: import React from 'react'; import { Input, Button, message } from "antd"; import { UserOutlined, LockOutlined, EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons'; impor
-
python实现socket简单通信的示例代码
首先先来简单介绍下socket: (具体更详细介绍的可以在网上找找,都讲得非常详细),这里主要是我自己的一些理解. socket是在应用层与传输层之间的一个抽象层,它的本质是编程接口,通过socket,才能实现TCP/IP协议. 它就是一个底层套件,用来处理最底层消息的接受和发送. socket翻译为套接字,可以把TCP/IP复杂的操作抽象为简单的几个接口来供应用层调用来实现进程在网络中的通信.socket起源于Unix,而Unix的基本要素之一就是"一切都为文件",即可以通过打开--