react-native WebView组件详解

属性方法：
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 = `
\n

  
    
    
    
    
  
  
  ${this.state.mytext}
  
  
`;
    return(
      
        {/*顶部条*/}
         {this.props.navigator.pop()}}/>
        {/*视图部分，渲染时设置上半部分高度*/}
         this.setState({upContentHeight: e.nativeEvent.layout.height*3/5})}>
          {/*判断是否在加载状态*/}
          {this.state.isLoading?:
              
                {/*图片简介以及价格view*/}
                
                  {/*图片*/}
                  
                    
                  
                  {/*价格部分*/}
                  
                    {/*优惠价格view*/}
                    
                      {this.state.data.value}
                      点币
                      
                        至尊优惠价
                      
                    
                    {/*价格和剩余数量View*/}
                    
                      {/*左侧价格*/}
                      
                        价格
                        {this.state.data.price}
                      
                      {/*右侧剩余数量*/}
                      
                        剩余数量：
                        {this.state.data.count}
                      
                    
                  
                
                {/*商品详情模块*/}
                
                  {/*标题*/}
                  
                    商品详情
                  
                  {/*详情后台图片*/}
                  
                    {
                               if(title.title != undefined) {
                                 this.setState({
                                   detailHeight:(parseInt(title.title))
                                 }}}}>
                  
                
              
            
            }
        
        立即兑换
      
    )
  }
}

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的高度