React Native按钮详解

类型

• TouchableWithoutFeedback：点击之后没有任何效果
• TouchableHighlight: 点击之后背景会变暗，同时不透明度会降低
• TouchableOpacity: 点击之后会改变透明度
• TouchableNativeFeedback: 点击之后会有水纹的效果（只支持android）

---

TouchableWithoutFeedback

• 这个组件一般不使用
• 常见的使用场景比如想实现点击空白处触发某个操作，那么就可以把空白部分用TouchableWithoutFeedback包起来，或者绝对定位覆盖住。

  import {TouchableWithoutFeedback} from 'react-native'
  
  <TouchableWithoutFeedback
    onPress = {this.onPress}
    // 长按压
    onLongPress = {this.onLongPress}
    // 当用户开始点击按钮时
    onPressIn={this.onPressIn}
    // 用户点击结束后回调
    onPressOut={this.onPressOut}
    disabled = {false}
  >
  
  </TouchableWithoutFeedback>
  

---

TouchableHighlight

import {TouchableHighlight} from 'react-native'

<TouchableHighlight
  onPress = {this.onPress}
  // 长按压
  onLongPress = {this.onLongPress}
  // 当用户开始点击按钮时
  onPressIn={this.onPressIn}
  // 用户点击结束后回调
  onPressOut={this.onPressOut}
  disabled = {false}
  
  //触摸之后的透明度
  activeOpacity={0.7}
  //被按下去之后的颜色
  underlayColor='black'
  //隐藏衬底（衬底是点击之后，文字的背景隐藏）
  onHideUnderlay={this.onHideUnderlay}
  //显示衬底（点击之后，文字背景显示，在这里是按下去是黑色）
  onShowUnderlay={this.onShowUnderlay}
  //添加样式
  style={{ ... }}

>

</TouchableHighlight>

---

TouchableOpacity

import {TouchableOpacity} from 'react-native'

<TouchableOpacity
  onPress = {this.onPress}
  // 长按压
  onLongPress = {this.onLongPress}
  // 当用户开始点击按钮时
  onPressIn={this.onPressIn}
  // 用户点击结束后回调
  onPressOut={this.onPressOut}
  disabled = {false}
  
  //触摸之后的透明度
  activeOpacity={0.7}
  //添加样式
  style={{ ... }}
>
</TouchableOpacity>

---

TouchableNativeFeedback

import {TouchableNativeFeedback} from 'react-native'

<TouchableNativeFeedback
  onPress = {this.onPress}
  // 长按压
  onLongPress = {this.onLongPress}
  // 当用户开始点击按钮时
  onPressIn={this.onPressIn}
  // 用户点击结束后回调
  onPressOut={this.onPressOut}
  disabled = {false}
  
>
</TouchableNativeFeedback>