React Native知識8-WebView組件

時間 2019-12-20

標籤 react native 知識 webview 組件欄目 React 简体版

原文原文鏈接

建立一個原生的WebView，能夠用於訪問一個網頁。能夠加載一個URL也能夠加載一段html代碼；php

一：屬性css

1：iosallowsInlineMediaPlayback bool html

指定HTML5視頻是在網頁當前位置播放仍是使用原生的全屏播放器播放。默認值爲false。java

注意 : 要讓視頻在網頁中播放，不光要將這個屬性設爲true，HTML中的視頻元素自己也須要包含webkit-playsinline屬性。react

2：automaticallyAdjustContentInsets bool android

3：（ios）bounces bool ios

contentInset {top: number, left: number, bottom: number, right: number} git

4：（ios）decelerationRate ScrollView.propTypes.decelerationRate github

指定一個浮點數，用於設置在用戶中止觸摸以後，此視圖應以多快的速度中止滾動。也能夠指定預設的字符串值，如"normal"和"fast"，分別對應UIScrollViewDecelerationRateNormal 和UIScrollViewDecelerationRateFast。web

Normal（正常速度）: 0.998

Fast（較快速度）: 0.9 (iOS WebView的默認值)

5：（android）domStorageEnabled bool

僅限Android平臺。指定是否開啓DOM本地存儲。

6：html string 已過時

請使用source 屬性代替。

7：injectedJavaScript string

設置在網頁加載以前注入的一段JS代碼。

8：mediaPlaybackRequiresUserAction bool

設置頁面中的HTML5音視頻是否須要在用戶點擊後再開始播放。默認值爲false.

9：onError function

加載失敗時調用。

10：onLoad function

加載成功時調用。

11：onLoadEnd function

加載結束時（不管成功或失敗）調用。

12：onLoadStart function

加載開始時調用。

13：（android）javaScriptEnabled bool

僅限Android平臺。iOS平臺JavaScript是默認開啓的。

14：onNavigationStateChange function

15：（ios）onShouldStartLoadWithRequest function

容許爲webview發起的請求運行一個自定義的處理函數。返回true或false表示是否要繼續執行響應的請求。

16：renderError function

設置一個函數，返回一個視圖用於顯示錯誤。

17：renderLoading function

設置一個函數，返回一個加載指示器。

18：source {uri: string, method: string, headers: object, body: string}, {html: string, baseUrl: string}, number

在WebView中載入一段靜態的html代碼或是一個url（還能夠附帶一些header選項）。

19：scalesPageToFit bool

設置是否要把網頁縮放到適應視圖的大小，以及是否容許用戶改變縮放比例。

20：（ios）scrollEnabled bool

21：startInLoadingState bool

22：style View#style

23：url string

已過時

請使用source 屬性代替。

24：（android）userAgent string #

爲WebView設置user-agent字符串標識。這一字符串也能夠在原生端用WebViewConfig來設置,但js端的設置會覆蓋原生端的設置。

二：實例代碼：

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

const HTML = `
<!DOCTYPE html>\n
<html>
  <head>
    <title>Hello Static World</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=320, user-scalable=no">
    <style type="text/css">
      body {
        margin: 0;
        padding: 0;
        font: 62.5% arial, sans-serif;
        background: #ccc;
      }
      h1 {
        padding: 45px;
        margin: 0;
        text-align: center;
        color: #33f;
      }
    </style>
  </head>
  <body>
    <h1>Hello Static World</h1>
  </body>
</html>
`;

const url='http://www.cocoachina.com/';



//導航欄
class ReactNativeProject extends Component {
  render() {
    return (
      <WebView style={styles.container} source={{uri: url}} onLoad={()=>alert('加載成功')}/>
      );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop:64
  },
  item:
  {
    fontSize:18,
    marginLeft:5,
    color:'#434343'
  }
});

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

效果圖：

三：知識點：

1：其它加載方式：

        <WebView
          style={{
            backgroundColor: BGWASH,
            height: 100,
          }}
          source={{
            uri: 'http://www.posttestserver.com/post.php',
            method: 'POST',
            body: 'foo=bar&bar=foo'
          }}
          scalesPageToFit={false}
        />

        <WebView
          style={{
            backgroundColor: BGWASH,
            height: 100,
          }}
          source={require('./helloworld.html')}
          scalesPageToFit={true}
        />

<WebView
          style={{
            backgroundColor: BGWASH,
            height: 100,
          }}
          source={{html: HTML}}
          scalesPageToFit={true}
        />

其中HTML是html文本常量；是一段html代碼

最近有個妹子弄的一個關於擴大眼界跟內含的訂閱號，天天都會更新一些深度內容，在這裏若是你感興趣也能夠關注一下(嘿對美女跟知識感興趣)，固然能夠關注後輸入：github 會有個人微信號，若是有問題你也能夠在那找到我；固然不感興趣無視此信息；