react native手势触摸

简介

在诸多移动应用中，需要有许多手势识别的使用场景。比如当涂抹、上滑、下滑、侧滑、拖动等，都涉及到方方面面的功能交互。而在react native中，就有提供处理这些手势的API，下面就来一一介绍相关的响应方法。

Touchable组件

rn也有提供一些比较基础的触摸组件，比如Touchable组件

• TouchableWithoutFeedback：这个组件在点击后没有任何的视觉反馈，并且只支持一个子节点（不能为0 && 不能>1），并且该组件不支持加style样式。

  <TouchableWithoutFeedback onPress={
       onPress}>
       <View style={
       styles.button}>
            <Text>click me！</Text>
       </View>
  </TouchableWithoutFeedback>
  

  delayLongPress: 从 onPressIn 开始，到 onLongPress 被调用的延迟。单位:毫秒

  delayPressIn: 从触摸操作开始到 onPressIn 被调用的延迟。单位:毫秒

  delayPressOut:从触摸操作结束开始到 onPressOut 被调用的延迟。单位:毫秒

  disabled:如果设为 true，则禁止此组件的一切交互

  hitSlop:这一属性定义了按钮的外延范围。这一范围也会使pressRetentionOffset变得更大。 注意： 触摸范围不会超过父视图的边界，也不会影响原先和本组件层叠的视图（保留原先的触摸优先级）

  pressRetentionOffset:在当前视图不能滚动的前提下指定这个属性，可以决定当手指移开多远距离之后，会不再激活按钮。但如果手指再次移回范围内，按钮会被再次激活。只要视图不能滚动，你可以来回多次这样的操作。确保你传入一个常量来减少内存分配。

  还有一些常用的事件：

  onBlur onFocus onLayout onLongPress onPress onPressIn onPressOut

• TouchableOpacity：当使用这个组件并点击时，组件的透明度会根据你设置的activeOpacity而变化，其中activeOpacity这个值的设定范围在0～1之间，默认值为0.2

  并且该组件还有一些Apple Tv限定的属性：

  • enabled: 如果为"true"，则启用动画效果。默认为"true"。

  • shiftDistanceX: X轴的位移距离 默认值2.0.

  • shiftDistanceY: Y轴的位移距离 默认值 2.0.

  • tiltAngle: 倾斜角 默认值0.05.

  • magnification: 放大 默认值 1.0.

  • pressMagnification: 点击区域放大 默认值 1.0.

  • pressDuration: 点击持续时间 默认值0.3.

  • pressDelay: 点击延时 默认值 0.0.

    <TouchableOpacity
              style={
           styles.button}
              onPress={
           this.onPress}
    					activeOpacity={
           0.8}>
          <Text>click me！</Text>
    </TouchableOpacity>
    
    

• TouchableHighlight：点击改组件时，不仅透明度会变低，还可以设置底层颜色，使得视图变暗或变亮。

  onHideUnderlay：底层颜色被隐藏的时候调用

  onShowUnderlay：底层颜色被显示的时候调用

  underlayColor：底层颜色

  <TouchableHighlight
    activeOpacity={
       0.8}
    underlayColor="red"
    onPress={
       () => alert('Click Yesssss!')}>
    <MyComponent />
  </TouchableHighlight>;
  

• TouchableNativeFeedback（仅限Android平台）：该组件利用原生状态来渲染触摸的反馈，其点击显示的背景可以通过background属性来自定义。

  该属性在Android5.0以后可实现点击展示水波纹动效

  属性：

  background:决定在触摸反馈的时候显示什么类型的背景

  useForeground: 当想要在水波纹效果，并且不被背景遮盖住的时候，可以设置为true（该属性使用前需要先通过调用**TouchableNativeFeedback.canUseNativeForeground()**查看是否支持，并且需要Android版本>=6.0）

  方法：

  static SelectableBackground(rippleRadius: ?number):

  static SelectableBackgroundBorderless(rippleRadius: ?number):

  static Ripple(color: string, borderless: boolean, rippleRadius: ?number):

  <TouchableNativeFeedback
          onPress={
       () => {
       
            alert('Click Yesssss!')
          }}
          //设置背景为水波纹效果，颜色为红色，borderless：true则会涟漪到视图范围外
          background={
       TouchableNativeFeedback.Ripple('red', true)}>
       <View style={
       styles.touchable}>
           <Text style={
       styles.text}>TouchableNativeFeedback</Text>
       </View>
  </TouchableNativeFeedback>
  

  ps：TouchableOpacity和TouchableHighlight属性都继承自TouchableWithoutFeedback