React-Native学习笔记之：WebView控件使用

和Android及IOS一样，在React Native中也有加载网页数据的控件WebView,常用的方法有：

• source {uri: string,method: string,headers: object,body: string},{html: string,baseUrl: string},number
  在WebView中载入一段静态的html代码或是一个url（还可以附带一些header选项）。
• onError function 方法 当网页加载失败的时候调用
• onLoad function 方法 当网页加载结束的时候调用
• onLoadEnd fucntion 当网页加载结束调用，不管是成功还是失败
• onLoadStart function 当网页开始加载的时候调用
• onNavigationStateChange function方法 当导航状态发生变化的时候调用
• renderError function 该方法用于渲染一个View视图用来显示错误信息
• renderLoagin function 该方法用于渲染一个View视图用来显示一个加载进度指示器等。
  使用DEMO（在输入框中输入网页地址，点击GO进行加载对应网页）如下：

import React,{Component} from 'react';
import {
    AppRegistry,StyleSheet,Text,View,TextInput,WebView
} from 'react-native';
//引入easy-toast依赖库
import Toast,{DURATION} from 'react-native-easy-toast'
export  default class WebViewDemo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            url: 'http://blog.csdn.net/true100',title: '',canBack: false
        }
    }

    onBack() {
        //如果网页还有上级页面（可返回）
        if (this.state.canBack) {
            this.webView.goBack();
        } else {
            //提示不能返回上一页面了
            this.toast.show('再点击就退出啦',DURATION.LENGTH_SHORT);
        }
    }

    onNext() {
        this.setState({
            //设置请求地址
            url: this.text
        })
    }

    onNavigationStateChange(e) {
        this.setState({
            title: e.title,//设置是否要以返回上级页面
            canBack: e.canGoBack
        })
    }

    render() {
        return <View style={styles.container}>
            <View style={styles.item}>
                <Text style={styles.text} onPress={()=>{this.onBack()}}>返回</Text>
                <TextInput style={styles.input}
                           defaultValue={'http://blog.csdn.net/true100'}
                           onChangeText={text=>this.text=text}></TextInput>
                <Text style={styles.text} onPress={()=>{this.onNext()}}>GO</Text>
            </View>
            <WebView source={{uri:this.state.url}}
                     onNavigationStateChange={(e)=>this.onNavigationStateChange(e)}
                     ref={webView=>this.webView=webView}></WebView>
            <Toast ref={toast=>{
                       this.toast=toast
                    }}/>
        </View>
    }
}

const
    styles = StyleSheet.create({
        container: {
            flex: 1
        },text: {
            fontSize: 20,color: '#333',marginLeft: 10
        },input: {
            height: 40,marginLeft: 10,flex: 1,borderWidth: 1
        },item: {
            flexDirection: 'row',alignItems: 'center',paddingTop: 10,marginRight: 10
        }
    })

效果如图：