ReactNative: 使用网页组件WebView组件

一、简介

在移动端开发中，很多时候需要嵌入一个网页来帮助实现某一个活动，这方式大大提高了活动快速迭代的灵活性，在RN中，同样也这么处理这种情况的。其实，这种混合式开发称为Hybird APP，它们就是基于WebView来实现的。React-Native中的WebView组件提供的功能基本满足需求，现在就让我们来研究一下。

 

二、属性

//HTML字符串。已过期，官方推荐使用source代替
hml：PropTypes.string

//URL字符串。已过期，官方推荐使用source代替
url：PropTypes.string

//网页资源，拥有下面三个值
source
1、PropTypes.shape({
        uri: PropTypes.string,
        method: PropTypes.string,
        headers: PropTypes.object,
        body: PropTypes.string,
      }),
2、PropTypes.shape({
        html: PropTypes.string,
        baseUrl: PropTypes.string,
      }),
3、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

 

三、函数

//渲染失败
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--