组件 swipeable - react-native-gesture-handler

这个组件允许实现可滑动的行(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: 打开右边面板

示例

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容