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>