一個包裝了平台的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 string
borderColor string
borderTopColor string
borderRightColor string
borderBottomColor string
borderLeftColor string
borderRadius number
borderTopLeftRadius number
borderTopRightRadius number
borderBottomLeftRadius number
borderBottomRightRadius number
borderStyle enum('solid', 'dotted', 'dashed')
borderWidth number
borderTopWidth number
borderRightWidth number
borderBottomWidth number
borderLeftWidth number
opacity number
overflow enum('visible', 'hidden')
shadowColor string
shadowOffset {width: number, height: number}
shadowOpacity number
shadowRadius number
androidendFillColor 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來設置，必須用這個屬性名稱
否則：
最近有個妹子弄的一個關於擴大眼界跟內含的訂閱號，每天都會更新一些深度內容，在這里如果你感興趣也可以關注一下(嘿對美女跟知識感興趣)，當然可以關注后輸入：github 會有我的微信號，如果有問題你也可以在那找到我；當然不感興趣無視此信息；
