组件 swipeable - react-native-gest
2019-04-03 本文已影响0人
JamesSawyer
这个组件允许实现可滑动的行(swipeable rows)或者类似的动作.
它的子元素使用 panable container,允许水平向左或者向右滑动。
使用 (Usage)
引入方式:
import Swipable from 'react-native-gesture-handler/Swipeable';
属性 (Properties)
-
friction
:{number} 相对于手势距离视觉交互上的延迟。比如,如果值为1
, 表示可滑动的面板和手势滑动的效果一直。如果为2
,则是手势滑动的2倍慢 -
leftThreshold
: 打开左边面板的距离,默认是pannel宽度的一半 -
rightThreshold
: 同上,只不过是右边 -
overshootLeft
: {boolean} 可滑动面板是否可以比左边动作面板(left actions panel)的宽度拉得更远 -
overshootRight
: 同上,只不过是右边动作面板 -
overshootFriction
: {number} 指定超过时,视觉交互上和手势的延迟的比较。默认值是1
, 即没有friction,可以尝试使用8
以上的值 -
onSwipeableLeftOpen
:左边面板打开时的回调函数 -
onSwipeableRightOpen
: 同上 -
onSwipeableOpen
: 不管是左边还是右边面板打开时的回调 -
onSwipeableClose
: 关闭action面板时的回调 -
onSwipeableLeftWillOpen
: 左边面板开始滑动时的回调 -
onSwipeableRightWillOpen
: 同上 -
onSwipeableWillOpen
: 左边或者右边将打开时的回调 -
onSwipeableWillClose
: 开始关闭action 面板时的回调 -
renderLeftActions
: 当用户向右边滑动时,返回左边面板的组件 -
renderRightActions
: 同上 -
containerStyle
: 容器(Animated.View
)的样式对象,比如overflow: 'hidden'
-
childrenContainerStyle
: 子元素容器(Animated.View
)的样式对象,比如flex: 1
方法 (Methods)
使用 Swipeable
组件的引用,来触发动作
-
close
: 关闭组件 -
openLeft
: 打开左边面板 -
openRight
: 打开右边面板