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，不会用于商用。

二、由于不少博客的地址看完没有及时作保存，因此不少不会在这里标明出处，很是感谢各位大牛的分享，也但愿你们理解。