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 = ` id="myContent" style="text-align:"& style="font-family: 宋体, SimS color: rgb(247, 150, 70); font-size: 36"&&大佬让测试商品详情页样式啊。。&&& style="text-align:"& style="font-family: 宋体, SimS color: rgb(75, 172, 198);"&&这个怎么说呢。。&&& style="text-align:"& style="font-family: 宋体, SimS color: rgb(128, 100, 162);"&&样式还是需要解析的啊。。&&& style="text-align:"& style="font-family: 宋体, SimS color: rgb(155, 187, 89);"&&如果乱了会被运营打的啊。。 width="100%" src="http://upload-images.jianshu.io/upload_images/6652326-afa4c73c7fca32ff.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" title="9088793.jpeg" alt="photo-2-c53d772ef8b2.jpeg"/&&&& style="text-align:"& style="font-family: 宋体, SimS color: rgb(192, 80, 77);"&&运营也会死的很惨啊。。&&& style="text-align:"& style="font-family: 宋体, SimS color: rgb(79, 129, 189);"&&所以让我们试一下吧。。&&& style="text-align:"& style="font-family: 宋体, SimS color: rgb(31, 73, 125);"&&如果还是不行。。&&& style="text-align:"& style="font-family: 宋体, SimS color: rgb(146, 205, 220);"&&就拿开发祭天。。&&& style="text-align:"& style="font-family: 宋体, SimS color: rgb(178, 162, 199);"&&不然。。&&& style="text-align:"& style="font-family: 宋体, SimS color: rgb(217, 150, 148);"&&还能怎么样呢。。&&& style="text-align:"& style="font-family: 宋体, SimS color: rgb（155, 187, 89）;"&& width="100%" src="/nil_class/277e5abe-2f40-41a5-b465-173a551c8d63.jpg" title="2096451.png" alt="首页banner2.png"/&&&&& style="font-family: 宋体, SimS color: rgb（155, 187, 89）;"&&& style="white-space: text-align:"& style="font-family: 宋体, SimS color: rgb（227, 108, 9）;"&&再来一遍！！！&&& style="white-space: text-align:"& style="font-family: 宋体, SimS color: rgb（227, 108, 9）;"&&& style="white-space: text-align:"& style="font-family: 宋体, SimS color: rgb(247, 150, 70);"&&大佬让测试商品详情页样式啊。。&&& style="white-space: text-align:"& style="font-family: 宋体, SimS color: rgb(75, 172, 198);"&&这个怎么说呢。。&&& style="white-space: text-align:"& style="font-family: 宋体, SimS color: rgb(128, 100, 162);"&&样式还是需要解析的啊。。&&& style="white-space: text-align:"& style="font-family: 宋体, SimS color: rgb(155, 187, 89);"&&如果乱了会被运营打的啊。。&&& style="white-space: text-align:"& style="font-family: 宋体, SimS color: rgb(192, 80, 77);"&&运营也会死的很惨啊。。&&& style="white-space: text-align:"& style="font-family: 宋体, SimS color: rgb(79, 129, 189);"&&所以让我们试一下吧。。&&& style="white-space: text-align:"& style="font-family: 宋体, SimS color: rgb(31, 73, 125);"&&如果还是不行。。&&& style="white-space: text-align:"& style="font-family: 宋体, SimS color: rgb(146, 205, 220);"&&就拿开发祭天。。&&& style="white-space: text-align:"& style="font-family: 宋体, SimS color: rgb(178, 162, 199);"&&不然。。&&& style="white-space: text-align:"& style="font-family: 宋体, SimS color: rgb(217, 150, 148);"&&还能怎么样呢。。&&& style="white-space: text-align:"& style="font-family: 宋体, SimS color: rgb（155, 187, 89）;"&&/&& style="white-space: text-align:"& style="font-family: 宋体, SimS color: rgb（155, 187, 89）;"&& width="100%" src="http://upload-images.jianshu.io/upload_images/fd2d06a801e33.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" title="0056753.png" alt="通栏1.png"/&&&&& style="font-family: 宋体, SimS color: rgb（155, 187, 89）;"&&/&&&/&&`
// 修改了标签id为`myContent`的背景颜色
injectedJavaScript={`
document.querySelector('#myContent').style.backgroundColor = 'red';
width: Dimensions.get('window').width,
height: this.state.height
source={{ html: HTMLTEXT }}='normal'
注入一些方法，做测量或者其他交互。
这个一般是需要WebView的onMessage方法配合使用
import React, { Component } from 'react'
Dimensions,
ScrollView
} from 'react-native'
const BaseScript =
(function () {
var height =
function changeHeight() {
if (document.body.scrollHeight != height) {
height = document.body.scrollH
if (window.postMessage) {
window.postMessage(JSON.stringify({
type: 'setHeight',
height: height,
setInterval(changeHeight, 100);
const HTMLTEXT = ` id="myContent" style="text-align:"& style="font-family: 宋体, SimS color: rgb(247, 150, 70); font-size: 36"&&大佬让测试商品详情页样式啊。。&&& style="text-align:"& style="font-family: 宋体, SimS color: rgb(75, 172, 198);"&&这个怎么说呢。。&&& style="text-align:"& style="font-family: 宋体, SimS color: rgb(128, 100, 162);"&&样式还是需要解析的啊。。&&& style="text-align:"& style="font-family: 宋体, SimS color: rgb(155, 187, 89);"&&如果乱了会被运营打的啊。。 width="100%" src="http://upload-images.jianshu.io/upload_images/6652326-afa4c73c7fca32ff.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" title="9088793.jpeg" alt="photo-2-c53d772ef8b2.jpeg"/&&&& style="text-align:"& style="font-family: 宋体, SimS color: rgb(192, 80, 77);"&&运营也会死的很惨啊。。&&& style="text-align:"& style="font-family: 宋体, SimS color: rgb(79, 129, 189);"&&所以让我们试一下吧。。&&& style="text-align:"& style="font-family: 宋体, SimS color: rgb(31, 73, 125);"&&如果还是不行。。&&& style="text-align:"& style="font-family: 宋体, SimS color: rgb(146, 205, 220);"&&就拿开发祭天。。&&& style="text-align:"& style="font-family: 宋体, SimS color: rgb(178, 162, 199);"&&不然。。&&& style="text-align:"& style="font-family: 宋体, SimS color: rgb(217, 150, 148);"&&还能怎么样呢。。&&& style="text-align:"& style="font-family: 宋体, SimS color: rgb（155, 187, 89）;"&& width="100%" src="/nil_class/277e5abe-2f40-41a5-b465-173a551c8d63.jpg" title="2096451.png" alt="首页banner2.png"/&&&&& style="font-family: 宋体, SimS color: rgb（155, 187, 89）;"&&& style="white-space: text-align:"& style="font-family: 宋体, SimS color: rgb（227, 108, 9）;"&&再来一遍！！！&&& style="white-space: text-align:"& style="font-family: 宋体, SimS color: rgb（227, 108, 9）;"&&& style="white-space: text-align:"& style="font-family: 宋体, SimS color: rgb(247, 150, 70);"&&大佬让测试商品详情页样式啊。。&&& style="white-space: text-align:"& style="font-family: 宋体, SimS color: rgb(75, 172, 198);"&&这个怎么说呢。。&&& style="white-space: text-align:"& style="font-family: 宋体, SimS color: rgb(128, 100, 162);"&&样式还是需要解析的啊。。&&& style="white-space: text-align:"& style="font-family: 宋体, SimS color: rgb(155, 187, 89);"&&如果乱了会被运营打的啊。。&&& style="white-space: text-align:"& style="font-family: 宋体, SimS color: rgb(192, 80, 77);"&&运营也会死的很惨啊。。&&& style="white-space: text-align:"& style="font-family: 宋体, SimS color: rgb(79, 129, 189);"&&所以让我们试一下吧。。&&& style="white-space: text-align:"& style="font-family: 宋体, SimS color: rgb(31, 73, 125);"&&如果还是不行。。&&& style="white-space: text-align:"& style="font-family: 宋体, SimS color: rgb(146, 205, 220);"&&就拿开发祭天。。&&& style="white-space: text-align:"& style="font-family: 宋体, SimS color: rgb(178, 162, 199);"&&不然。。&&& style="white-space: text-align:"& style="font-family: 宋体, SimS color: rgb(217, 150, 148);"&&还能怎么样呢。。&&& style="white-space: text-align:"& style="font-family: 宋体, SimS color: rgb（155, 187, 89）;"&&/&& style="white-space: text-align:"& style="font-family: 宋体, SimS color: rgb（155, 187, 89）;"&& width="100%" src="http://upload-images.jianshu.io/upload_images/fd2d06a801e33.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" title="0056753.png" alt="通栏1.png"/&&&&& style="font-family: 宋体, SimS color: rgb（155, 187, 89）;"&&/&&&/&&`
class RZWebView extends Component {
constructor (props) {
super(props)
this.displayName = 'RZWebView'
this.state = ({
* web端发送过来的交互消息
onMessage (event) {
const action = JSON.parse(event.nativeEvent.data)
if (action.type === 'setHeight' && action.height & 0) {
this.setState({ height: action.height })
} catch (error) {
render () {
injectedJavaScript={BaseScript}
width: Dimensions.get('window').width,
height: this.state.height
source={{ html: HTMLTEXT }}='normal'
scalesPageToFit
javaScriptEnabled // 仅限Android平台。iOS平台JavaScript是默认开启的。
domStorageEnabled // 适用于安卓
scrollEnabled={false}
onMessage={this.onMessage.bind(this)}
RZWebView.navigationOptions = {
headerTitle: 'RZWebView'
export default RZWebView
额外补充：WebView 加载URI
RN中WebView都是原生控件，对网页的支持也是挺好的。直接代码了：
import React, { Component } from 'react'
Dimensions
} from 'react-native'
class RZWebView extends Component {
constructor (props) {
super(props)
this.displayName = 'RZWebView'
render () {
&View style={{
width: Dimensions.get('window').width,
height: Dimensions.get('window').height - 64
automaticallyAdjustContentInsets
source={{ uri: 'https://rzrobert.github.io/' }}
decelerationRate='normal'
scalesPageToFit
javaScriptEnabled
domStorageEnabled
scrollEnabled
RZWebView.navigationOptions = {
headerTitle: 'RZWebView'
export default RZWebView
Over,不对的地方欢迎留言指正
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：51332次
排名：千里之外
原创：22篇
转载：12篇
评论：12条
(1)(1)(1)(1)(1)(1)(1)(4)(4)(8)(5)(6)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'react native里webview怎么设置高度自适应？ - 知乎12被浏览4408分享邀请回答01 条评论分享收藏感谢收起基于webview的Hybrid app和React Native及html5
React Native 结合了 Web 应用和 Native 应用的优势，可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件，代替 DOM 元素来渲染等。React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验。React Native 把重点放在所有开发人员关心的平台的开发效率上&&开发者只需学习一种语言就能轻易为任何平台高效地编写代码。Facebook 在多个应用程序产品中使用了 React Native，并将继续为 React Native 投资。
react native - react native 中文网
如何评价 React Native？ - Android 开发 - 知乎facebook开源的React Native 听说这个比基于webview的Hybrid app要好很多
React Native的优势和劣势：优势相对Hybird app或者Webapp：1. 不用Webview，彻底摆脱了Webview让人不爽的交互和性能问题2. 有较强的扩展性，这是因为Native端提供的是基本控件，JS可以自由组合使用3. 可以直接使用Native原生的动画（在FB Group这个app里面，面板滑出带一点果冻弹动，面板基于某个点展开这种动画随处可见，这种动画用Native code来做小菜一碟，但是用Web来做就难上加难）。优势相对于Native app：1. 可以通过更新远端JS，直接更新app，不过这快成为各家大型Native app的标配了.劣势：1. 扩展性仍然远远不如web，也远远不如直接写Native code2. 从Native到Web，要做很多概念转换，势必造成双方都要妥协。比如web要用一套CSS的阉割版，Native通过css-layout拿到最终样式再转换成native原生的表达方式（比如iOS的Constraint\origin\Center等属性），再比如动画。另外，若Android和iOS都要做相同的封装，概念转换就更复杂了。
UPDATE list： React Native Android 9.15 提前发布，补充AppStore审核政策变化。 Slide：上海前端技术峰会，/s/GeUkc7lAfI Slide：QCon北京2015，&http://www.stuq.org/ppt/show/95/5c28db3ecfbe8878aed3#/1& 天猫前端@横天同学发表的react-native 之布局篇对css-layout的布局能力做了一些实验，给出了一些有价值的结论，如：react 宽度基于pt为单位；flex能实现网格系统需求，且网格能够各种嵌套无bug；padding 设置在Text元素上所有padding变成了marginBottom... 风险，iOS6 javascriptCore.framework 为私有，可以通过JavaScriptCore-iOS & GitHub这个库代替。
========================================Android Hybrid App四大坑
首先解释下题目，Hybrid App，混合应用，代表平台PhoneGap，一般指使用原生包装Web页面开发的应用。与原生应用相比，主要用户界面和业务逻辑都是用Web技术也就是HTML+CSS+Javascript实现的；与Web应用相比，Web部分打包在应用内部，使用时不需要网络。顺便说一句，很多解决方案其实不算Hybrid，比如Adobe AIR、Titanium、Mono，这些都是使用某一特定技术开发跨平台应用的工具，最终产品都是编译成原生来跑的。
我们没有选择PhoenGap为技术基础（我对此并不满意，我认为以PhoneGap为基础可以少走一些弯路，少花一些精力，还能产出很多有价值的副产品），而是自行开发原生框架，主要目标平台是Android&&嗯，就是那个从系统版本到模块组合都巨分散的Android，可以这么说，坎坷从立项的那一刻起就已经注定了&&接下来，便请听我一一讲述：Android Hybrid App四大坑。（此文主要针对Android 4.3及之前的webview，部分浏览器比如Chrome已经改善了具体实现，所以Web App其实环境不错。）
前端代码开源就好，，要跑起来需要修改config.js，把if (debug) {}的内容删掉。
缺少标准flexboxFlexbox是CSS3里面一项非常重要的改进，大大改善了布局工作。可惜从草案到终案时间跨度太长，于是市面上绝大部分设备只支持display:-webkit-box。这给上图中图标区域的布局带来了难处，最终只能混合使用两种布局，display:inline-block和display:flex。需要注意，inline-block元素之间，如果在代码中有空格换行符的话，渲染时会有约0.25em~0.5em大小的间隙，所以想一行4列每列width:25%的话会放不下导致折行。开始我在其父元素中设置font:0/0 a，大部分手机都OK，中兴ZTE795就不行，擦，上次也是它&&后来我索性把所有空格和换行符都干掉，终于OK了。
这段代码演示inline-block布局时父元素字体对子元素之间间歇的影响。
&iframe src="http://jsfiddle.net/meathill/9Uk5Y/embedded/result,html,css,js/presentation/" height="200" width="100%" allowfullscreen="allowfullscreen" frameborder="0"&&/iframe&所以，对于多行多列的grid布局，我们要谨记：
对父元素使用display: flex-direction: flex-wrap:在现代浏览器和Android4.4以上的系统中，可以取得完美表现。使用display:inline- box-sizing: border- vertical-align:，并且在代码中移除块与块之间的空白字符，避免换行，保留合适的边距。遗憾的是，低版本的webview中，高度不会自适应，除非使用js进行计算，不然还是尽量避免在元素下方画线的举动。
tap vs click（这个问题简直令人发指。）我们知道，很多浏览器默认行为都依赖click事件触发，比如超链接、input[type=radio]的选中，等等。在4.4之前的webview中，click比真实操作延迟约300ms触发，会带给用户明显的延滞感。为了提升用户体验，我们多数使用tap事件部分替代click事件，以便及时响应用户操作。可选方案很多，Hammer.js、Fastclick，甚至Zepto都有封装。
于是新的问题出现了。比如我们用&a&实现了一个删除按钮，tap时，删除当前元素，并且将按钮重置为下载按钮，href为下载的url。用PC开发时一切正常，但到真机测试就会发现，因为tap是即时的，新按钮立刻替换了旧按钮，300ms后，click事件在新按钮上触发了，结果又开始下载&&再比如，图层中有个后退按钮，点击后，图层移除，露出下面覆盖的部分，如果在tap的位置上刚好有一枚链接，此时就会触发click，页面跳转&&以及，上次总结说的下载链接不触发click，问题也一样，只不过翻过来，click该触发的时候，被图层挡住了，所以没有触发。
解决方案基本围绕&如何熬过300ms&，和&甄别事件对象&来设计。
还是上面两个场景，第一个，按下之后，setTimeout 400ms（以防万一）后再替换按钮；第二个，给图层加一个消失的动画，持续400ms，保证click触发时图层还在。可能大家有疑问，为何不干脆禁掉click事件，前面说了，很多浏览器默认行为依赖click事件，禁掉之后又会引发别的问题。
另一个解决方案是甄别事件对象，在用户touchstart的时候，记下event.target，等到click触发时，对比，如果不一致则认为是抽风，event.preventDefault()。我更推荐这种做法，毕竟400ms也不算短。不过要注意，&label&在响应click时，会自动触发它for的元素的click，所以要用新增的control属性进行二次对比，以免误伤。
position:竟然抢事件这个问题解决起来容易，排查时没少花时间。表现为，一个按钮，就在那里，但怎么点都没用。后来只好追踪全局事件，发现事件的对象并非按钮，而是按钮下面被遮盖的层。很奇怪，我知道translateZ可能导致这个问题，不过现在完全没用到；而且下面的图层实际并没有那么长（参照上图中，内容列表和下面的三个按钮，就是那里），列表的底部是bottom:60px，刚好应该把&footer&的三个按钮空出来。
然后我开始怀疑position:，因为只有这个东西会影响布局。把它点掉后，按钮果然可以点了，于是我给&footer&也加上了position:问题就这样解决了。我觉得这肯定又是个Android Webview的Bug，因为我并没有给下面层里的元素设置z-index，只有position:relative。总之，如果按钮点击没反应，尽早看看事件对象是哪个，说不定被哪个层抢走了。
各种待实现的API是个神器，我在使用某个API或者CSS属性时不太有把握的话，都会去查一下。然而，谁又知道Android Webview默认很多API都没开呢？大到localStorage，小到alert、confirm，都需要主动开放，不然就没法用。测试的时候又很难查，原生的环境多不在我这儿，配也不太容易，大家的习惯都不一致，只能等对方反馈过来错误信息，我到代码里查，但常常死活看不出来哪儿有问题。
后来认清现实就好办，Android Webview其实是个半残废，有不明白的问题，多半是API实现不全导致的。最简单的办法是用modernizr之类的工具进行特性检测，或者在Weinre、Adobe Inspect CC里直接敲API。总之，别怀疑自己，基本都是Android Webview的问题。
这也是我为什么希望以PhoneGap为基础的原因：PhoneGap已经按照规范实现了大部分API。插件库也很丰富，比如GA&&说到这个，我们想实现一个简单的统计，因为老板嫌GA太大，所以干脆使用同样的接口，只请求一下我们的日志服务器，留下条日志就好，结果我们惊讶地发现：Android里原生给Webview环境增加API，方法的参数不能多也不能少，不然就报错，真奇葩&&可以省下很多时间。产出的结果，还可以分享到社区一部分，对于我们公司，也能增加了不少开发者资源。
总结早先别人鄙视Hybrid App的时候我也各种不服，心说&你们丫懂毛啊就指手画脚的说不行&；现在经历了各种大坑小坑连环坑之后，我的想法已经变成了&你们丫懂毛啊不就是一不小心蒙对了么&。
Hybrid App开发会遭遇比原生和Web App更多的坎坷，这我有心理准备；如此多的坑无形中也在提升我的个人价值，我对此甚至隐隐有些高兴。不过我还是希望这段混乱之治尽快过去，Android平台不要再分裂了，高版本系统尽快普及，所有前端开发的日子都会好过许多。
现在，如果可能的话，尽量以PhoneGap为基础进行开发，能省很多时间和精力。对于前端人来说，更是能把测试环境搬到本地，实在是非常大的帮助。
Android 4.4时再次分裂，之后使用blink作为webview的基础；之前则是webkit，前者无论CSS还是API都有更佳表现，Nexus 5基本没怎么改就都测试通过了。日发布
===========================================
web就是天生的多平台 web+ios+android+wp+。。。web用户体验不好，尽量优化关键是想怎么改就怎么改，随时上线，不用审核只有用到第三方的东西（登录、支付、推送。。。）才要用到原生的而这些，j2objc就没辙了，还是得重新开发看来html5的web开发是大趋势
阅读(...) 评论()& & & & 系统自带的WebView控件在默认情况下，是不能自适应高度的，尤其在WebView嵌套在ListView中，WebView展现的是未知的HTML，又不能写死每个item的高度时，那么问题就来了，现将项目中用到的WebViewAutoHeight.js分享如下，可以直接拿来引用。(此程序不受制于HTML中的格式，不用和web端提前约定，minHeight的值不超过最大item值即可)
import React, {Component,propTypes} from 'react';
import {WebView, View, Text} from &react-native&;
const BODY_TAG_PATTERN = /\&\/ *body\&/;
// Do not add any comments to this! It will break because all line breaks will removed for
// some weird reason when this script is injected.
var script = `
;(function() {
var wrapper = document.createElement(&div&);
wrapper.id = &height-wrapper&;
while (document.body.firstChild) {
wrapper.appendChild(document.body.firstChild);
document.body.appendChild(wrapper);
var i = 0;
function updateHeight() {
document.title = wrapper.clientH
window.location.hash = ++i;
updateHeight();
window.addEventListener(&load&, function() {
updateHeight();
setTimeout(updateHeight, 1000);
window.addEventListener(&resize&, updateHeight);
const style = `
body, html, #height-wrapper {
margin: 0;
padding: 0;
#height-wrapper {
const codeInject = (html) =& html.replace(BODY_TAG_PATTERN, style + &&/body&&);
* Wrapped Webview which automatically sets the height according to the
* content. Scrolling is always disabled. Required when the Webview is embedded
* into a ScrollView with other components.
* Inspired by this SO answer /a/
var WebViewAutoHeight = React.createClass({
propTypes: {
source: React.PropTypes.object.isRequired,
injectedJavaScript: React.PropTypes.string,
minHeight: React.PropTypes.number,
onNavigationStateChange: React.PropTypes.func,
style: WebView.propTypes.style,
getDefaultProps() {
return {minHeight: 100};
getInitialState() {
realContentHeight: this.props.minHeight,
handleNavigationChange(navState) {
if (navState.title) {
const realContentHeight = parseInt(navState.title, 10) || 0; // turn NaN to 0
this.setState({realContentHeight});
if (typeof this.props.onNavigationStateChange === &function&) {
this.props.onNavigationStateChange(navState);
render() {
const {source, style, minHeight, ...otherProps} = this.
const html = source.
if (!html) {
throw new Error(&WebViewAutoHeight supports only source.html&);
if (!BODY_TAG_PATTERN.test(html)) {
throw new Error(&Cannot find &/body& from: & + html);
{...otherProps}
source={{html: codeInject(html)}}
scrollEnabled={false}
style={[style, {height: Math.max(this.state.realContentHeight, minHeight)}]}
javaScriptEnabled
onNavigationStateChange={this.handleNavigationChange}
{/*process.env.NODE_ENV !== &production& &&
&Text&Web content height: {this.state.realContentHeight}&/Text&*/}
export default WebViewAutoH
本文已收录于以下专栏：
相关文章推荐
WebView自适应实际内容高度
前言：从开始接触rn到现在终于能写出点东西了，的确得为自己好好地点个赞 ，不管咋样，学习还是得继续啊，废话少说了，在rn中我们也需要对屏幕进行适配，但是rn中的适配貌似比android原生容易很多（不...
RN为我们提供了WebView组件来加载一个网页。/**
* Created by gyg on .
'use strict'
import React, {Componen...
本项目是WebView 或 Web 组件，支持Android、iOS, 支持RN原生组件不支持的auto height高度自适应及在html页面和RN组件之间call js相互调用js方法，very ...
如果你还没有配置React Native开发环境，请访问：一步一步搭建ReactNative开发环境(Mac)
Android依赖的安装需要较多的步骤，安装的方法也有很多，接下来跟着我一步步的完...
需求描述：
弹层中的弹框中银行标题以及内容都是接口请求的数据，目前布局是标题框和底部确定按钮是高度和宽度固定，中间的内容部分给了最低高度并且可以随内容增多而高度自适应。现在，产品需要...
ReactNative提供了RefreshControl下拉刷新组件，但是没有提供上拉刷新组件，上拉刷新在App中是很常用的。
今天我们来实现一个iOS和Android通用的上拉刷新功能。
下面简要介...
react-native-pull包含PullView & PullList两个实现下拉刷新的react native组件，可支持android & ios，简单易用！
纯js代码，基于Scroll...
他的最新文章
讲师：汪剑
讲师：刘道宽
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)}