React Native 其他组件之 WebView

使用 WebView 组件我们可以通过 url 来加载显示一个网页，也可以传入一段 html 代码来显示。

属性

• source：在 WebView 中载入一段静态的 html 代码或是一个 url（还可以附带一些 header 选项）
• automaticallyAdjustContentInsets：设置是否自动调整内容。格式：bool
• contentInset：设置内容所占的尺寸大小。格式：{top:number,left:number,bottom:number,right:number}
• injectJavaScript：当网页加载之前注入一段 js 代码。其值是字符串形式。
• startInLoadingState：是否开启页面加载的状态，其值为 true 或者 false。
• onNavigationStateChange：当导航状态发生变化的时候调用。
• onLoadStart：当网页开始加载的时候调用。
• onError：当网页加载失败的时候调用。
• onLoad：当网页加载结束的时候调用。
• onLoadEnd：当网页加载结束调用，不管是成功还是失败。
• renderLoading：WebView组件正在渲染页面时触发的函数，只有 startInLoadingState 为 true 时该函数才起作用。
• renderError：监听渲染页面出错的函数。
• onShouldStartLoadWithRequest（仅iOS）：该方法允许拦截 WebView 加载的 URL 地址，进行自定义处理。该方法通过返回 true 或者 falase 来决定是否继续加载该拦截到请求。
• bounces（仅iOS）：回弹特性。默认为 true。如果设置为 false，则内容拉到底部或者头部都不回弹。
• scalesPageToFit（仅iOS）：用于设置网页是否缩放自适应到整个屏幕视图，以及用户是否可以改变缩放页面。
• scrollEnabled（仅iOS）：用于设置是否开启页面滚动。
• domStorageEnabled（仅Android）：用于控制是否开启 DOM Storage（存储）。
• javaScriptEnabled（仅Android）：是否开启 JavaScript，在 iOS 中的 WebView 是默认开启的。

实例

1. 逻辑代码

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  WebView,
  StatusBar,
  Text,
  TouchableOpacity
} from 'react-native';
var WEBVIEW_REF = 'webview';
export default class App extends Component { 
  
  render() {
    return (
      <View style={styles.container}>
        <StatusBar
          hidden={false}
        />
        <View style={styles.title_view}>
          <TouchableOpacity
            onPress={this.goBack.bind(this)}
          >
            <Text style={styles.title_text}>
              返回
            </Text>
          </TouchableOpacity>
          <Text style={styles.title_text}>
            duoduo_1101
         </Text>
          <TouchableOpacity
            onPress={this.goForward.bind(this)}
          >
            <Text style={styles.title_text}>
              前进
         </Text>
          </TouchableOpacity>
        </View>

        <WebView
          ref={WEBVIEW_REF}
          source = {
            {
              uri: 'https://www.jianshu.com/u/7ca4b115e1df'
            }
          }
          startInLoadingState={true}
          domStorageEnabled={true}
          javaScriptEnabled={true}
          automaticallyAdjustContentInsets={true}
        />
        </View>
    )
  }

  goBack() {
    this.refs[WEBVIEW_REF].goBack();
  }

  goForward() {
    this.refs[WEBVIEW_REF].goForward();
  }
}

const styles = StyleSheet.create({
  
  container: {
    flex: 1,
    backgroundColor: 'white'
  },
  title_view: {
    flexDirection: 'row',
    height: 50,
    paddingLeft: 15,
    paddingRight: 15,
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: '#1FB9FF',
  },
  title_text: {
    color: 'white',
    fontSize: 18,
    textAlign: 'center'
  },
  
});

2. 效果图

webview.jpg