【React Native】文件翻譯閱讀紀錄 - Components(組件) - ScrollView

by - 上午9:00

Facebook Open Source React Native


ScrollView

包含平台ScrollView的組件,同時提供與觸摸鎖定“響應器”系統的集成。

請記住,ScrollViews必須具有有限的高度才能工作,因為它們將無界高度的子項包含在有界容器中(通過滾動交互)。為了限制ScrollView的高度,可以直接設置視圖的高度(不鼓勵),也可以確保所有父視圖都具有有界高度。忘記在視圖堆棧中向下傳送{flex:1}可能會導致錯誤,元素檢查器可以輕鬆調試。

尚未支持其他包含的響應者阻止此滾動視圖成為響應者。

<ScrollView> vs <FlatList> - 使用哪一個?

ScrollView只是立即呈現其所有反應子組件。這使得它易於理解和使用。

另一方面,這有性能下降。想像一下,你有一個很長的項目列表要顯示,可能有幾個屏幕的內容。同時為所有內容創建JS組件和本機視圖(其中大部分甚至可能無法顯示)將導致渲染速度降低和內存使用量增加。

這就是FlatList發揮作用的地方。 FlatList會在項目即將出現時懶惰地呈現項目,並刪除在屏幕外滾動的項目以節省內存和處理時間。

如果要在項目,多列,無限滾動加載或其支持的任何其他功能之間渲染分隔符,FlatList也很方便。

Props

Methods


參考

Props

alwaysBounceVertical

如果為true,則滾動視圖在到達末尾時會垂直彈跳,即使內容小於滾動視圖本身也是如此。水平= {true}時的默認值為false,否則為true。
TYPEREQUIREDPLATFORM
boolNoiOS

contentContainerStyle

這些樣式將應用於包裝所有子視圖的滾動視圖內容容器。例:
return (
  <ScrollView contentContainerStyle={styles.contentContainer}>
  </ScrollView>
);
...
const styles = StyleSheet.create({
  contentContainer: {
    paddingVertical: 20
  }
});
TYPEREQUIRED
StyleSheetPropType(View Style props)No

keyboardDismissMode

確定鍵盤是否因響應拖動而被解除。
Cross platform
  • 'none' (the default), drags不會關閉鍵盤。
  • 'on-drag', 當拖動開始時鍵盤被解除。
僅適用於 iOS
  • 'interactive',鍵盤以拖動交互方式解除,並與觸摸同步移動;向上拖動取消了解僱。在Android上,這不受支持,它將具有與'none'相同的行為。
TYPEREQUIRED
enum('none', 'on-drag', 'interactive')No

keyboardShouldPersistTaps

確定點擊後鍵盤何時應保持可見。
  • 'never' 當鍵盤向上時,在聚焦文本輸入外部輕敲鍵盤。發生這種情況時,孩子們不會收到水龍頭。
  • 'always', 鍵盤不會自動消失,滾動視圖不會捕捉到點擊,但滾動視圖的子節點可以捕捉到點擊。
  • 'handled', 當子元素處理中鍵盤不會自動解除 (或者獲取父元素).
  • false, 棄用,使用'never'代替
  • true, 棄用,改為使用'always'
TYPEREQUIRED
enum('always', 'never', 'handled', false, true)No

onContentSizeChange

當ScrollView的可滾動內容視圖發生更改時調用。

處理程序函數作為參數傳遞內容寬度和內容高度:(contentWidth,contentHeight)

它是使用附加到此ScrollView呈現的內容容器的onLayout處理程序實現的。
TYPEREQUIRED
functionNo

onMomentumScrollBegin

動量滾動開始時調用(滾動,當ScrollView滑動到停止時)。
TYPEREQUIRED
functionNo

onMomentumScrollEnd

當動量滾動結束時調用(滾動,當ScrollView滑動停止時發生)。
TYPEREQUIRED
functionNo

onScroll

滾動期間每幀最多觸發一次。可以使用scrollEventThrottle prop控制事件的頻率。
TYPEREQUIRED
functionNo

onScrollBeginDrag

當用戶開始拖動滾動視圖時調用。
TYPEREQUIRED
functionNo

onScrollEndDrag

當用戶停止拖動滾動視圖時調用,它會停止或開始滑動。
TYPEREQUIRED
functionNo

pagingEnabled

如果為true,滾動視圖會在滾動時停止滾動視圖大小的倍數。這可以用於水平分頁。默認值為false。
注意:Android不支持垂直分頁。
TYPEREQUIRED
boolNo

refreshControl

RefreshControl組件,用於為ScrollView提供pull-to-refresh功能。僅適用於垂直ScrollViews(水平道具必須為false)。
請參見 RefreshControl.
TYPEREQUIRED
elementNo

removeClippedSubviews

實驗:如果為true,屏幕外的子視圖(其溢出值被隱藏)將在屏幕外從其原生支持superview中刪除。這可以改善長列表上的滾動性能。默認值是true。
TYPEREQUIRED
boolNo

scrollEnabled

如果為false,則無法通過觸摸交互滾動視圖。默認值是true。

請注意,始終可以通過調用scrollTo來滾動視圖。
TYPEREQUIRED
boolNo

showsHorizontalScrollIndicator

如果為true,則顯示水平滾動指示器。默認值是true。
TYPEREQUIRED
boolNo

showsVerticalScrollIndicator

如果為true,則顯示垂直滾動指示器。默認值是true。
TYPEREQUIRED
boolNo

stickyHeaderIndices

一組子索引,用於確定滾動時哪些子項停靠在屏幕頂部。例如,傳遞stickyHeaderIndices = {[0]}將導致第一個子項固定到滾動視圖的頂部。與horizo​​ntal = {true}不支持此屬性。
TYPEREQUIRED
array of numberNo

endFillColor

有時滾動視圖比內容填充佔用更多空間。在這種情況下,此道具將使用顏色填充滾動視圖的其餘部分,以避免設置背景並創建不必要的透支。這是一般情況下不需要的高級優化。
TYPEREQUIREDPLATFORM
colorNoAndroid

overScrollMode

用於覆蓋overScroll模式的默認值。
可能的值:
  • 'auto' - 默認值,僅當內容足夠大才能有意義地滾動時,允許用戶過度滾動此視圖。
  • 'always' - 始終允許用戶過度滾動此視圖。
  • 'never' - 絕不允許用戶過度滾動此視圖。
TYPEREQUIREDPLATFORM
enum('auto', 'always', 'never')NoAndroid

scrollPerfTag

用於在此滾動視圖上記錄滾動性能的標記。將強制動量事件打開(請參閱sendMomentumEvents)。這沒有任何開箱即用的功能,您需要實現自定義本機FpsListener才能使用它。
TYPEREQUIREDPLATFORM
stringNoAndroid

DEPRECATED_sendUpdatedChildFrames

如果為true,ScrollView將在滾動事件中發出updateChildFrames數據,否則將不會計算或發出子幀數據。這僅用於支持遺留問題,而應使用onLayout來檢索幀數據。默認值為false。
TYPEREQUIREDPLATFORM
boolNoiOS

alwaysBounceHorizontal

如果為true,則滾動視圖在到達末尾時會水平彈跳,即使內容小於滾動視圖本身也是如此。水平= {true}時默認值為true,否則為false。
TYPEREQUIREDPLATFORM
boolNoiOS

horizontal

如果為true,則滾動視圖的子項將水平排列成行而不是垂直排列。默認值為false。
TYPEREQUIRED
boolNo

automaticallyAdjustContentInsets

控制iOS是否應自動調整位於導航欄或標籤欄/工具欄後面的滾動視圖的內容插入。默認值是true。
TYPEREQUIREDPLATFORM
boolNoiOS

bounces

如果為true,則滾動視圖在到達內容結尾時彈跳(如果內容大於滾動方向軸的滾動視圖)。如果為false,即使alwaysBounce * props為true,它也會禁用所有彈跳。默認值是true。
TYPEREQUIREDPLATFORM
boolNoiOS

bouncesZoom

如果為true,則手勢可以驅動縮放超過最小值/最大值,縮放將在手勢結束時設置為最小值/最大值,否則縮放將不會超出限制。
TYPEREQUIREDPLATFORM
boolNoiOS

canCancelContentTouches

如果為false,一旦跟踪開始,如果觸摸移動,則不會嘗試拖動。默認值是true。
TYPEREQUIREDPLATFORM
boolNoiOS

centerContent

如果為true,則滾動視圖會在內容小於滾動視圖邊界時自動居中內容;當內容大於滾動視圖時,此屬性不起作用。默認值為false。
TYPEREQUIREDPLATFORM
boolNoiOS

contentInset


滾動視圖內容從滾動視圖的邊緣插入的量。默認為{top:0,left:0,bottom:0,right:0}。

contentInsetAdjustmentBehavior

此屬性指定如何使用安全區域insets來修改滾動視圖的內容區域。此屬性的默認值為“never”。適用於iOS 11及更高版本。
TYPEREQUIREDPLATFORM
enum('automatic', 'scrollableAxes', 'never', 'always')NoiOS

contentOffset

用於手動設置起始滾動偏移。默認值為{x:0,y:0}。
TYPEREQUIREDPLATFORM
PointPropTypeNoiOS

decelerationRate

一個浮點數,用於確定用戶抬起手指後滾動視圖的減速速度。您還可以使用字符串快捷方式“normal”和“fast”,它們分別與UIScrollViewDecelerationRateNormal和UIScrollViewDecelerationRateFast的基礎iOS設置相匹配。
  • 'normal': 0.998 (the default)
  • 'fast': 0.99
TYPEREQUIREDPLATFORM
enum('fast', 'normal'), ,numberNoiOS

directionalLockEnabled

如果為true,則ScrollView將在拖動時嘗試僅鎖定垂直或水平滾動。默認值為false。
TYPEREQUIREDPLATFORM
boolNoiOS

indicatorStyle

滾動指示器的樣式。
  • 'default'默認值),與黑色相同。
  • 'black', 滾動指示燈為黑色。這種風格在淺色背景下很好。
  • 'white', 滾動指示燈為白色。這種風格在深色背景下很好。
TYPEREQUIREDPLATFORM
enum('default', 'black', 'white')NoiOS

maximumZoomScale

允許的最大縮放比例。默認值為1.0。
TYPEREQUIREDPLATFORM
numberNoiOS

minimumZoomScale

允許的最小縮放比例。默認值為1.0。
TYPEREQUIREDPLATFORM
numberNoiOS

pinchGestureEnabled

如果為true,則ScrollView允許使用捏合手勢進行放大和縮小。默認值是true。
TYPEREQUIREDPLATFORM
boolNoiOS

scrollEventThrottle

它控制滾動時滾動事件的頻率(以ms為單位的時間間隔)。較低的數字會為跟踪滾動位置的代碼提供更好的準確性,但由於通過網橋發送的信息量會導致滾動性能問題。當JS運行循環同步到屏幕刷新率時,您將不會注意到在1-16之間設置的值之間的差異。如果您不需要精確滾動位置跟踪,請將此值設置得更高以限制通過網橋發送的信息。默認值為零,這導致滾動事件僅在每次滾動視圖時發送一次。

TYPEREQUIREDPLATFORM
numberNoiOS

scrollIndicatorInsets

滾動視圖指示符從滾動視圖的邊緣插入的量。通常應將此值設置為與contentInset相同的值。默認為{0,0,0,0}。
TYPEREQUIREDPLATFORM
object: {top: number, left: number, bottom: number, right: number}NoiOS

scrollsToTop

如果為true,則在點擊狀態欄時滾動視圖會滾動到頂部。默認值是true。
TYPEREQUIREDPLATFORM
boolNoiOS

snapToAlignment

設置snapToInterval時,snapToAlignment將定義捕捉到滾動視圖的關係。
  • 'start' (默認值)將對齊左側(水平)或頂部(垂直)的捕捉
  • 'center' 將按鈕對齊中心
  • 'end' 將對齊右側(水平)或底部(垂直)的按扣
TYPEREQUIRED
enum('start', 'center', 'end')No

snapToInterval

設置時,使滾動視圖停止在snapToInterval值的倍數處。這可用於通過長度小於滾動視圖的子項進行分頁。通常與snapToAlignment和decelerationRate =“fast”結合使用。覆蓋較少可配置的pagingEnabled prop。

注意:Android不支持垂直snapToInterval。
TYPEREQUIRED
numberNo

zoomScale

滾動視圖內容的當前比例。默認值為1.0。
TYPEREQUIREDPLATFORM
numberNoiOS

nestedScrollEnabled

為Android API級別21+啟用嵌套滾動。 iOS上默認支持嵌套滾動。
TYPEREQUIREDPLATFORM
boolNoAndroid

方法

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();
暫時顯示滾動指示器。





You May Also Like

0 意見