360SDN.COM

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

来源:  2017-06-18 17:24:54    评论:0点击:

来源:http://blog.csdn.net/true100/article/details/68490492
 和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
        }
    })
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88

    效果如图:
    这里写图片描述

     
    为您推荐

    友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
     Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权