属性方法：
1，style，继承可以使用View组件的所有属性和style。
2，automaticallyAdjustContentInsets bool 设置是否自动调整内容
3，contentIsert 设置内容所占的尺寸大小
4，html={'HTML文本字符串'} 设置加载的HTML文本字符串
5，injectJavaScript={'脚本字符串'} 网页加载之前进行注入的JS代码
6，onError function 方法 当网页加载失败的时候调用
7，onLoad function 方法 当网页加载结束的时候调用
8，onLoadEnd fucntion 当网页加载结束调用，不管是成功还是失败
9，onLoadStart function 当网页开始加载的时候调用
10，onNavigationStateChange function方法 当导航状态发生变化的时候调用
11，renderError function 该方法用于渲染一个View视图用来显示错误信息
12，renderLoagin function 该方法用于渲染一个View视图用来显示一个加载进度指示器
13，startInLoadingState bool强制WebView在第一次加载时先显示loading视图。默认为true
14，url string 设置加载的网页地址
实例
import React from 'react';
import { View, WebView, Text, Button, Alert, Image, ScrollView, LayoutAnimation, InteractionManager, StyleSheet, ListView, TouchableOpacity, Dimensions} from 'react-native';
import Fetch from '../../../request/fetch';
import NavBar from '../../../components/NavigationBar';
import Loading from '../../../components/Loading';
const {width, height} = Dimensions.get('window');
const innerHeight = width;
const onButtonPress = () => {
Alert.alert('Button has been pressed!');
};
export default class GoodDetail extends React.Component{
constructor(props){
super(props);
this.state = {
detailHeight:0,
mytext:'',
data:'',
upContentHeight:0,
isLoading:true
}
}
//render后执行
componentDidMount(){
//抓取数据，直到数据长度不为0，loading加载结束
Fetch.mallProductInfo(19).then(res => {
if(res.data){
this.setState({isLoading:false,data:res.data,mytext:''})
}
}).catch(err => console.log(err))
}
render(){
//定义商品详情HTML代码
const HTML = `
<!DOCTYPE html>\n
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<style type="text/css">
body {
margin: 0;
padding: 0;
font: 62.5% arial, sans-serif;
}
img{
width:100%;
margin:0;
padding:0;
display:block;
}
</style>
</head>
<body>
${this.state.mytext}
</body>
<script>window.onload=function(){window.location.hash = 1;document.title = document.body.clientHeight;}</script>
</html>`;
return(
<View style={{flex:1,backgroundColor: '#f0eff5'}}>
{/*顶部条*/}
<NavBar title={this.state.data.name} backgroundColor='#FD5F61' onLeft={() => {this.props.navigator.pop()}}/>
{/*视图部分，渲染时设置上半部分高度*/}
<View style={{flex:1}} onLayout={e => this.setState({upContentHeight: e.nativeEvent.layout.height*3/5})}>
{/*判断是否在加载状态*/}
{this.state.isLoading?<Loading/>:<ScrollView>
<View style={{flex:1}}>
{/*图片简介以及价格view*/}
<View style={{flex:1,height:this.state.upContentHeight,padding:15,backgroundColor:'#fff'}}>
{/*图片*/}
<View style={{flex:4,flexDirection:'row',justifyContent:'center',alignItems:'center'}}>
<Image style={{resizeMode:'contain',height:innerHeight,width:width/2}} source={{uri: this.state.data.cover}}></Image>
</View>
{/*价格部分*/}
<View style={{flex:1}}>
{/*优惠价格view*/}
<View style={{flex:3,flexDirection:'row',alignItems:'flex-end'}}>
<Text style={{color:'#f76260',fontSize:40}}>{this.state.data.value}</Text>
<Text style={{color:'#000',fontSize:18,marginBottom:10,marginLeft:10}}>点币</Text>
<View style={{padding:2,marginBottom:10,marginLeft:10,borderRadius:2,borderWidth:1,borderColor:'#f76260',borderStyle:'solid'}}>
<Text style={{color:'#f76260', fontSize:12}}>至尊优惠价</Text>
</View>
</View>
{/*价格和剩余数量View*/}
<View style={{flex:2,flexDirection:'row',alignItems:'flex-end'}}>
{/*左侧价格*/}
<View style={{flex:1,flexDirection:'row',alignItems:'center'}}>
<Text style={{color:'#000',fontSize:18}}>价格</Text>
<Text style={{color:'#888',fontSize:18,marginLeft:10}}>{this.state.data.price}</Text>
</View>
{/*右侧剩余数量*/}
<View style={{flex:1,flexDirection:'row',justifyContent:'flex-end',alignItems:'center'}}>
<Text style={{color:'#888',fontSize:18,marginRight:5}}>剩余数量：</Text>
<Text style={{color:'#888',fontSize:18}}>{this.state.data.count}</Text>
</View>
</View>
</View>
</View>
{/*商品详情模块*/}
<View style={{marginTop:10}}>
{/*标题*/}
<View style={{height:50,justifyContent:'center',backgroundColor:'#fff'}}>
<Text style={{color:'#000',fontSize:18,marginLeft:15}}>商品详情</Text>
</View>
{/*详情后台图片*/}
<View style={{height:this.state.detailHeight}}>
<WebView source={{html:HTML}}
javascriptEnabled={true}
scrollEnabled={false}
scalesPageToFit={true}
automaticallyAdjustContentInsets={true}
onNavigationStateChange={(title)=>{
if(title.title != undefined) {
this.setState({
detailHeight:(parseInt(title.title))
}}}}></WebView>
</View>
</View>
</View>
</ScrollView>
}
</View>
<TouchableOpacity onPress={onButtonPress} activeOpacity={0.8} style={{backgroundColor:'#f76260',height:50,justifyContent:'center',justifyContent:'center',alignItems:'center'}}><Text style={{fontSize:18,color:'#fff'}}>立即兑换</Text></TouchableOpacity>
</View>
)
}
}
EEE9AEAF-B3BE-462D-AE6C-FEF69706F7B3.png
如上图所示，在动态显示商品的详情的时候，webview高度必须有，但是不能写死，所以此时就需要动态设置，方法是在
onNavigationStateChange写函数：onNavigationStateChange={(title)=>{
console.log(title)
if(title.title != undefined) {
this.setState({
detailHeight:(parseInt(title.title))
}}
打印title可以发现：title是个对象
{ loading: false,
title: '338',
canGoForward: false,
url: 'about:blank%231',
target: 813,
canGoBack: false }
然后title.title就是webview的高度
网友评论