React Native Webview使用

RN为我们提供了WebView组件来加载一个网页。

/**
 * Created by gyg on 2017/5/4.
 */
'use strict'
import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    WebView,
    BackAndroid,
} from 'react-native';

class WebLoadingView extends Component {

    render() {
        return (
            <View style={{flex:1,justifyContent:'center',
        alignItems:'center',backgroundColor:'#f2f2f2'}}>
                <Text style={styles.loadingText}>
                    页面正在加载...
                </Text>
            </View>
        )
    }
}

export default class WebViewScene extends Component {

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            url: "",
            title: "",
            loading: true,
            isBackButtonEnable: false,
            isForwardButtonEnable: false
        };
    }

    componentDidMount() {
        BackAndroid.addEventListener("webHardwareBackPress", ()=> {
            try {
                if (this.state.isBackButtonEnable) {
                    this.refs._webView.goBack();//返回上一个页面
                    return true;//true 系统不再处理 false交给系统处理
                }
            } catch (error) {
                return false;
            }
            return false;
        })
    }

    componentWillUnmount() {
        BackAndroid.removeEventListener("webHardwareBackPress");
    }

    render() {
        return (
            <View style={styles.container}>
                <WebView
                    style={styles.webView}
                    ref="_webView"
                    source={{uri:this.props.route.extras.url}}//获取url参数
                    automaticallyAdjustContentInsets={true}
                    domStorageEnabled={true}
                    javaScriptEnabled={true}
                    scalesPageToFit={true}
                    startInLoadingState={true}
                    renderLoading={()=>{return <WebLoadingView/>}}
                    onNavigationStateChange={this._onNavigationStateChange.bind(this)}
                />
            </View>
        )
    }

    //WebView导航状态改变
    _onNavigationStateChange(navState) {
        this.setState({
            url: navState.url,
            title: navState.title,
            loading: navState.loading,
            isBackButtonEnable: navState.canGoBack,
            isForwardButtonEnable: navState.canGoForward,
        })
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#f2f2f2",
    },
    webview: {
        flex: 1,
    },
    loadingText: {
        color: '#8a8a8a',
        fontSize: 16
    }
})

• source {uri: string, method: string, headers: object, body: string}, {html: string, baseUrl: string} 加载url，加载静态html
• javaScriptEnabled bool android 是否启用支持js
• automaticallyAdjustContentInsets bool 设置是否自动调整内容
• domStorageEnabled bool 适合Android平台 该只适合于Android平台，用于控制是否开启DOM Storage（存储）
• scalesPageToFit bool 适合iOS平台 用于设置网页是否缩放自适应到整个屏幕视图以及用户是否可以改变缩放页面
• onError function 网页加载失败时调用
• onLoad function 方法 当网页加载结束的时候调用
• onLoadEnd function 网页加载结束时（无论成功或失败）调用
• onLoadStart function 网页加载开始时调用
• onNavigationStateChange function 当导航状态发生变化时回调
• renderError function 渲染视图错误时使用
• renderLoading function 该函数功能是返回一个加载指示器
• startInLoadingState bool 强制webview在第一次加载时是否显示加载视图
• userAgent string android 设置userAgent
• allowsInlineMediaPlayback bool 该适合iOS平台，设置决定当使用HTML5播放视频的时候在当前页面位置还是使用原生的全屏播放器播放，默认值false。【注意】.为了让视频在原网页位置进行播放，不光要设置该属性为true，还必须要设置HTML页面中video节点的包含webkit-playsinline属性
• bounces bool 该适合iOS平台 设置是否有界面反弹特性
• onShouldStartLoadWithRequest function 该适合iOS平台，该允许拦截WebView加载的URL地址，进行自定义处理。该方法通过返回true或者falase来决定是否继续加载该拦截到请求
• scrollEnabled bool 该适合iOS平台 用于设置是否开启页面滚动
  跳转到展示网页页面：

this.props.navigator.push({
            component: WebViewScene,
            extras: {
                url: 'https://www.jd.com',//网页url
            }
        })

源码