React Native 触摸事件

发表于   |  

React Native 触摸事件

响应事件：

  • View.props.onStartShouldSetResponder
  • View.props.onMoveShouldSetResponder

两个属性的回调函数里返回true表示响应事件，组件成为事件的处理者会走回调

  • View.props.onResponderGrant: (evt) => {}

    被拒绝成为处理者，执行回调：

  • View.props.onResponderReject: (evt) => {}

组件处理触摸事件的回调：

  • View.props.onResponderStart: (evt) => {}

  • View.props.onResponderMove: (evt) => {}

  • View.props.onResponderRelease: (evt) => {}

  • View.props.onResponderEnd: (evt) => {}

    是否释放事件处理权限

  • View.props.onResponderTerminationRequest: (evt) => bool

  • View.props.onResponderTerminate: (evt) => {}

多个组件嵌套响应事件：

如果多个父子组件都onStartShouldSetResponder返回true,那么最内层的子组件会最先响应，这是所谓的事件处理的冒泡机制，当然层层深入到子组件首先得得到父组件的同意：

  • View.props.onStartShouldSetResponderCapture
  • View.props.onMoveShouldSetResponderCapture

回调返回true表示该组件捕获了该事件，那么子组件就无法成为事件响应者了

React Native 手势识别系统PanResponder

panresponder对触摸事件进行了封装提供的API让我们可以更方便的使用手势识别功能

  • onStartShouldSetPanResponder: (e, gestureState) => bool
  • onStartShouldSetPanResponderCapture: (e, gestureState) => bool
  • onMoveShouldSetPanResponder: (e, gestureState) => bool
  • onMoveShouldSetPanResponderCapture: (e, gestureState) => bool
  • onPanResponderGrant: (e, gestureState) => {…}
  • onPanResponderStart: (e, gestureState) => {…}
  • onPanResponderMove: (e, gestureState) => {…}
  • onPanResponderRelease: (e, gestureState) => {…}
  • onPanResponderTerminationRequest: (e, gestureState) => {…}
  • onPanResponderTerminate: (e, gestureState) => {…}
  • onShouldBlockNativeResponder: (e, gestureState) => bool

在最近的项目里要实现parallax的scrollview头部图像拉伸效果,GitHub上搜索后发现有实现的库，那好啊npm install —save简单粗暴，咔咔import结果Android手机分分钟没效果，遂弃之，决定自己实现一个，这里面就用到了手势识别，结合动画下拉伸缩图片，scrollview和外别view手势识别冲突的拦截等。