React Native WebView自适应高度(Android、IOS平台通用)

        系统自带的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.clientHeight;
window.location.hash = ++i;
}
updateHeight();
window.addEventListener("load", function() {
updateHeight();
setTimeout(updateHeight, 1000);
});
window.addEventListener("resize", updateHeight);
}());
`;

const style = `
<style>
body, html, #height-wrapper {
margin: 0;
padding: 0;
}
#height-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
}
</style>
<script>
${script}
</script>
`;

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 http://stackoverflow.com/a/33012545 * */
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() {
return {
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.props;
const html = source.html;

if (!html) {
throw new Error("WebViewAutoHeight supports only source.html");
}

if (!BODY_TAG_PATTERN.test(html)) {
throw new Error("Cannot find </body> from: " + html);
}

return (
<View>
<WebView
{...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>*/}
</View>
);
},

});

export default WebViewAutoHeight;