react-native-touchable-view

你可以依赖这个TouchableView的长按,滑动,X轴滑动,Y轴滑动,长按后滑动等手势响应得到回调和一系列参数(如相对父组件x、y坐标,相对页面x、y坐标,x轴位移、y轴位移)处理你的业务(如手势动画)。

安装

npm install react-native-touchable-view --save

属性

| parameter | type | required | default | description
| :------------------------- | :--------------------------------- | :------- | :-------| :---------------------------------------------------------------
| style | oneOfType([number, object, array]) | no | | 样式
| longPressTestTime | number | no | 500 | 长按判定时间 (ms) | moveTestDistance | number | no | 5 | 滑动判定距离 | moveTestDirectionDistance | number | no | 10 | 滑动方向判定距离 | moveThrottleTime | number | no | 10 | 滑动响应节流时间 (ms) | isTillDirection | bool | no | false | 是否在未得到有效滑动方向(X、Y)时一直判定 | isCapture | bool | no | false | 是否捕获事件 (捕获后子事件View将不可响应) | isTermination | bool | no | false | 是否在非捕获事件下可被其他手势终止事件 (一般在事件View叠加或交叉时会触发) | isReleaseTerminated | bool | no | true | 被其他手势终止事件后是否提交响应结果 | isPressTestMove | bool | no | false | 按下是否判定滑动 | isDisable | bool | no | false | 是否禁用 | xTestAngle | number | no | 45 | X轴滑动判定角度 (相对X轴线为0度) | yTestAngle | number | no | 45 | Y轴滑动判定角度 (相对Y轴线为0度; 优先级高于X轴滑动判定角度) | onPressIn | func | no | | 按下开始 (evt, gestureState) | onPressOut | func | no | | 按下结束 (evt, gestureState) | onPress | func | no | | 按下 (evt, gestureState) | onLongPress | func | no | | 长按 (evt, gestureState) | onMoveStart | func | no | | 滑动开始 (evt, gestureState) | onMove | func | no | | 滑动 (evt, gestureState) | onLongMove | func | no | | 长按滑动 (evt, gestureState) | onMoveXStart | func | no | | X轴滑动开始 (evt, gestureState) | onMoveLeftStart | func | no | | 向左滑动开始 (evt, gestureState) | onMoveRightStart | func | no | | 向右滑动开始 (evt, gestureState) | onMoveX | func | no | | X轴滑动 (evt, gestureState) | onLongMoveX | func | no | | 长按X轴滑动 (evt, gestureState) | onMoveYStart | func | no | | Y轴滑动开始 (evt, gestureState) | onMoveUpStart | func | no | | 向上滑动开始 (evt, gestureState) | onMoveDownStart | func | no | | 向下滑动开始 (evt, gestureState) | onMoveY | func | no | | Y轴滑动 (evt, gestureState) | onLongMoveY | func | no | | 长按Y轴滑动 (evt, gestureState)

• 关于事件参数evt.nativeEvent一些解释:
  • locationX: 相对父组件X坐标
  • locationY: 相对父组件Y坐标
  • pageX: 相对页面X坐标
  • pageY: 相对页面Y坐标
• 关于事件参数gestureState一些解释:
  • dx: X轴位移
  • dy: Y轴位移

源码

https://github.com/thisXY/react-native-touchable-view

react native动画组件推荐

• https://github.com/thisXY/react-native-animated-view

  你可以像jQuery那样只给结果样式就能操作各种动画,你可以控制每一个样式的动画时间、动画函数甚至每一帧等。总之,你可以随意搭配轻松如意地操纵react-native动画

• https://github.com/thisXY/react-native-easing

  react native easing的一些别名封装和自定义封装,让你可以更好地使用easing