React Native ScrollView : 属性和方法

2020-01-01  本文已影响0人  派大星的博客

方法_Methods:

  1. scrollToEnd()
scrollToEnd(([options]: {animated: boolean, duration: number}));
  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 :翻整页

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.

snapToOffsets : Overrides less configurable pagingEnabled and snapToInterval props.
snapToInterval : Overrides less configurable pagingEnabled prop.


Indicator 相关


Delegate 方法

// eg:  
 onContentSizeChange={(contentWidth, contentHeight) => {
      this.scrollView.scrollToEnd({ animated: true });
  }}
//  ScrollEvent
{  
   nativeEvent:{  
      contentInset:{  
         bottom,
         left,
         right,
         top
      },
      contentOffset:{  
         x,
         y
      },
      contentSize:{  
         height,
         width
      },
      layoutMeasurement:{  
         height,
         width
      },
      zoomScale
   }
}

与Delegate关联的Props:


下拉刷新


键盘收起

Determines whether the keyboard gets dismissed in response to a drag.
用户拖拽滚动视图的时候,是否要隐藏软键盘。

跨平台可用的值

仅iOS可用的值


Determines when the keyboard should stay visible after a tap.
如果当前界面有软键盘,那么点击scrollview后是否收起键盘,取决于本属性的设置。

(Noted:很多人反应TextInput无法自动失去焦点/需要点击多次切换到其他组件等等问题,其关键都是需要将TextInput放到ScrollView中再设置本属性)


其他

其实是物理上的摩擦力的大小,失去动力在摩擦力的作用下,加速度为负,所以最终会停下。


VR Platfrom Props

上一篇 下一篇

猜你喜欢

热点阅读