ReactNative: 使用網頁組件WebView組件

1、簡介

在移動端開發中，不少時候須要嵌入一個網頁來幫助實現某一個活動，這方式大大提升了活動快速迭代的靈活性，在RN中，一樣也這麼處理這種狀況的。其實，這種混合式開發稱爲Hybird APP，它們就是基於WebView來實現的。React-Native中的WebView組件提供的功能基本知足需求，如今就讓咱們來研究一下。

 

2、屬性

//HTML字符串。已過時，官方推薦使用source代替
hml：PropTypes.string

//URL字符串。已過時，官方推薦使用source代替
url：PropTypes.string

//網頁資源，擁有下面三個值
source
一、PropTypes.shape({
        uri: PropTypes.string,
        method: PropTypes.string,
        headers: PropTypes.object,
        body: PropTypes.string,
      }),
二、PropTypes.shape({
        html: PropTypes.string,
        baseUrl: PropTypes.string,
      }),
三、PropTypes.number

//是否支持回彈效果
bounces: PropTypes.bool

//滾動速率, normal: 0.998,  fast: 0.99 (the default for iOS web view)
decelerationRate: ScrollView.propTypes.decelerationRate

//是否支持滾動
scrollEnabled: PropTypes.bool

//表示是否自動調整內部內容
automaticallyAdjustContentInsets: PropTypes.bool

//內部內容偏移
contentInset: EdgeInsetsPropType

//是否開啓頁面加載的狀態
startInLoadingState: PropTypes.bool

//是否支持JavaScript交互
javaScriptEnabled: PropTypes.bool

//注入的JavaScript代碼
injectedJavaScript: PropTypes.string

//是否按照頁面比例和內容高度比例自動縮放內容
scalesPageToFit: PropTypes.bool

//是否支持網頁內部音視頻播放
allowsInlineMediaPlayback: PropTypes.bool

 

3、函數

//渲染失敗
renderError: PropTypes.func

//渲染中
renderLoading: PropTypes.func

//即將對資源發送請求
onShouldStartLoadWithRequest: PropTypes.func

//網頁資源開始加載
onLoadStart: PropTypes.func

//網頁資源加載中
onLoad: PropTypes.func

//網頁資源加載結束
onLoadEnd: PropTypes.func

//網頁資源加載失敗
onError: PropTypes.func

//監聽導航狀態變化，能夠在該函數中完成OAuth認證
onNavigationStateChange: PropTypes.func

//收到H5的消息
onMessage: PropTypes.func

//給H5發送消息
injectJavaScript: PropTypes.func

 

三、使用

myWebView.js

import React, { Component } from 'react';

import {
    StyleSheet,
    View,
    WebView,
    Dimensions
} from 'react-native';

const {width, height} = Dimensions.get('window');

export default class MyWebView extends Component{

    render() {
        return (
            <View style={styles.flex}>
                <WebView
                    refs="webview"
                    style={styles.web}
                    source={{uri: "https://www.baidu.com"}}
                    automaticallyAdjustContentInsets={true}
                    scalesPageToFit={true}
                    startInLoadingState={true}
                    bounces={false}
                    javaScriptEnabled={true}
                    injectedJavaScript = {`alert('I AM XYQ');`}
                    onLoadStart={() => {
                        console.log("--onLoadStart--")
                    }}
                    onLoad={() => {
                        console.log("--onLoad--")
                    }}
                    onLoadEnd={() => {
                        console.log("--onLoadEnd--")
                    }}
                    onError={() => {
                        console.log("--onError--")
                    }}
                />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    flex: {
        flex: 1
    },
    web: {
        height: height,
        width: width
    }
});

2019-12-16 14:20:36.436 [info][tid:com.facebook.react.JavaScript] --onLoadStart--
2019-12-16 14:20:37.722 [info][tid:com.facebook.react.JavaScript] --onLoad--
2019-12-16 14:20:37.723 [info][tid:com.facebook.react.JavaScript] --onLoadEnd--
>>>> frameSizeChanged = 4096
2019-12-16 14:20:38.679 [info][tid:com.facebook.react.JavaScript] --onLoad--
2019-12-16 14:20:38.683 [info][tid:com.facebook.react.JavaScript] --onLoadEnd--