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: 内置样式的按钮组件,通常带有默认的触摸效果,适用于快速创建标准按钮。

相关推荐
牧羊人_myr几秒前
Ajax 技术详解
前端
用户2018792831678 分钟前
浅谈Android PID与UID原理
android
浩男孩10 分钟前
🍀封装个 Button 组件,使用 vitest 来测试一下
前端
蓝银草同学14 分钟前
阿里 Iconfont 项目丢失?手把手教你将已引用的 SVG 图标下载到本地
前端·icon
TimeFine14 分钟前
Android AWS KVS WebRTC 通话声道切换到媒体音乐声道
android
布列瑟农的星空24 分钟前
重学React —— React事件机制 vs 浏览器事件机制
前端
一小池勺1 小时前
CommonJS
前端·面试
孙牛牛1 小时前
实战分享:一招解决嵌套依赖版本失控问题,以 undici 为例
前端
用户52709648744901 小时前
Git 最佳实践
前端