React Native知識9-ScrollView組件

標籤：

一個封裝了平台的ScrollView（滾動視圖）的組件，同時還整合了觸摸鎖定的“響應者”系統。

記住ScrollView必須有一個確定的高度才能正常工作，因為它實際上所做的就是將一系列不確定高度的子組件裝進一個確定高度的容器（通過滾動操作）。要給一個ScrollView確定一個高度的話，要麼直接給它設定高度（不建議），要麼確定所有的父容器都已經綁定了高度。在視圖棧的任意一個位置忘記使用{flex:1}都會導致錯誤，你可以使用元素查看器來尋找問題的原因。

ScrollView內部的其他響應者尚無法阻止ScrollView本身成為響應者。

一：屬性

1：contentContainerStyle StyleSheetPropType(ViewStylePropTypes) 

這些樣式會應用到一個內層的內容容器上，所有的子視圖都會包裹在內容容器內。例子：

return (    <ScrollView contentContainerStyle={styles.contentContainer}>    </ScrollView>  );  ...  var styles = StyleSheet.create({    contentContainer: {      paddingVertical: 20    }  });

2：horizontal bool 

當此屬性為true的時候，所有的的子視圖會在水平方向上排成一行，而不是預設的在垂直方向上排成一列。預設值為false。

3：keyboardDismissMode enum(‘none‘, "interactive", ‘on-drag‘) 

使用者拖拽滾動視圖的時候，是否要隱藏軟鍵盤。

4：none（預設值），拖拽時不隱藏軟鍵盤。

5：on-drag 當拖拽開始的時候隱藏軟鍵盤。

6：interactive 軟鍵盤伴隨拖拽操作同步地消失，並且如果往上滑動會恢複鍵盤。安卓裝置上不支援這個選項，會表現的和none一樣。

7：keyboardShouldPersistTaps bool 

當此屬性為false的時候，在軟鍵盤啟用之後，點擊焦點文本輸入框以外的地方，鍵盤就會隱藏。如果為true，滾動視圖不會響應點擊操作，並且鍵盤不會自動消失。預設值為false。

8：onContentSizeChange function 

此函數會在ScrollView內部可滾動內容的視圖發生變化時調用。

調用參數為內容視圖的寬和高: (contentWidth, contentHeight)

此方法是通過綁定在內容容器上的onLayout來實現的。

9：onScroll function 

在滾動的過程中，每幀最多調用一次此回呼函數。調用的頻率可以用scrollEventThrottle屬性來控制。

10：refreshControl element 

指定RefreshControl組件，用於為ScrollView提供下拉重新整理功能。

11：removeClippedSubviews bool 

（實驗特性）：當此屬性為true時，螢幕之外的子視圖（子視圖的overflow樣式需要設為hidden）會被移除。這個可以提升大列表的滾動效能。預設值為true。

12：showsHorizontalScrollIndicator bool 

當此屬性為true的時候，顯示一個水平方向的捲軸。

13：showsVerticalScrollIndicator bool 

當此屬性為true的時候，顯示一個垂直方向的捲軸。

有時候滾動視圖會佔據比實際內容更多的空間。這種情況下可以使用此屬性，指定以某種顏色來填充多餘的空間，以避免設定背景和建立不必要的繪製開銷。一般情況下並不需要這種進階最佳化技巧。

14：（ios）alwaysBounceHorizontal bool 

當此屬性為true時，水平方向即使內容比滾動視圖本身還要小，也可以彈性地拉動一截。當horizontal={true}時預設值為true，否則為false。

15：（ios）alwaysBounceVertical bool 

當此屬性為true時，垂直方向即使內容比滾動視圖本身還要小，也可以彈性地拉動一截。當horizontal={true}時預設值為false，否則為true。

16：（ios）automaticallyAdjustContentInsets bool 

如果滾動視圖放在一個導航條或者工具條後面的時候，iOS系統是否要自動調整內容的範圍。預設值為true。（譯註：如果你的ScrollView或ListView的頭部出現莫名其妙的空白，嘗試將此屬性置為false）

18：（ios）bounces bool 

當值為true時，如果內容約制比滾動視圖本身大，在到達內容末尾的時候，可以彈性地拉動一截。如果為false，尾部的所有彈性都會被禁用，即使alwaysBounce*屬性為true。預設值為true。

19：（ios）bouncesZoom bool 

當值為true時，使用手勢縮放內容可以超過min/max的限制，然後在手指抬起之後彈回min/max的縮放比例。否則的話，縮放不能超過限制。

20：（ios）canCancelContentTouches bool 

當值為false時，一旦有子節點響應觸摸操作，即使手指開始移動也不會拖動滾動視圖。預設值為true（在以上情況下可以拖動滾動視圖。）

21：（ios）centerContent bool 

當值為true時，如果滾動視圖的內容比視圖本身小，則會自動把內容置中放置。當內容比滾動視圖大的時候，此屬性沒有作用。預設值為false。

22：（ios）contentInset {top: number, left: number, bottom: number, right: number} 

內容約制相對滾動視圖邊緣的座標。預設為{0, 0, 0, 0}。

23：（ios）contentOffset PointPropType 

用來手動設定初始的滾動座標。預設值為{x: 0, y: 0}。

24：（ios）decelerationRate number 

一個浮點數，用於決定當使用者抬起手指之後，滾動視圖減速停下的速度。常見的選項有：

Normal: 0.998 (預設值)

Fast: 0.9

25：（ios）directionalLockEnabled bool 

當值為真時，滾動視圖在拖拽的時候會鎖定只有垂直或水平方向可以滾動。預設值為false。

26：（ios）maximumZoomScale number 

允許的最大縮放比例。預設值為1.0。

27：（ios）minimumZoomScale number 

允許的最小縮放比例。預設值為1.0。

28：（ios）onRefreshStart function 

已到期

請使用refreshControl 屬性代替。

29：（ios）onScrollAnimationEnd function 

當滾動動畫結束之後調用此回調。

30：pagingEnabled bool 

當值為true時，捲軸會停在滾動視圖的尺寸的整數倍位置。這個可以用在水平分頁上。預設值為false。

31：（ios）scrollEnabled bool 

當值為false的時候，內容不能滾動，預設值為true。

32：（ios）scrollEventThrottle number 

這個屬性控制在滾動過程中，scroll事件被調用的頻率（單位是每秒事件數目量）。更大的數值能夠更及時的跟蹤滾動位置，不過可能會帶來效能問題，因為更多的資訊會通過bridge傳遞。預設值為0，意味著每次視圖被滾動，scroll事件只會被調用一次。

33：（ios）scrollIndicatorInsets {top: number, left: number, bottom: number, right: number} 

決定捲軸距離視圖邊緣的座標。這個值應該和contentInset一樣。預設值為{0, 0, 0, 0}。

34：（ios）scrollsToTop bool 

當此值為true時，點擊狀態列的時候視圖會滾動到頂部。預設值為true。

35：（ios）snapToAlignment enum(‘start‘, "center", ‘end‘) 

當設定了snapToInterval，snapToAlignment會定義停駐點與滾動視圖之間的關係。

36：start (預設) 會將停駐點對齊在左側（水平）或頂部（垂直）

37：center 會將停駐點對齊到中間

38：end 會將停駐點對齊到右側（水平）或底部（垂直）

39：（ios）snapToInterval number 

當設定了此屬性時，會讓滾動視圖滾動停止後，停止在snapToInterval的倍數的位置。這可以在一些子視圖比滾動視圖本身小的時候用於實現分頁顯示。與snapToAlignment組合使用。

40：（ios）stickyHeaderIndices [number] 

一個子視圖下標的數組，用於決定哪些成員會在滾動之後固定在螢幕頂端。舉個例子，傳遞stickyHeaderIndices={[0]}會讓第一個成員固定在滾動視圖頂端。這個屬性不能和horizontal={true}一起使用。

41：（ios）zoomScale number 

滾動視圖內容初始的縮放比例。預設值為1.0。

二：樣式

Flexbox...ShadowPropTypesIOS#style...Transforms...backfaceVisibility enum(‘visible‘, ‘hidden‘)backgroundColor stringborderColor stringborderTopColor stringborderRightColor stringborderBottomColor stringborderLeftColor stringborderRadius numberborderTopLeftRadius numberborderTopRightRadius numberborderBottomLeftRadius numberborderBottomRightRadius numberborderStyle enum(‘solid‘, ‘dotted‘, ‘dashed‘)borderWidth numberborderTopWidth numberborderRightWidth numberborderBottomWidth numberborderLeftWidth numberopacity numberoverflow enum(‘visible‘, ‘hidden‘)shadowColor stringshadowOffset {width: number, height: number}shadowOpacity numbershadowRadius numberandroidendFillColor color 

三：方法

1：scrollTo(y: number | { x?: number, y?: number, animated?: boolean }, x: number, animated: boolean) 

滾動到指定的x, y位移處。第三個參數為是否啟用平滑滾動動畫。

使用樣本:

2：scrollTo({x: 0, y: 0, animated: true})

四：執行個體代碼

import React, { Component } from ‘react‘;import {  AppRegistry,  StyleSheet,  Text,  View,  TextInput,  Alert,  TouchableHighlight,  TouchableOpacity,  WebView,  ScrollView} from ‘react-native‘;//導覽列class ReactNativeProject extends Component {  render() {    return (      <View style={styles.container}>              <Text style={{marginTop:50}}>                 進行測試ScrollView控制項              </Text>               <ScrollView showsVerticalScrollIndicator={true}                    contentContainerStyle={styles.contentContainer}>                  <Text                  style={{color:‘#FFF‘,margin:5,fontSize:16,backgroundColor:"blue"}}>                      Shake or press menu button for dev menuShake or press menu button for dev menu                      Shake or press menu button for dev menuShake or press menu button for dev menu                      Shake or press menu button for dev menuShake or press menu button for dev menu                      Shake or press menu button for dev menuShake or press menu button for dev menu                      Shake or press menu button for dev menuShake or press menu button for dev menu                      Shake or press menu button for dev menuShake or press menu button for dev menu                      Shake or press menu button for dev menuShake or press menu button for dev menu                      Shake or press menu button for dev menuShake or press menu button for dev menu                      Shake or press menu button for dev menuShake or press menu button for dev menu                      Shake or press menu button for dev menuShake or press menu button for dev menu                      Shake or press menu button for dev menuShake or press menu button for dev menu                      Shake or press menu button for dev menuShake or press menu button for dev menu                      Shake or press menu button for dev menuShake or press menu button for dev menu                      Shake or press menu button for dev menuShake or press menu button for dev menu                      Shake or press menu button for dev menuShake or press menu button for dev menu                      Shake or press menu button for dev menuShake or press menu button for dev menu                      Shake or press menu button for dev menuShake or press menu button for dev menu                      Shake or press menu button for dev menuShake or press menu button for dev menu                      Shake or press menu button for dev menuShake or press menu button for dev menu                      Shake or press menu button for dev menuShake or press menu button for dev menu                      Shake or press menu button for dev menuShake or press menu button for dev menu                      Shake or press menu button for dev menuShake or press menu button for dev menu                      Shake or press menu button for dev menuShake or press menu button for dev menu                      Shake or press menu button for dev menuShake or press menu button for dev menu                      Shake or press menu button for dev menuShake or press menu button for dev menu                      Shake or press menu button for dev menuShake or press menu button for dev menu                      Shake or press menu button for dev menuShake or press menu button for dev menu                  </Text>               </ScrollView>            </View>      );  }}const styles = StyleSheet.create({  container: {    height:400,    justifyContent: ‘center‘,    alignItems: ‘center‘,    backgroundColor: ‘#F5FCFF‘,  },  contentContainer: {      margin:10,      backgroundColor:"#ff0000",    }});AppRegistry.registerComponent(‘ReactNativeProject‘, () => ReactNativeProject);

：

  

五：知識點

1：contentContainerStyle

這些樣式會應用到一個內層的內容容器上，所有的子視圖都會包裹在內容容器內。PS:ScrollView組件的屬性不能用style來設定，必須用這個屬性名稱

否則：

React Native知識9-ScrollView組件