热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

关于RN与webview的简单通信

1.RN向webview传值,js页面importReact,{Component}fromreact;import{Text,View,WebView,Style

1.RN向webview传值,js页面

import React, { Component } from 'react';
import {Text,View,WebView,StyleSheet,AppRegistry,TouchableOpacity,
} from'react-native';
export default class MyWeb extends Component {constructor(props){super(props);this.state={webstring:''}}handleMessage(){const message = 'hello web 199!';this.webview.postMessage(message);//通过handleMessage向RN传递字符串Message,若写成ref="wbview",这里写成this.refs.webview.postMessage(message)}render(){return ({this.state.webstring}简单的网页{ this.webview = webview;}} //或者可以写成:ref="webview"source={require('./html/aa.html')}>);}
}
var styles =StyleSheet.create({webview:{backgroundColor:'#ffffff',}
});
html页面:







Click on the header to alert its value



2.webview向RN传值,js页面

import React, { Component } from 'react';
import {Text,View,WebView,StyleSheet,AppRegistry,TouchableOpacity,
} from'react-native';
export default class MyWeb extends Component {constructor(props){super(props);this.state={webstring:''}}render(){return ({this.state.webstring}简单的网页{ this.webview = webview;}}source={require('./html/aa.html')}onMessage={(event)=>{this.setState({webstring:event.nativeEvent.data})}}//通过这个函数接受webview传来的值>);}
}
var styles =StyleSheet.create({webview:{backgroundColor:'#ffffff',}
});
html页面:






This is a header


Click on the header to alert its value













推荐阅读
  • 本文详细介绍了如何在Android 4.4及以上版本中配置WebView以实现内容的自动高度调整和屏幕适配,确保中文显示正常,并提供代码示例。 ... [详细]
  • 本文将深入探讨如何在不依赖第三方库的情况下,使用 React 处理表单输入和验证。我们将介绍一种高效且灵活的方法,涵盖表单提交、输入验证及错误处理等关键功能。 ... [详细]
  • 本文介绍如何通过 JavaScript 实现一个基于鼠标坐标的 Tooltip 弹出层,详细解释了如何获取窗口和文档的尺寸及滚动位置,并优化了代码结构。 ... [详细]
  • 本文介绍如何使用 Android 的 Canvas 和 View 组件创建一个简单的绘图板应用程序,支持触摸绘画和保存图片功能。 ... [详细]
  • 在进行微信小程序开发过程中,遇到了需要实现类似微信朋友圈那样的长文本折叠功能的需求。本文将详细探讨其实现方法及注意事项。 ... [详细]
  • 如何在UIWebView中加载本地图片
    本文详细介绍了如何在UIWebView中加载本地图片的方法,这对于需要在应用内展示静态页面和富文本内容的场景非常有用。 ... [详细]
  • 本文将介绍网易NEC CSS框架的规范及其在实际项目中的应用。通过详细解析其分类和命名规则,探讨如何编写高效、可维护的CSS代码,并分享一些实用的学习心得。 ... [详细]
  • 本文详细探讨了 Django 的 ORM(对象关系映射)机制,重点介绍了其如何通过 Python 元类技术实现数据库表与 Python 类的映射。此外,文章还分析了 Django 中各种字段类型的继承结构及其与数据库数据类型的对应关系。 ... [详细]
  • 本文详细介绍了在企业级项目中如何优化 Webpack 配置,特别是在 React 移动端项目中的最佳实践。涵盖资源压缩、代码分割、构建范围缩小、缓存机制以及性能优化等多个方面。 ... [详细]
  • 本文介绍了Android开发中Intent的基本概念及其在不同Activity之间的数据传递方式,详细展示了如何通过Intent实现Activity间的跳转和数据传输。 ... [详细]
  • 本文详细介绍超文本标记语言(HTML)的基本概念与语法结构。HTML是构建网页的核心语言,通过标记标签描述页面内容,帮助开发者创建结构化、语义化的Web页面。 ... [详细]
  • 本文详细探讨了HTML表单中GET和POST请求的区别,包括它们的工作原理、数据传输方式、安全性及适用场景。同时,通过实例展示了如何在Servlet中处理这两种请求。 ... [详细]
  • 本文探讨了在使用Selenium进行自动化测试时,由于webdriver对象实例化位置不同而导致浏览器闪退的问题,并提供了详细的代码示例和解决方案。 ... [详细]
  • JavaScript 基础语法指南
    本文详细介绍了 JavaScript 的基础语法,包括变量、数据类型、运算符、语句和函数等内容,旨在为初学者提供全面的入门指导。 ... [详细]
  • 本文介绍了使用不同工具和方法来查看设置了密码保护的易语言源码的方法。不仅限于特定浏览器,还提供了使用Chrome等主流浏览器的解决方案。 ... [详细]
author-avatar
手机用户2502877197
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有