react-native WebView 自适应高度
凌通
自适应高度，区分android 和ios
/**
* Created by ke2933 on 2018/11/08
* WebModul WebView 封装
* webContent WebView 内容
*/
import React, { Component } from 'react';
import { StyleSheet, Text, View, WebView, Alert, 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,
}))
}
}
}
setTimeout(changeHeight, 300);
} ())
`
export default class TabNav extends Component {
static defaultProps = {
webContent: "",
};
constructor(props) {
super(props);
this.state = {
webViewHeight: 0,//webView高度
}
}
render() {
const sourceIos = {
html: `<html>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8'>
<style>*{margin:0;padding:0;font-size: 40px;}img{ width: 100% !important;height: inherit;},video{width: 100%;}</style>
</head>
<body>${this.props.webContent.replace(/\s/g," ").replace(/\r\n/g," ")}</body>
</html>`,
}
const sourceAndroid = {
html: `<html>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8'>
<style>*{margin:0;padding:0;font-size: 40px;}img{ width: 100% !important;height: inherit;},video{width: 100%;}</style>
</head>
<body>${this.props.webContent.replace(/\s/g," ").replace(/\r\n/g," ")}</body>
</html>`,
baseUrl: '',
}
return (
IOS?
<View style={{height:this.state.webViewHeight}}>
<WebView
source={IOS ? sourceIos : sourceAndroid}
style={[{
width: SCREEN_WIDTH,
height: this.state.webViewHeight || SCREEN_HEIGHT,
}]}
scrollEnabled={false}
decelerationRate='normal'
scalesPageToFit
javaScriptEnabled // 仅限Android平台。iOS平台JavaScript是默认开启的。
domStorageEnabled // 适用于安卓
onMessage={this.onMessage.bind(this)}
automaticallyAdjustContentInsets
injectedJavaScript={BaseScript}
>
</WebView>
</View>:
<WebView
source={IOS ? sourceIos : sourceAndroid}
style={[{
width: SCREEN_WIDTH,
height: this.state.webViewHeight || SCREEN_HEIGHT,
}]}
scrollEnabled={false}
decelerationRate='normal'
scalesPageToFit
javaScriptEnabled // 仅限Android平台。iOS平台JavaScript是默认开启的。
domStorageEnabled // 适用于安卓
onMessage={this.onMessage.bind(this)}
automaticallyAdjustContentInsets
injectedJavaScript={BaseScript}
>
</WebView>
);
}
onMessage (event) {
try {
const action = JSON.parse(event.nativeEvent.data)
if (action.type === 'setHeight' && action.height > 0) {
this.setState({ webViewHeight: action.height })
}
} catch (error) {
// pass
}
}
}
const styles = StyleSheet.create({
container: {
flex:1
},
});
类似资料：