React-Native WebView 测量网页高度
来源:互联网 发布:城觅 网络异常 编辑:程序博客网 时间:2024/06/14 20:54
React-Native(后面简称RN)在展示某些静态也页面的时候,可能需要使用WebView, WebView可以请求一个网页地址,也可以异步请求HTML文本。一般情况下我们要得到网页的宽高,传回给RN以便准确设置WebView展示宽高
原文地址(转载需注明出处)
大致步骤
- 使用WebView的
injectedJavaScript
属性注入JS代码,进行测量网页的宽高 - 设置WebView的宽高
PS:是不是很简单?哈哈哈~
先来介绍下injectedJavaScript
The injectedJavaScript is a custom prop of the React native Webview component. You can pass any JavaScript code ( as string ) to this prop, and React native will inject this JavaScript code into the Webview. The injected JavaScript will get executed once the Webview is finished loading.转自(可能需要科学上网)
injectedJavaScript
属性让注入的代码在WebView loaded时候运行一次,并只运行一次,除非你重新加载一次webView。
这个属性常用的用两种场景:
修改HTML部分属性,比如标签的颜色、字体大小什么的
const HTMLTEXT = `<p id="myContent" style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(247, 150, 70); font-size: 36px;"><strong>大佬让测试商品详情页样式啊。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(75, 172, 198);"><strong>这个怎么说呢。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(128, 100, 162);"><strong>样式还是需要解析的啊。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(155, 187, 89);"><strong>如果乱了会被运营打的啊。。<img width="100%" src="http://upload-images.jianshu.io/upload_images/6652326-afa4c73c7fca32ff.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" title="1505131159299088793.jpeg" alt="photo-1457365050282-c53d772ef8b2.jpeg"/></strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(192, 80, 77);"><strong>运营也会死的很惨啊。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(79, 129, 189);"><strong>所以让我们试一下吧。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(31, 73, 125);"><strong>如果还是不行。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(146, 205, 220);"><strong>就拿开发祭天。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(178, 162, 199);"><strong>不然。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(217, 150, 148);"><strong>还能怎么样呢。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(155, 187, 89);"><strong><img width="100%" src="http://a.36krcnd.com/nil_class/277e5abe-2f40-41a5-b465-173a551c8d63.jpg" title="1504250661662096451.png" alt="首页banner2.png"/></strong></span></p><p><span style="font-family: 宋体, SimSun; color: rgb(155, 187, 89);"></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(227, 108, 9);"><strong>再来一遍!!!</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(227, 108, 9);"></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(247, 150, 70);"><strong>大佬让测试商品详情页样式啊。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(75, 172, 198);"><strong>这个怎么说呢。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(128, 100, 162);"><strong>样式还是需要解析的啊。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(155, 187, 89);"><strong>如果乱了会被运营打的啊。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(192, 80, 77);"><strong>运营也会死的很惨啊。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(79, 129, 189);"><strong>所以让我们试一下吧。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(31, 73, 125);"><strong>如果还是不行。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(146, 205, 220);"><strong>就拿开发祭天。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(178, 162, 199);"><strong>不然。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(217, 150, 148);"><strong>还能怎么样呢。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(155, 187, 89);"></span><br/></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(155, 187, 89);"><strong><img width="100%" src="http://upload-images.jianshu.io/upload_images/3510198-c80fd2d06a801e33.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" title="1504250722330056753.png" alt="通栏1.png"/></strong></span></p><p><span style="font-family: 宋体, SimSun; color: rgb(155, 187, 89);"><strong><br/></strong></span><br/></p>` // 修改了标签id为`myContent`的背景颜色 <WebView injectedJavaScript={` document.querySelector('#myContent').style.backgroundColor = 'red'; `} style={{ width: Dimensions.get('window').width, height: this.state.height }} automaticallyAdjustContentInsets source={{ html: HTMLTEXT }} decelerationRate='normal' />
注入一些方法,做测量或者其他交互。
这个一般是需要WebView的onMessage
方法配合使用
import React, { Component } from 'react'import { WebView, Dimensions, ScrollView} from 'react-native'const BaseScript = ` (function () { var height = null; function changeHeight() { if (document.body.scrollHeight != height) { height = document.body.scrollHeight; if (window.postMessage) { window.postMessage(JSON.stringify({ type: 'setHeight', height: height, })) } } } setInterval(changeHeight, 100); } ()) `const HTMLTEXT = `<p id="myContent" style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(247, 150, 70); font-size: 36px;"><strong>大佬让测试商品详情页样式啊。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(75, 172, 198);"><strong>这个怎么说呢。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(128, 100, 162);"><strong>样式还是需要解析的啊。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(155, 187, 89);"><strong>如果乱了会被运营打的啊。。<img width="100%" src="http://upload-images.jianshu.io/upload_images/6652326-afa4c73c7fca32ff.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" title="1505131159299088793.jpeg" alt="photo-1457365050282-c53d772ef8b2.jpeg"/></strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(192, 80, 77);"><strong>运营也会死的很惨啊。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(79, 129, 189);"><strong>所以让我们试一下吧。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(31, 73, 125);"><strong>如果还是不行。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(146, 205, 220);"><strong>就拿开发祭天。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(178, 162, 199);"><strong>不然。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(217, 150, 148);"><strong>还能怎么样呢。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(155, 187, 89);"><strong><img width="100%" src="http://a.36krcnd.com/nil_class/277e5abe-2f40-41a5-b465-173a551c8d63.jpg" title="1504250661662096451.png" alt="首页banner2.png"/></strong></span></p><p><span style="font-family: 宋体, SimSun; color: rgb(155, 187, 89);"></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(227, 108, 9);"><strong>再来一遍!!!</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(227, 108, 9);"></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(247, 150, 70);"><strong>大佬让测试商品详情页样式啊。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(75, 172, 198);"><strong>这个怎么说呢。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(128, 100, 162);"><strong>样式还是需要解析的啊。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(155, 187, 89);"><strong>如果乱了会被运营打的啊。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(192, 80, 77);"><strong>运营也会死的很惨啊。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(79, 129, 189);"><strong>所以让我们试一下吧。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(31, 73, 125);"><strong>如果还是不行。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(146, 205, 220);"><strong>就拿开发祭天。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(178, 162, 199);"><strong>不然。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(217, 150, 148);"><strong>还能怎么样呢。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(155, 187, 89);"></span><br/></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(155, 187, 89);"><strong><img width="100%" src="http://upload-images.jianshu.io/upload_images/3510198-c80fd2d06a801e33.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" title="1504250722330056753.png" alt="通栏1.png"/></strong></span></p><p><span style="font-family: 宋体, SimSun; color: rgb(155, 187, 89);"><strong><br/></strong></span><br/></p>`class RZWebView extends Component { constructor (props) { super(props) this.displayName = 'RZWebView' this.state = ({ height: 0 }) } /** * web端发送过来的交互消息 */ onMessage (event) { try { const action = JSON.parse(event.nativeEvent.data) if (action.type === 'setHeight' && action.height > 0) { this.setState({ height: action.height }) } } catch (error) { // pass } } render () { return ( <ScrollView> <WebView injectedJavaScript={BaseScript} style={{ width: Dimensions.get('window').width, height: this.state.height }} automaticallyAdjustContentInsets source={{ html: HTMLTEXT }} decelerationRate='normal' scalesPageToFit javaScriptEnabled // 仅限Android平台。iOS平台JavaScript是默认开启的。 domStorageEnabled // 适用于安卓 scrollEnabled={false} onMessage={this.onMessage.bind(this)} /> </ScrollView> ) }}RZWebView.navigationOptions = { headerTitle: 'RZWebView'}export default RZWebView
额外补充:WebView 加载URI
RN中WebView都是原生控件,对网页的支持也是挺好的。直接代码了:
import React, { Component } from 'react'import { View, WebView, Dimensions} from 'react-native'class RZWebView extends Component { constructor (props) { super(props) this.displayName = 'RZWebView' } render () { return ( <View style={{ width: Dimensions.get('window').width, height: Dimensions.get('window').height - 64 }}> <WebView automaticallyAdjustContentInsets source={{ uri: 'https://rzrobert.github.io/' }} decelerationRate='normal' scalesPageToFit javaScriptEnabled // 仅限Android平台。iOS平台JavaScript是默认开启的。 domStorageEnabled // 适用于安卓 scrollEnabled /> </View> ) }}RZWebView.navigationOptions = { headerTitle: 'RZWebView'}export default RZWebView
Over,不对的地方欢迎留言指正
阅读全文
0 0
- React-Native WebView 测量网页高度
- React Native WebView自适应高度(Android、IOS平台通用)
- React Native 原生RN嵌套webView,并自适应高度
- react-native <WebView>内部网页跳转并返回上一级
- React Native Webview使用
- react native 获取键盘高度
- 【React native】Webview的使用
- React native Webview的使用
- React Native控件之WebView
- React Native学习八- WebView
- React-Native WebView控件使用
- react-native的WebView使用
- React-Native开发总结-webview
- react native测量组件的宽高
- React Native-12.React Native WebView组件详解
- React-native 获取屏幕宽度/高度/像素
- React Native 实现动态计算文本高度
- react-native之高度和宽度问题
- oracle 表管理(三)
- 移动端回到顶部
- SpringCloud微服务实战
- 36.异常
- 通信 设备
- React-Native WebView 测量网页高度
- python学习历程——抽象(day 4)
- 视频动作识别--Two-Stream Convolutional Networks for Action Recognition in Videos
- android 基于豆瓣 Api 的客户端,包含电影分类,图书分类,电影榜单,收藏功能,搜索功能。
- BCG与阿里研究院等联合揭秘中国互联网经济:成功的关键是什么?
- 自己的学习资料
- POJ
- tslib: Selected device is not a touchscreen (must support ABS and KEY event types)解决方法
- cnn网络压缩、量化和优化实现