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
            }
        })

源碼