React Native ScrollView : 屬性和方法

方法_Methods:

  1. scrollToEnd()
scrollToEnd(([options]: {animated: boolean, duration: number}));
  • animated defaults to true
  • duration specify for Android
  1. scrollTo()
scrollTo({x: 0, y: 0, animated: true})
  1. flashScrollIndicators()

短暫地顯示滾動指示器。


屬性_Props:

zoom 相關

  1. bouncesZoom = {true} : 彈性 , 手勢可以驅動縮放超過最小/大,縮放將在手勢結束時動畫到最小/大值。
  2. maximumZoomScale
  3. minimumZoomScale
  4. zoomScale: The current scale of the scroll view content
  5. pinchGestureEnabled= {true} : 允許手勢縮放

stickyHeader 相關

  1. stickyHeaderIndices= {[0]} : the first child to be fixed to the top of the scroll view.
  2. invertStickyHeaders= {true} : stick at the bottom instead of the top of the ScrollView.

翻頁相關

page :翻整頁

  • pagingEnabled Noted: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 pagingEnabled and snapToInterval props.
snapToInterval : Overrides less configurable pagingEnabled prop.


Indicator 相關

  • indicatorStyle : enum('default', 'black', 'white')
  • scrollIndicatorInsets:
    決定滾動條距離視圖邊緣的坐標。這個值應該和contentInset一樣。默認值為{0, 0, 0, 0}。
  • showsHorizontalScrollIndicator
  • showsVerticalScrollIndicator

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 to onScrollToTop)
    When true, the scroll view scrolls to top when the status bar is tapped. The default value is true.
  • scrollEventThrottle : (related to onScroll)
    這個屬性控制在滾動過程中,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 be programmatically scrolled beyond its content size. The default value is false.

  • scrollPerfTag:?? 不懂 不懂 求高人指點
    https://facebook.github.io/react-native/docs/scrollview#scrollperftag

  • endFillColor
    有時候滾動視圖會占據(jù)比實際內容更多的空間。這種情況下可以使用此屬性,指定以某種顏色來填充多余的空間,以避免設置背景和創(chuàng)建不必要的繪制開銷。一般情況下并不需要這種高級優(yōu)化技巧。

  • scrollEnabled: 「 是否可用戶操作滾動 」
    When false, the view cannot be scrolled via touch interaction. The default value is true.
    Note that the view can always be scrolled by calling scrollTo().

  • removeClippedSubviews: 「 實驗特性 」「 提高性能 」「 default = true 」
    Experimental: When true, offscreen child views (whose overflow value is hidden) are removed from their native backing superview when offscreen. This can improve scrolling performance on long lists. The default value is true.

  • 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 the safe area insets are 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 if snapToInterval is 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.


VR Platfrom Props

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • Documentation Supported OS & SDK Versions 支持的OS & SDK版本 S...
    c5550ea746f8閱讀 4,579評論 0 2
  • pyspark.sql模塊 模塊上下文 Spark SQL和DataFrames的重要類: pyspark.sql...
    mpro閱讀 9,915評論 0 13
  • 很多人對于日更有著諸多的苦難。沒有靈感、沒有時間、沒有素材,沒有太多東西。但是在我看來日更并不難,難的是,日更的每...
    兩個胖女孩閱讀 177評論 0 2
  • 催眠,通常被大家認知為神秘的、驚險的、刺激的、有趣的,但其實催眠是非??茖W的,并且可以幫到我們去解決人生以及生活中...
    武瑜閱讀 382評論 0 0
  • 孩子遇到問題時,你是選擇焦慮困惑深陷其中,亦或到處尋找方法解決問題,還是選擇自我成長執(zhí)著的栽培自己,以便有能力更好...
    彭丹的微笑閱讀 268評論 2 3

友情鏈接更多精彩內容