ReactNative webView 计算高度方法
2018-04-26 本文已影响0人
WindFlyCloud
第一种方法
React-Native（后面简称RN）在展示某些静态也页面的时候，可能需要使用WebView， WebView可以请求一个网页地址，也可以异步请求HTML文本。一般情况下我们要得到网页的宽高，传回给RN以便准确设置WebView展示宽高
这种方法在处理单个webView的时候没有问题，要是需要在webView下面加上其他的组件，这时候在iOS上是没有问题的，但是在安卓上会出现计算高度错误的现象，计算出来的高度会很高。
const SCREEN_WIDTH = Dimensions.get('window').width;
const SCREEN_HEIGHT = Dimensions.get('window').height;
const content = "<p>测试</p><p>测试</p><p>“自由、平等、公正、法治”，是对美好社会的生动表述，也是从社会层面对社会主义核心价值观基本理念的凝练。</p><p> “富强、民主、文5261明、和谐”，是我国社会4102主义现代化国家1653的建设目标，也是从价值目标层面对社会主义核心价值观基本理念的凝练，在社会主义核心价值观中居于最高层次，对其他层次的价值理念具有统领作用。</p>"
constructor(props) {
super(props);
this.state = {
height:30,
}
}
getTextView (item) {
return (
<View style={{height:this.state.height,width:SCREEN_WIDTH,backgroundColor: ColorUtils.type.MainColor,}}>
<WebView
style={{flex:1}}
javaScriptEnabled={true}
source={{html: `<!DOCTYPE html><html><body>${content}<script>window.onload=function(){ window.location.hash = '#' + document.body.clientHeight;document.title = document.body.clientHeight;}</script></body></html>`, baseUrl: ''}}
bounces={false}
scrollEnabled={false}
automaticallyAdjustContentInsets={true}
contentInset={{top:0,left:0}}
onNavigationStateChange={(title)=>{
console.log('--------------');
console.log(title);
if(title.title != undefined) {
this.setState({
height:(parseInt(title.title)+20)
})
}
alert(title.title);
}}
>
</WebView>
</View>
);
}
第二种方法
在ReactNative项目中可能会遇到webView下面需要展示其他内容的情况，这个时候就需要我们把HTML的内容展开，但ReactNative中的WebView需要设定高度才能展示出来，因此需要用js方法来计算webView高度做到高度自适应
1.使用WebView的injectedJavaScript属性注入JS代码，进行测量网页的宽高
2.设置WebView的宽高
const SCREEN_WIDTH = Dimensions.get('window').width;
const SCREEN_HEIGHT = Dimensions.get('window').height;
const content = "<p>测试</p><p>测试</p><p>“自由、平等、公正、法治”，是对美好社会的生动表述，也是从社会层面对社会主义核心价值观基本理念的凝练。</p><p> “富强、民主、文5261明、和谐”，是我国社会4102主义现代化国家1653的建设目标，也是从价值目标层面对社会主义核心价值观基本理念的凝练，在社会主义核心价值观中居于最高层次，对其他层次的价值理念具有统领作用。</p>"
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);
} ())
`
constructor(props) {
super(props);
this.state = {
height:30,
}
}
onMessage (event) {
console.log(event.nativeEvent.data);
try {
const action = JSON.parse(event.nativeEvent.data)
if (action.type === 'setHeight' && action.height > 0) {
this.setState({ height: action.height })
// alert(action.height);
}
} catch (error) {
// pass
// alert('action.height');
}
}
getWebView(item) {
return(
<View style={[styles.textView,{height:this.state.height,width:SCREEN_WIDTH}]}>
<WebView
style={{width: SCREEN_WIDTH,
height: this.state.height}}
injectedJavaScript={BaseScript}
scalesPageToFit={true}
javaScriptEnabled={true}
decelerationRate='normal'
startInLoadingState={true}
source={{html: item.content, baseUrl: ''}}
bounces={false}
scrollEnabled={false}
automaticallyAdjustContentInsets={true}
contentInset={{top:0,left:0}}
onMessage={this.onMessage.bind(this)}
>
</WebView>
</View>
);
}
