React Native学习之WebView组件

Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。

重点理解：为什么rn中会有WebView？

WebView组件的属性

• automaticallyAdjustContentInsets：是否自动调整内部内容。
• bounces(IOS)：回弹效果 如果为false，则内容拉到底部或头部不回弹，默认为true。
• domStorageEnabled(Android)：仅限Android平台。指定是否开启DOM本地存储。
• javaScriptEnabled：仅限Android平台。iOS平台JavaScript是默认开启的。
• contentInset：内部内容偏移值，该值为一个JavaScript对象{% raw %}{top:number,left:number,bottom:number,right:number}{% endraw %}
• source：{% raw %}{{uri:'网址'}}{% endraw %}在WebView中载入一段静态的html代码或是一个url(还可以附带一些header选项)；{% raw %}{{html:'html代码块'}}{% endraw %}。
• injectedJavaScript：设置在Webview网页加载之前注入的一段JS代码，其值为字符串。
• mediaPlaybackRequiresUserAction：设置页面中的HTML5音视频是否需要在用户点击后再开始播放，默认值为false。
• startInLoadingState：是否开启页面加载的状态。
• scrollEnabled(IOS)：表示Webview里面页面是否能滚动，如果其值为true则可以滚动，否则禁止滚动。
• scalesPageToFit：按照页面比例和内容宽高比例自动缩放内容。
• userAgent：为WebView设置user-agent字符串标识。这一字符串也可以在原生端用WebViewConfig来设置，但js端的设置会覆盖原生端的设置。

WebView组件的方法

• onError：加载失败时调用。
• onLoad：加载成功时调用。
• onLoadEnd：加载结束时(无论成功或失败)调用。
• onLoadStart：加载开始时调用。
• onNavigationStateChange：监听导航状态变化的函数(当发现浏览器地址改变时，触发事件)
• onShouldStartLoadWithRequest：仅限iOS平台。允许为Webview发起的请求运行一个自定义的处理函数。返回true或false表示是否要继续执行响应的请求。
• renderError：监听渲染页面出错的函数，返回一个视图用于显示错误。
• renderLoading：Webview组件正在渲染页面时触发的函数，返回一个加载指示器。需要同startInLoadingState一起使用，当startInLoadingState为true时该函数才起作用

范例：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    Image,
    WebView,
    View,
} from 'react-native';

import Dimensions from 'Dimensions';

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

class RNAPP extends Component{
    constructor(props) {
        super(props);
    }

    render() {
        return(
            <View style={styles.flex}>
                <WebView
                    style={{width: width, height: height}}
                    source={{uri: 'http://www.rnapp.cc'}}
                    //injectedJavaScript={'alert("RNAPP.CC")'}
                    //source={{html: '<div><img scr="http://www.rnapp.cc/webview_test.jpg" /></div>'}}
                    >
                </WebView>
            </View>
        );
    }
}

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

AppRegistry.registerComponent('RNAPP', () => RNAPP);