ReactNative中处理触摸事件

可点击的组件

高亮触摸 TouchableHighlight

• 当手指点击按下的时候，该视图的不透明度会进行降低同时会看到相应的颜色，其实现原理则是在底层新添加了一个View。此外，TouchableHighlight只能进行一层嵌套，不能多层嵌套。

• 常用属性：

  • activeOpacity number
    设置组件在进行触摸的时候，显示的不透明度(取值在0-1之间)

  • onHideUnderlay function 方法
    当底层被隐藏的时候调用

  • onShowUnderlay function 方法
    当底层显示的时候调用

  • style
    可以设置控件的风格演示，该风格演示可以参考View组件的style

  • underlayColor
    当触摸或者点击控件的时候显示出的颜色

---

不透明触摸 TouchableOpacity

• 该组件封装了响应触摸事件；当点击按下的时候，该组件的透明度会降低。
• 常用属性：
  
  • activeOpacity
    设置当用户触摸的时候，组件的透明度(0~1),值越大越模糊，一般控制在0.5

常见的触摸事件

点击

• onPress

  <View style={styles.container}>
      <TouchableOpacity activeOpacity={0.5}
                        onPress={() => this.activeEvent('点击')}>
  
        <View style={styles.innerViewStyle}>
          <Text>按钮</Text>
        </View>  
        </TouchableOpacity>  
    </View>

按下

• onPressIn

  <View style={styles.container}>
      <TouchableOpacity activeOpacity={0.5}
                        onPressIn={() => this.activeEvent('按下')}>
  
        <View style={styles.innerViewStyle}>
          <Text>按钮</Text>
        </View>  
        </TouchableOpacity>  
    </View>

抬起

• onPressOut

  <View style={styles.container}>
      <TouchableOpacity activeOpacity={0.5}
                        onPressOut={() => this.activeEvent('抬起')}>
  
        <View style={styles.innerViewStyle}>
          <Text>按钮</Text>
        </View>  
        </TouchableOpacity>  
    </View>

长按

• onLongPress

  <View style={styles.container}>
      <TouchableOpacity activeOpacity={0.5}
                        onLongPress={() => this.activeEvent('长按')}>
  
        <View style={styles.innerViewStyle}>
          <Text>按钮</Text>
        </View>  
        </TouchableOpacity>  
    </View>