【React Native】文件翻譯閱讀紀錄 - Components(組件) - ScrollView
Facebook Open Source React Native |
ScrollView
包含平台ScrollView的組件,同時提供與觸摸鎖定“響應器”系統的集成。
請記住,ScrollViews必須具有有限的高度才能工作,因為它們將無界高度的子項包含在有界容器中(通過滾動交互)。為了限制ScrollView的高度,可以直接設置視圖的高度(不鼓勵),也可以確保所有父視圖都具有有界高度。忘記在視圖堆棧中向下傳送{flex:1}可能會導致錯誤,元素檢查器可以輕鬆調試。
尚未支持其他包含的響應者阻止此滾動視圖成為響應者。
<ScrollView> vs <FlatList> - 使用哪一個?
ScrollView只是立即呈現其所有反應子組件。這使得它易於理解和使用。
另一方面,這有性能下降。想像一下,你有一個很長的項目列表要顯示,可能有幾個屏幕的內容。同時為所有內容創建JS組件和本機視圖(其中大部分甚至可能無法顯示)將導致渲染速度降低和內存使用量增加。
這就是FlatList發揮作用的地方。 FlatList會在項目即將出現時懶惰地呈現項目,並刪除在屏幕外滾動的項目以節省內存和處理時間。
如果要在項目,多列,無限滾動加載或其支持的任何其他功能之間渲染分隔符,FlatList也很方便。
請記住,ScrollViews必須具有有限的高度才能工作,因為它們將無界高度的子項包含在有界容器中(通過滾動交互)。為了限制ScrollView的高度,可以直接設置視圖的高度(不鼓勵),也可以確保所有父視圖都具有有界高度。忘記在視圖堆棧中向下傳送{flex:1}可能會導致錯誤,元素檢查器可以輕鬆調試。
尚未支持其他包含的響應者阻止此滾動視圖成為響應者。
<ScrollView> vs <FlatList> - 使用哪一個?
ScrollView只是立即呈現其所有反應子組件。這使得它易於理解和使用。
另一方面,這有性能下降。想像一下,你有一個很長的項目列表要顯示,可能有幾個屏幕的內容。同時為所有內容創建JS組件和本機視圖(其中大部分甚至可能無法顯示)將導致渲染速度降低和內存使用量增加。
這就是FlatList發揮作用的地方。 FlatList會在項目即將出現時懶惰地呈現項目,並刪除在屏幕外滾動的項目以節省內存和處理時間。
如果要在項目,多列,無限滾動加載或其支持的任何其他功能之間渲染分隔符,FlatList也很方便。
Props
alwaysBounceVertical
contentContainerStyle
keyboardDismissMode
keyboardShouldPersistTaps
onContentSizeChange
onMomentumScrollBegin
onMomentumScrollEnd
onScroll
onScrollBeginDrag
onScrollEndDrag
pagingEnabled
refreshControl
removeClippedSubviews
scrollEnabled
showsHorizontalScrollIndicator
showsVerticalScrollIndicator
stickyHeaderIndices
endFillColor
overScrollMode
scrollPerfTag
DEPRECATED_sendUpdatedChildFrames
alwaysBounceHorizontal
horizontal
automaticallyAdjustContentInsets
bounces
bouncesZoom
canCancelContentTouches
centerContent
contentInset
contentInsetAdjustmentBehavior
contentOffset
decelerationRate
directionalLockEnabled
indicatorStyle
maximumZoomScale
minimumZoomScale
pinchGestureEnabled
scrollEventThrottle
scrollIndicatorInsets
scrollsToTop
snapToAlignment
snapToInterval
zoomScale
nestedScrollEnabled
Methods
參考
Props
alwaysBounceVertical
如果為true,則滾動視圖在到達末尾時會垂直彈跳,即使內容小於滾動視圖本身也是如此。水平= {true}時的默認值為false,否則為true。
TYPE | REQUIRED | PLATFORM |
---|---|---|
bool | No | iOS |
contentContainerStyle
這些樣式將應用於包裝所有子視圖的滾動視圖內容容器。例:
return (
<ScrollView contentContainerStyle={styles.contentContainer}>
</ScrollView>
);
...
const styles = StyleSheet.create({
contentContainer: {
paddingVertical: 20
}
});
TYPE | REQUIRED |
---|---|
StyleSheetPropType(View Style props) | No |
keyboardDismissMode
確定鍵盤是否因響應拖動而被解除。
Cross platform
'none'
(the default), drags不會關閉鍵盤。'on-drag'
, 當拖動開始時鍵盤被解除。
僅適用於 iOS
'interactive'
,鍵盤以拖動交互方式解除,並與觸摸同步移動;向上拖動取消了解僱。在Android上,這不受支持,它將具有與'none'相同的行為。
TYPE | REQUIRED |
---|---|
enum('none', 'on-drag', 'interactive') | No |
keyboardShouldPersistTaps
確定點擊後鍵盤何時應保持可見。
'never'
當鍵盤向上時,在聚焦文本輸入外部輕敲鍵盤。發生這種情況時,孩子們不會收到水龍頭。'always'
, 鍵盤不會自動消失,滾動視圖不會捕捉到點擊,但滾動視圖的子節點可以捕捉到點擊。'handled'
, 當子元素處理中鍵盤不會自動解除 (或者獲取父元素).false
, 棄用,使用'never'代替true
, 棄用,改為使用'always'
TYPE | REQUIRED |
---|---|
enum('always', 'never', 'handled', false, true) | No |
onContentSizeChange
當ScrollView的可滾動內容視圖發生更改時調用。
處理程序函數作為參數傳遞內容寬度和內容高度:(contentWidth,contentHeight)
它是使用附加到此ScrollView呈現的內容容器的onLayout處理程序實現的。
處理程序函數作為參數傳遞內容寬度和內容高度:(contentWidth,contentHeight)
它是使用附加到此ScrollView呈現的內容容器的onLayout處理程序實現的。
TYPE | REQUIRED |
---|---|
function | No |
onMomentumScrollBegin
動量滾動開始時調用(滾動,當ScrollView滑動到停止時)。
TYPE | REQUIRED |
---|---|
function | No |
onMomentumScrollEnd
當動量滾動結束時調用(滾動,當ScrollView滑動停止時發生)。
TYPE | REQUIRED |
---|---|
function | No |
onScroll
滾動期間每幀最多觸發一次。可以使用scrollEventThrottle prop控制事件的頻率。
TYPE | REQUIRED |
---|---|
function | No |
onScrollBeginDrag
當用戶開始拖動滾動視圖時調用。
TYPE | REQUIRED |
---|---|
function | No |
onScrollEndDrag
當用戶停止拖動滾動視圖時調用,它會停止或開始滑動。
TYPE | REQUIRED |
---|---|
function | No |
pagingEnabled
如果為true,滾動視圖會在滾動時停止滾動視圖大小的倍數。這可以用於水平分頁。默認值為false。
注意:Android不支持垂直分頁。
TYPE | REQUIRED |
---|---|
bool | No |
refreshControl
RefreshControl組件,用於為ScrollView提供pull-to-refresh功能。僅適用於垂直ScrollViews(水平道具必須為false)。
請參見 RefreshControl.
TYPE | REQUIRED |
---|---|
element | No |
removeClippedSubviews
實驗:如果為true,屏幕外的子視圖(其溢出值被隱藏)將在屏幕外從其原生支持superview中刪除。這可以改善長列表上的滾動性能。默認值是true。
TYPE | REQUIRED |
---|---|
bool | No |
scrollEnabled
如果為false,則無法通過觸摸交互滾動視圖。默認值是true。
請注意,始終可以通過調用scrollTo來滾動視圖。
請注意,始終可以通過調用scrollTo來滾動視圖。
TYPE | REQUIRED |
---|---|
bool | No |
showsHorizontalScrollIndicator
如果為true,則顯示水平滾動指示器。默認值是true。
TYPE | REQUIRED |
---|---|
bool | No |
showsVerticalScrollIndicator
如果為true,則顯示垂直滾動指示器。默認值是true。
TYPE | REQUIRED |
---|---|
bool | No |
stickyHeaderIndices
一組子索引,用於確定滾動時哪些子項停靠在屏幕頂部。例如,傳遞stickyHeaderIndices = {[0]}將導致第一個子項固定到滾動視圖的頂部。與horizontal = {true}不支持此屬性。
TYPE | REQUIRED |
---|---|
array of number | No |
endFillColor
有時滾動視圖比內容填充佔用更多空間。在這種情況下,此道具將使用顏色填充滾動視圖的其餘部分,以避免設置背景並創建不必要的透支。這是一般情況下不需要的高級優化。
TYPE | REQUIRED | PLATFORM |
---|---|---|
color | No | Android |
overScrollMode
用於覆蓋overScroll模式的默認值。
可能的值:
'auto'
- 默認值,僅當內容足夠大才能有意義地滾動時,允許用戶過度滾動此視圖。'always'
- 始終允許用戶過度滾動此視圖。'never'
- 絕不允許用戶過度滾動此視圖。
TYPE | REQUIRED | PLATFORM |
---|---|---|
enum('auto', 'always', 'never') | No | Android |
scrollPerfTag
用於在此滾動視圖上記錄滾動性能的標記。將強制動量事件打開(請參閱sendMomentumEvents)。這沒有任何開箱即用的功能,您需要實現自定義本機FpsListener才能使用它。
TYPE | REQUIRED | PLATFORM |
---|---|---|
string | No | Android |
DEPRECATED_sendUpdatedChildFrames
如果為true,ScrollView將在滾動事件中發出updateChildFrames數據,否則將不會計算或發出子幀數據。這僅用於支持遺留問題,而應使用onLayout來檢索幀數據。默認值為false。
TYPE | REQUIRED | PLATFORM |
---|---|---|
bool | No | iOS |
alwaysBounceHorizontal
如果為true,則滾動視圖在到達末尾時會水平彈跳,即使內容小於滾動視圖本身也是如此。水平= {true}時默認值為true,否則為false。
TYPE | REQUIRED | PLATFORM |
---|---|---|
bool | No | iOS |
horizontal
如果為true,則滾動視圖的子項將水平排列成行而不是垂直排列。默認值為false。
TYPE | REQUIRED |
---|---|
bool | No |
automaticallyAdjustContentInsets
控制iOS是否應自動調整位於導航欄或標籤欄/工具欄後面的滾動視圖的內容插入。默認值是true。
TYPE | REQUIRED | PLATFORM |
---|---|---|
bool | No | iOS |
bounces
如果為true,則滾動視圖在到達內容結尾時彈跳(如果內容大於滾動方向軸的滾動視圖)。如果為false,即使alwaysBounce * props為true,它也會禁用所有彈跳。默認值是true。
TYPE | REQUIRED | PLATFORM |
---|---|---|
bool | No | iOS |
bouncesZoom
如果為true,則手勢可以驅動縮放超過最小值/最大值,縮放將在手勢結束時設置為最小值/最大值,否則縮放將不會超出限制。
TYPE | REQUIRED | PLATFORM |
---|---|---|
bool | No | iOS |
canCancelContentTouches
如果為false,一旦跟踪開始,如果觸摸移動,則不會嘗試拖動。默認值是true。
TYPE | REQUIRED | PLATFORM |
---|---|---|
bool | No | iOS |
centerContent
如果為true,則滾動視圖會在內容小於滾動視圖邊界時自動居中內容;當內容大於滾動視圖時,此屬性不起作用。默認值為false。
TYPE | REQUIRED | PLATFORM |
---|---|---|
bool | No | iOS |
contentInset
滾動視圖內容從滾動視圖的邊緣插入的量。默認為{top:0,left:0,bottom:0,right:0}。
contentInsetAdjustmentBehavior
此屬性指定如何使用安全區域insets來修改滾動視圖的內容區域。此屬性的默認值為“never”。適用於iOS 11及更高版本。
TYPE | REQUIRED | PLATFORM |
---|---|---|
enum('automatic', 'scrollableAxes', 'never', 'always') | No | iOS |
contentOffset
用於手動設置起始滾動偏移。默認值為{x:0,y:0}。
TYPE | REQUIRED | PLATFORM |
---|---|---|
PointPropType | No | iOS |
decelerationRate
一個浮點數,用於確定用戶抬起手指後滾動視圖的減速速度。您還可以使用字符串快捷方式“normal”和“fast”,它們分別與UIScrollViewDecelerationRateNormal和UIScrollViewDecelerationRateFast的基礎iOS設置相匹配。
'normal'
: 0.998 (the default)'fast'
: 0.99
TYPE | REQUIRED | PLATFORM |
---|---|---|
enum('fast', 'normal'), ,number | No | iOS |
directionalLockEnabled
如果為true,則ScrollView將在拖動時嘗試僅鎖定垂直或水平滾動。默認值為false。
TYPE | REQUIRED | PLATFORM |
---|---|---|
bool | No | iOS |
indicatorStyle
滾動指示器的樣式。
'default'
默認值),與黑色相同。'black'
, 滾動指示燈為黑色。這種風格在淺色背景下很好。'white'
, 滾動指示燈為白色。這種風格在深色背景下很好。
TYPE | REQUIRED | PLATFORM |
---|---|---|
enum('default', 'black', 'white') | No | iOS |
maximumZoomScale
允許的最大縮放比例。默認值為1.0。
TYPE | REQUIRED | PLATFORM |
---|---|---|
number | No | iOS |
minimumZoomScale
允許的最小縮放比例。默認值為1.0。
TYPE | REQUIRED | PLATFORM |
---|---|---|
number | No | iOS |
pinchGestureEnabled
如果為true,則ScrollView允許使用捏合手勢進行放大和縮小。默認值是true。
TYPE | REQUIRED | PLATFORM |
---|---|---|
bool | No | iOS |
scrollEventThrottle
它控制滾動時滾動事件的頻率(以ms為單位的時間間隔)。較低的數字會為跟踪滾動位置的代碼提供更好的準確性,但由於通過網橋發送的信息量會導致滾動性能問題。當JS運行循環同步到屏幕刷新率時,您將不會注意到在1-16之間設置的值之間的差異。如果您不需要精確滾動位置跟踪,請將此值設置得更高以限制通過網橋發送的信息。默認值為零,這導致滾動事件僅在每次滾動視圖時發送一次。
TYPE | REQUIRED | PLATFORM |
---|---|---|
number | No | iOS |
scrollIndicatorInsets
滾動視圖指示符從滾動視圖的邊緣插入的量。通常應將此值設置為與contentInset相同的值。默認為{0,0,0,0}。
TYPE | REQUIRED | PLATFORM |
---|---|---|
object: {top: number, left: number, bottom: number, right: number} | No | iOS |
scrollsToTop
如果為true,則在點擊狀態欄時滾動視圖會滾動到頂部。默認值是true。
TYPE | REQUIRED | PLATFORM |
---|---|---|
bool | No | iOS |
snapToAlignment
設置snapToInterval時,snapToAlignment將定義捕捉到滾動視圖的關係。
'start'
(默認值)將對齊左側(水平)或頂部(垂直)的捕捉'center'
將按鈕對齊中心'end'
將對齊右側(水平)或底部(垂直)的按扣
TYPE | REQUIRED |
---|---|
enum('start', 'center', 'end') | No |
snapToInterval
設置時,使滾動視圖停止在snapToInterval值的倍數處。這可用於通過長度小於滾動視圖的子項進行分頁。通常與snapToAlignment和decelerationRate =“fast”結合使用。覆蓋較少可配置的pagingEnabled prop。
注意:Android不支持垂直snapToInterval。
注意:Android不支持垂直snapToInterval。
TYPE | REQUIRED |
---|---|
number | No |
zoomScale
滾動視圖內容的當前比例。默認值為1.0。
TYPE | REQUIRED | PLATFORM |
---|---|---|
number | No | iOS |
nestedScrollEnabled
為Android API級別21+啟用嵌套滾動。 iOS上默認支持嵌套滾動。
TYPE | REQUIRED | PLATFORM |
---|---|---|
bool | No | Android |
方法
scrollTo()
scrollTo(([y]: number), object, ([x]: number), ([animated]: boolean));
立即或使用平滑動畫滾動到給定的x,y偏移。
例:
例:
scrollTo({x: 0, y: 0, animated: true})
注意:奇怪的函數簽名是由於以下事實:由於歷史原因,函數還接受單獨的參數作為options對象的替代。這由於含糊不清(在x之前的y)而被棄用,並且不應該被使用。
scrollToEnd()
scrollToEnd(([options]: object));
如果這是垂直ScrollView滾動到底部。 如果這是一個水平ScrollView向右滾動。
使用 scrollToEnd({animated:true})進行平滑的動畫滾動,使用scrollToEnd({animated:false})進行即時滾動。 如果未傳遞任何選項,則動畫默認為 true。
scrollWithoutAnimationTo()
scrollWithoutAnimationTo(y, x);
不推薦使用,請改用 scrollTo。
flashScrollIndicators()
flashScrollIndicators();
暫時顯示滾動指示器。
0 意見