基礎篇章：關于 React Native 之 WebView 的講解

今天講解的這個組件真的是很基礎，不用多說，相信大家關于這個控件，一看就會。當然實踐才是檢驗自己最好的方法。

大家好，我就是很多人喜歡用，而且常用的組件：WebView ，我就是WebView ，WebView 就是我。我的功能就是一句：在本地視圖中呈現web內容。給我一個鏈接，我還你一堆內容。非常的神奇吧，這就像，牛吃進去的是草，拉出來的是……不對，哈哈，開個玩笑。和我玩其實很簡單，了解我的性格特點，再給我一個吃的，我就能給你玩出你想要的花樣。

我的屬性

• automaticallyAdjustContentInsets bool 設置是否自動調整內嵌插頁內容
• contentInset 設置網頁內嵌內容大小，距離上下左右邊距
• injectedJavaScript string 設置在網頁加載之前注入的一段JS代碼
• mediaPlaybackRequiresUserAction bool 設置頁面中的HTML5音視頻是否需要在用戶點擊后再開始播放。默認值為false
• onError function 網頁加載失敗時調用
• onLoad function 網頁加載成功時調用
• onLoadEnd function 網頁加載結束時（無論成功或失敗）調用
• onLoadStart function 網頁加載開始時調用
• onNavigationStateChange function 當導航狀態發生變化時回調
• renderError function 渲染視圖錯誤時使用
• renderLoading function 該函數功能是返回一個加載指示器
• scalesPageToFit bool 設置是否要把網頁縮放到適應視圖的大小，和改變縮放比例
• source {uri: string, method: string, headers: object, body: string}, {html: string, baseUrl: string}, number 存放加載靜態html或者url等
• startInLoadingState bool 強制webview在第一次加載時是否顯示加載視圖
• domStorageEnabled bool android 控制dom存儲是否啟用
• javaScriptEnabled bool android 是否啟用支持js
• userAgent string android 設置userAgent
• allowsInlineMediaPlayback bool ios 指定HTML5視頻是在網頁當前位置播放還是使用原生的全屏播放器播放，默認值為false。
• bounces bool ios 設置當它到達內容的邊緣web視圖是否反彈。默認值是true。
• dataDetectorTypes DataDetectorTypes, [object Object] ios 確實可點擊的url類型
• decelerationRate ScrollView.propTypes.decelerationRate ios 滾動滑動速率
• onShouldStartLoadWithRequest function ios
• scrollEnabled bool ios 是否滾動

看看，我的性格還是很多變的吧，這么多，其實用起來都是很簡單的，不信看實例。

我的嬌羞展示

效果圖

實例代碼

/**
 * Sample React Native App
 * https://github.com/非死book/react-native
 * @flow
 */

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

WEBVIEW_REF = 'webview';

export default classWebViewDemoextendsComponent{
  render() {
    return (
       <Viewstyle={styles.container}>
        <Viewstyle={styles.title_view}>
           <TouchableOpacity
            onPress={this.goBack.bind(this)}
            >
            <Textstyle={styles.title_text}>
               返回
            </Text>
          </TouchableOpacity>
         <Textstyle={styles.title_text}>
               非著名程序員
         </Text>
          <TouchableOpacity
            onPress={this.goForward.bind(this)}
            >
         <Textstyle={styles.title_text}>
               前進
         </Text>
         </TouchableOpacity>
        </View>
        <WebView
          ref={WEBVIEW_REF}
          source={{uri: 'http://godcoder.me/'}}
          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:'#27b5ee',
  },
   title_text:{
    color:'white',
    fontSize:22,
    textAlign:'center'
  },
});

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

是不是很簡單，對就是這么簡單，趕緊行動起來學習吧。好記性不如敲代碼。

來自：http://godcoder.me/2017/03/14/基礎篇章：關于 React Native 之 WebView 的講解/