React Native系列——WebView組件使用介紹

1、介紹

    WebView組件進行建立渲染一個原生的WebView，能夠加載一個網頁，而且具備網頁的特性。

2、屬性

1. style 繼承可使用View組件的全部屬性和Style

2. source {uri: string, method: string, headers: object, body: string}, {html: string, baseUrl: string}, number    在WebView中載入一段靜態的html代碼或是一個url（還能夠附帶一些header選項）。

3. onError function  方法 當網頁加載失敗的時候調用

4. onLoad  function 方法  當網頁加載成功的時候調用

5. onLoadEnd fucntion 當網頁加載結束調用，不管是成功仍是失敗

6. onLoadStart  function  當網頁開始加載的時候調用

7. onNavigationStateChange function方法  當導航狀態發生變化的時候調用

8. renderError  function  該方法用於渲染一個View視圖用來顯示錯誤信息

9. startInLoadingState  bool  控制加載指示器是否能夠顯示
   

10. renderLoading  function 返回加載指示器
    

3、注意事項

一、給的網址連接必須加 http://  不然訪問不了

二、不少屬性其實試驗了，可是沒有看出有什麼效果，就沒有寫上來

三、react-native-webview-bridge和react-native-webtrc是兩個能夠和頁面通訊的插件

4、完整代碼

效果圖

代碼

import React, {
    AppRegistry,
    Component,
    StyleSheet,
    Text,
    View,
    WebView,
    TouchableHighlight,
    Alert
} from 'react-native';

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            src: 'http://www.oschina.net/'
        };
    }

    goQQ=()=> {
        this.setState({
            src:'http://www.qq.com/'
        });
    }
    goOSC=()=> {
        this.setState({
            src:'http://www.oschina.net/'
        });
    }
    goBack=()=> {
        this.refs.webview.goBack();
    }
    goForward=()=>{
        this.refs.webview.goForward();
    }
    reload=()=> {
        this.refs.webview.reload();
    }
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.header}>
                    <View style={[styles.left]}>
                        <TouchableHighlight
                            onPress={()=>this.goOSC()}
                        >
                            <Text style={[styles.text]}>OSChina</Text>
                        </TouchableHighlight>
                    </View>
                    <View style={[styles.left]}>
                        <TouchableHighlight
                            onPress={()=>this.goQQ()}
                        >
                            <Text style={[styles.text]}>騰訊圖片</Text>
                        </TouchableHighlight>
                    </View>
                </View>
                <View style={styles.subHeader}>
                    <TouchableHighlight
                        onPress={()=>this.goBack()}
                    >
                        <Text style={[styles.text]}>後退</Text>
                    </TouchableHighlight>
                    <TouchableHighlight
                        onPress={()=>this.reload()}
                    >
                        <Text style={[styles.text]}>刷新</Text>
                    </TouchableHighlight>
                    <TouchableHighlight
                        onPress={()=>this.goForward()}
                    >
                        <Text style={[styles.text]}>前進</Text>
                    </TouchableHighlight>
                </View>
                <WebView
                    ref="webview"
                    source={{uri:this.state.src}}
                    startInLoadingState={true}
                    renderLoading={()=><Text>正在加載頁面...</Text>}
                />
            </View>

        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    header:{
        flexDirection:'row',
        justifyContent:'space-between',
        height:60,
        backgroundColor:'green',
    },
    subHeader:{
        flexDirection:'row',
        justifyContent:'space-between',
        height:60,
        backgroundColor:'yellow',
    },
    text: {
        color: '#333333',
        marginBottom: 5,
        backgroundColor:'#00ced1',
        fontSize: 25,
        textAlign:'center',
    },
    left:{
        justifyContent:'center',
        alignItems:'center'
    },
    right:{
        justifyContent:'center',
        alignItems:'center'
    }
});

參考文章

https://github.com/facebook/react-native/tree/master/Examples/UIExplorer

http://reactnative.cn/docs/0.25/webview.html#content

免責說明

一、本博客中的文章摘自網上的衆多博客，僅做爲本身知識的補充和整理，並分享給其餘須要的coder，不會用於商用。

二、由於不少博客的地址看完沒有及時作保存，因此不少不會在這裏標明出處，很是感謝各位大牛的分享，也但願你們理解。