React Native中如何实现Pressable组件的点击高亮效果？

Pressable 高亮效果实现方法 #

Pressable 组件的 style、children 属性均支持传入回调函数，回调会接收一个包含 pressed 布尔值的对象，你可以通过这个按压状态动态调整样式实现高亮效果。

基础实现示例（适配你提供的类组件写法）

class RandomComponent extends Component {
    render() {
    return (
      <Pressable
        // style回调接收pressed状态，动态返回样式
        style={({ pressed }) => [
          // 此处可放置你原本的自定义样式
          {
            paddingVertical: 8,
            paddingHorizontal: 12,
            borderRadius: 4,
            // 按压时修改背景色实现高亮
            backgroundColor: pressed ? '#f0f0f0' : '#ffffff',
            // 也可同步调整透明度强化高亮效果
            opacity: pressed ? 0.8 : 1
          }
        ]}
      >
        <Text>Hello World</Text>
      </Pressable>
      )
    }
}

更多可选实现方案

• 如需自定义子元素的高亮状态，可使用children回调：

<Pressable>
  {({ pressed }) => (
    <Text style={{ color: pressed ? '#2563eb' : '#000000' }}>
      Hello World
    </Text>
  )}
</Pressable>

• 安卓端可搭配android_ripple属性实现原生水波纹高亮效果：

<Pressable
  // 安卓端水波纹配置，仅安卓生效
  android_ripple={{ color: '#e5e7eb', borderless: false }}
  style={({ pressed }) => [
    // 单独适配iOS端高亮
    Platform.OS === 'ios' && pressed && { backgroundColor: '#f3f4f6' }
  ]}
>
  <Text>Hello World</Text>
</Pressable>

• 可通过pressRetentionOffset属性扩大按压热区范围，避免手指稍微移出组件就丢失高亮的问题。

内容的提问来源于stack exchange，提问作者mundus