react native学习笔记14——WebView的使用及与html通信
来源:互联网 发布:c语言写的小软件代码 编辑:程序博客网 时间:2024/05/24 04:40
加载一个在线网页
下例是一个最简单的WebView的使用,给定一个url网址,用WebView加载渲染出来。
import React, { Component } from 'react';import { WebView } from 'react-native';export default class WebViewSimpleDemo extends Component { render() { return ( <WebView source={{uri: 'http://blog.csdn.net/column/details/17061.html'}} /> ); }}
效果图:
通常项目中使用WebView并不是简单的加载一个静态网页,例如显示一个加载页,提供一个统一的加载失败页,webview如何与rn双向通讯等。为了能完成上述需求,我们还需要学习WebView的基本属性和方法。
基本属性
headers: object, body: string},
{html: string, baseUrl: string}, number 在WebView中载入一段静态的html代码或是一个url(还可以附带一些 header 选项) automaticallyAdjustContentInsets bool 设置是否自动调整内容。 contentInset {top:number,left:number,
bottom:number,right:number} 设置网页内嵌边距。 startInLoadingState bool 在第一次加载时是否显示loading视图。默认true。 bounces(iOS) bool 指定滑动到边缘后是否有回弹效果。默认true。 scalesPageToFit(iOS) bool 设置是否要把网页缩放到适应视图的大小,以及是否允许用户改变缩放比例。 scrollEnabled(iOS) bool 设置是否开启页面滚动。 domStorageEnabled(Android) bool 是否开启DOM存储。 javaScriptEnabled(Android) bool 是否开启 JavaScript,在 iOS 中的 WebView 是默认开启的。
基本方法
根据上面介绍的基本属性方法,我们在加载WebView中增加加载中和加载失败的页面显示。
<WebView source={{uri: 'http://blog.csdn.net/column/details/17061.html'}} renderError={() => { console.log('renderError') return <View><Text>renderError</Text></View> }} renderLoading={() => { return <View><Text>自定义Loading...</Text></View> }} />
renderError加载错误时会回调该函数,显示该函数返回的View。使用此方法我们可以自定义加载错误时的提示信息。
类似的renderLoading可以自定义加载显示的view。
加载本地静态html文件
import React, { Component } from 'react';import { WebView } from 'react-native';export default class WebViewSimpleDemo extends Component { render() { return ( <WebView source={require('./helloworld.html')} /> ); }}
helloworld.html
<!DOCTYPE html><html> <head> <title>Hello World</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=320, user-scalable=no"> <style type="text/css"> body { margin: 0; padding: 0; font: 62.5% arial, sans-serif; background: #ccc; } h1 { padding: 45px; margin: 0; text-align: center; color: #f33; } </style> </head> <body> <h1>hello world!</h1> </body></html>
效果图:
React Native与Html通信
React Native向html发数据——postMessage
React Native向html发送数据可以通过postMessage方法实现。
- React Native端
设置WebView的ref属性,将组件view作为参数赋值给了this.webview
<WebView ref={(webview) => this.webview = webview} source={require('./messaging.html')} />
然后可通过postMessage方法从React Native向html发送数据
this.webview.postMessage('我是React Native发送过来的数据');
- html端
html端接收React Native消息的处理:
var messagesReceivedFromReactNative = 0; document.addEventListener('message', function(e) { messagesReceivedFromReactNative += 1; document.getElementsByTagName('p')[0].innerHTML = '从React Native接收的消息: ' + messagesReceivedFromReactNative; document.getElementsByTagName('p')[1].innerHTML = e.data; });
React Native接收html发过来的数据——onMessage
React Native接收html发过来的数据可以通过onMessage方法实现。
- html端
html端通过调用window.postMessage给React Native发送数据。
document.getElementsByTagName('button')[0].addEventListener('click', function() { window.postMessage('这是html发送到RN的消息'); });
- React Native端
当有html发送数据过来时会触发WebView的onMessage,在onMessage中处理接收到的数据。
<WebView ref={(webview) => this.webview = webview} source={require('./messaging.html')} onMessage={this._onMessage} /> //接收HTML发出的数据 _onMessage = (e) => { Alert.alert(e.nativeEvent.data); }
效果图
React Native与Html通信的完整代码在Github
阅读全文
0 0
- react native学习笔记14——WebView的使用及与html通信
- 关于 React Native 与 WebView 的通信
- 【React native】Webview的使用
- React native Webview的使用
- react-native的WebView使用
- react native学习笔记9——引入第三方组件和react-navigation的使用
- react native学习笔记10——react-navigation的嵌套使用
- react-native navigation的学习与使用
- React-Native PanResponder的学习与使用
- react-native Modal的学习与使用
- React Native Webview使用
- React Native与WebView的交互
- React-native 之WebView的使用
- React Native 与iOS的通信
- React Js 与 Native 之间的通信
- React Native学习八- WebView
- React-Native WebView控件使用
- react native 学习笔记----使用Android的原生模块
- LINQ的左连接、右连接、内连接
- Spring框架之IoC容器—AutowireCapableBeanFactory接口
- Windows Server 2008 R2 开启Win7主题效果Aero
- 微信公众号获取一键关注链接
- 生成的csv文件,不能自动分列
- react native学习笔记14——WebView的使用及与html通信
- 在Java路上,我看过的一些书、源码和框架(转)
- ST17H26读ID卡调试过程
- Distilling the Knowledge in a Neural Network 阅读笔记
- WebView match_parent wrap_content 无法显示,或显示特别小
- Java运行时异常和非运行时异常
- 待机、休眠、睡眠
- 剑指offer 矩形覆盖
- 使用IntelliJ IDEA来搭建一个简单的Web项目