RN｜系统组件之触摸组件及区别 📝

触摸组件的事件包括点击和长按，事件触发顺序如下所示：

Pressable

带状态的触摸组件，比较灵活

jsx 复制代码

  <Pressable
    style={state => {
      return [styles.btn3, state.pressed && styles.pressBtn3];
    }}>
    {state => {
      return state.pressed ? (
        <Text style={styles.pressTxt}>按 钮</Text>
      ) : (
        <Text style={styles.txt}>按 钮</Text>
      );
    }}
  </Pressable>
  
const styles = StyleSheet.create({
  pressBtn3: {
    backgroundColor: '#fff',
  },
  pressTxt: {
    color: '#0066DD',
    fontWeight: 'bold',
  },
  txt: {
    color: '#fff',
    fontWeight: 'bold',
  },
  btn3: {
    width: 200,
    height: 50,
    marginTop: 20,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#7090f0',
  },
});

TouchableOpacity

Props

`activeOpacity`

按下时的不透明度，between 0 and 1，默认0.2

TouchableHightlight

必须有一个子组件

Props

`activeOpacity`

按下时的不透明度，between 0 and 1，默认0.85

activeOpacity 的行为需要有触摸事件才生效

`underlayColor`

控制按下时的背景色（建议设置，不然默认为黑色）

underlayColor 的行为需要有触摸事件才生效

TouchableWithoutFeedback

没有视觉反馈的点击组件
一般很少用到
只支持一个子节点，且至少有一个子组件
自身不支持样式
如果需要给组件添加样式，只能添加到子组件上

Button

Button 不支持子组件
title 是必传属性，按钮内部文字
color 属性，ios 文字颜色；安卓背景颜色
触摸后有默认的水波纹背景渐变效果

jsx 复制代码

<Button
  // 基本属性
  title="按钮文字"          // 必需属性
  onPress={() => {}}       // 点击事件

  // 颜色
  color="#007AFF"          // iOS: 文字颜色, Android: 背景颜色
/>

Android 原生 Button 不支持文字颜色自定义
需要自定义文字颜色时，建议使用：
- TouchableOpacity
- Pressable
- TouchableNativeFeedback（仅 Android）

不同触摸组件的区别

Pressable: 提供更强大的触摸反馈能力，支持按压状态的自定义样式，可响应不同的按压状态，如按下、抬起等。
TouchableOpacity: 使组件在被按下时变得透明，主要用于简单的按压效果。
TouchableHighlight: 按下时改变组件背景色，常用于突出显示按下的状态。
TouchableWithoutFeedback: 无任何反馈效果，仅用于触摸事件的捕捉，不改变样式。
Button: 内置样式的按钮组件，通常带有默认的触摸效果，适用于快速创建标准按钮。