方法_Methods:
- scrollToEnd()
scrollToEnd(([options]: {animated: boolean, duration: number}));
-
animated defaults to
true - duration specify for Android
- scrollTo()
scrollTo({x: 0, y: 0, animated: true})
- flashScrollIndicators()
短暫地顯示滾動指示器。
屬性_Props:
zoom 相關
-
bouncesZoom= {true} : 彈性 , 手勢可以驅動縮放超過最小/大,縮放將在手勢結束時動畫到最小/大值。 maximumZoomScaleminimumZoomScale-
zoomScale: The current scale of the scroll view content -
pinchGestureEnabled= {true} : 允許手勢縮放
stickyHeader 相關
-
stickyHeaderIndices= {[0]} : the first child to be fixed to the top of the scroll view. -
invertStickyHeaders= {true} : stick at thebottominstead of the top of the ScrollView.
翻頁相關
page :翻整頁
-
pagingEnabledNoted:Vertical pagination is not supported on Android.
snap :翻半頁
Snap in computer graphics - wiki
In computer graphics, snapping allows an object to be easily positioned in alignment with grid lines, guide lines or another object, by causing it to automatically jump to an exact position when the user drags it to the proximity of the desired location.
-
snapToInterval:number [ interval :間距 ]等間距
當設置了此屬性時,會讓滾動視圖滾動停止后,停止在snapToInterval的倍數(shù)的位置。這可以在一些子視圖比滾動視圖本身小的時候用于實現(xiàn)分頁顯示。需要與snapToAlignment組合使用。 -
snapToAlignment: enum('start', 'center', 'end')
當snapToInterval指定時,這個屬性定義這個停駐點相對于Scroll View的關系。 -
snapToOffsets: [30, 50, 80]不等間距 -
snapToEnd: false
Use in conjunction with snapToOffsets. The default value is true. set false to disable this behavior and allow the list to scroll freely between its end and the last snapToOffsets offset. -
snapToStart: true
Use in conjunction with snapToOffsets. The default value is true. set false to disable this behavior and allow the list to scroll freely between its start and the first snapToOffsets offset.
snapToOffsets : Overrides less configurable
pagingEnabledandsnapToIntervalprops.
snapToInterval : Overrides less configurablepagingEnabledprop.
Indicator 相關
-
indicatorStyle: enum('default', 'black', 'white') -
scrollIndicatorInsets:
決定滾動條距離視圖邊緣的坐標。這個值應該和contentInset一樣。默認值為{0, 0, 0, 0}。 showsHorizontalScrollIndicatorshowsVerticalScrollIndicator
Delegate 方法
-
onContentSizeChange: 此函數(shù)會在ScrollView內部可滾動內容的視圖發(fā)生變化時調用。
// eg:
onContentSizeChange={(contentWidth, contentHeight) => {
this.scrollView.scrollToEnd({ animated: true });
}}
-
onMomentumScrollBegin:滾動開始 -
onMomentumScrollEnd: 滾動結束 -
onScrollBeginDrag: 開始拖拽,加速度為+ -
onScrollEndDrag:結束拖拽,加速度為-,仍有速度,未結束滾動 -
onScrollToTop:
Fires when the scroll view scrolls to top after the status bar has been tapped. -
onScroll: onScroll?: (event: ScrollEvent) => void
在滾動的過程中,每幀最多調用一次此回調函數(shù)。調用的頻率可以用scrollEventThrottle屬性來控制。
// ScrollEvent
{
nativeEvent:{
contentInset:{
bottom,
left,
right,
top
},
contentOffset:{
x,
y
},
contentSize:{
height,
width
},
layoutMeasurement:{
height,
width
},
zoomScale
}
}
與Delegate關聯(lián)的Props:
-
scrollsToTop: (related toonScrollToTop)
When true, the scroll view scrolls to top when the status bar is tapped. The default value is true. -
scrollEventThrottle: (related toonScroll)
這個屬性控制在滾動過程中,scroll事件被調用的頻率(單位是每秒事件數(shù)量)。更小的數(shù)值能夠更及時的跟蹤滾動位置,不過可能會帶來性能問題,因為更多的信息會通過bridge傳遞。由于JS事件循環(huán)需要和屏幕刷新率同步,因此設置1-16之間的數(shù)值不會有實質區(qū)別。默認值為0,意味著每次視圖被滾動,scroll事件只會被調用一次。
下拉刷新
-
refreshControl:
指定RefreshControl組件,用于為ScrollView提供下拉刷新功能。只能用于垂直視圖,即horizontal不能為true。
鍵盤收起
-
keyboardDismissMode:
Determines whether the keyboard gets dismissed in response to a drag.
用戶拖拽滾動視圖的時候,是否要隱藏軟鍵盤。
跨平臺可用的值
- 'none' (默認值),拖拽時不隱藏軟鍵盤。
- 'on-drag',當拖拽開始的時候隱藏軟鍵盤。
僅iOS可用的值
- 'interactive',軟鍵盤伴隨拖拽操作同步地消失,并且如果往上滑動會恢復鍵盤。安卓設備上不支持這個選項,會表現(xiàn)的和none一樣。
-
keyboardShouldPersistTaps:
Determines when the keyboard should stay visible after a tap.
如果當前界面有軟鍵盤,那么點擊scrollview后是否收起鍵盤,取決于本屬性的設置。
- 'never' (默認值),點擊TextInput以外的子組件會使當前的軟鍵盤收起。此時子元素不會收到點擊事件。
- 'always',鍵盤不會自動收起,ScrollView也不會捕捉點擊事件,但子組件可以捕獲。
- 'handled',當點擊事件被子組件捕獲時,鍵盤不會自動收起。這樣切換TextInput時鍵盤可以保持狀態(tài)。多數(shù)帶有TextInput的情況下你應該選擇此項。
(Noted:很多人反應TextInput無法自動失去焦點/需要點擊多次切換到其他組件等等問題,其關鍵都是需要將TextInput放到ScrollView中再設置本屬性)
其他
scrollToOverflowEnabled:非用戶操作,指編程方式「scrollTo()」。
When true, the scroll view can beprogrammaticallyscrolled beyond its content size. The default value is false.scrollPerfTag:?? 不懂 不懂 求高人指點
https://facebook.github.io/react-native/docs/scrollview#scrollperftagendFillColor:
有時候滾動視圖會占據(jù)比實際內容更多的空間。這種情況下可以使用此屬性,指定以某種顏色來填充多余的空間,以避免設置背景和創(chuàng)建不必要的繪制開銷。一般情況下并不需要這種高級優(yōu)化技巧。scrollEnabled: 「 是否可用戶操作滾動 」
When false, the view cannot be scrolled viatouch interaction. The default value is true.
Note that the view can always be scrolled by callingscrollTo().removeClippedSubviews: 「 實驗特性 」「 提高性能 」「 default = true 」
Experimental: When true, offscreen child views (whoseoverflowvalue is hidden) are removed from their native backing superview when offscreen. This can improve scrollingperformanceon long lists. Thedefaultvalue istrue.persistentScrollbar:
Causes the scrollbars not to turn transparent when they are not in use. The default value is false.-
overScrollMode: 覆蓋默認的overScroll模式
可選的值有:- 'auto' - 默認值,允許用戶在內容超出視圖高度之后可以滾動視圖。
- 'always' - 無論內容尺寸,用戶始終可以滾動視圖。
- 'never' - 始終不允許用戶滾動視圖。
nestedScrollEnabled:
在Android API level 21(5.0)以上啟用嵌套滾動。iOS上默認支持嵌套滾動。contentContainerStyle:
These styles will be applied to the scroll view content container which wraps all of the child views. Example:disableIntervalMomentum:
When true, the scroll view stops on the next index (in relation to scroll position at release) regardless of how fast the gesture is. This can be used for horizontal pagination when the page is less than the width of the ScrollView. The default value is false.
當為真時,無論手勢的速度有多快,滾動視圖都會在下一個索引處停止(相對于釋放時的滾動位置)。當頁面的寬度小于ScrollView的寬度時,可以使用它進行水平分頁。默認值為false。decelerationRate:
一個浮點數(shù),用于決定當用戶抬起手指之后,滾動視圖減速停下的速度。你也可以設置為"normal"或者"fast",分別對應的是iOS上的UIScrollViewDecelerationRateNormal和 UIScrollViewDecelerationRateFast。
'normal': iOS上是0.998,Android上是0.985(默認值)
'fast': 0.99
其實是物理上的摩擦力的大小,失去動力在摩擦力的作用下,加速度為負,所以最終會停下。
contentInsetAdjustmentBehavior:
This property specifies how thesafe area insetsare used to modify the content area of the scroll view. The default value of this property is "never". Available on iOS 11 and later.disableScrollViewPanResponder:
When true, the default JS pan responder on the ScrollView is disabled, and full control over touches inside the ScrollView is left to its child components. This is particularly useful ifsnapToIntervalis enabled, since it does not follow typical touch patterns. Do not use this on regular ScrollView use cases without snapToInterval as it may cause unexpected touches to occur while scrolling. The default value is false.
-
maintainVisibleContentPosition:
https://facebook.github.io/react-native/docs/scrollview#maintainvisiblecontentposition
VR Platfrom Props
-
scrollBarThumbImage:
https://facebook.github.io/react-native/docs/scrollview#scrollbarthumbimage