React Native 新增的 Pressable 组件有没有类似 activeOpacity 的属性？

Pressable组件本身没有内置activeOpacity配置项，但可以通过其自带的状态回调非常方便地实现同等效果，灵活度还高于原生的TouchableOpacity。

最简实现方式 #

Pressable的children支持传入函数，该函数会接收一个包含pressed属性的对象，pressed值为true时代表组件正被用户按下，直接用这个状态控制透明度即可：

import { Pressable, View, Text, StyleSheet } from 'react-native';

const DemoButton = () => {
  const handleClick = () => {
    // 此处写按钮点击逻辑
    console.log('按钮被点击')
  }

  return (
    <Pressable onPress={handleClick}>
      {({ pressed }) => (
        <View style={[
          styles.btnWrapper,
          // 按下时透明度设为0.2，和TouchableOpacity的默认activeOpacity一致
          { opacity: pressed ? 0.2 : 1 }
        ]}>
          <Text style={styles.btnText}>测试按钮</Text>
        </View>
      )}
    </Pressable>
  )
}

const styles = StyleSheet.create({
  btnWrapper: {
    paddingVertical: 10,
    paddingHorizontal: 16,
    backgroundColor: '#1677ff',
    borderRadius: 4
  },
  btnText: {
    color: '#fff',
    fontSize: 14
  }
})

通用封装方案 #

如果需要多处使用，可以直接封装成和TouchableOpacity用法一致的通用组件，还能同时支持Pressable的所有扩展属性，额外加入防重复点击能力：

import { useState } from 'react';
import { Pressable, View } from 'react-native';

const MyTouchableOpacity = ({
  children,
  activeOpacity = 0.2,
  onPress,
  style,
  disabled = false,
  // 可配置防重复点击的间隔时间，单位毫秒
  preventRepeatTime = 1000,
  ...rest
}) => {
  // 防重复点击状态控制
  const [isClickLocked, setIsClickLocked] = useState(false);

  const handlePress = () => {
    if (disabled || isClickLocked) return;
    // 点击后锁定
    setIsClickLocked(true);
    onPress?.();
    // 间隔时间过后解锁
    setTimeout(() => {
      setIsClickLocked(false);
    }, preventRepeatTime)
  }

  return (
    <Pressable
      onPress={handlePress}
      disabled={disabled || isClickLocked}
      {...rest}
    >
      {({ pressed }) => (
        <View
          style={[
            style,
            // 按下、禁用、点击锁定状态下都降低透明度，给用户明确反馈
            { opacity: (pressed || disabled || isClickLocked) ? activeOpacity : 1 }
          ]}
        >
          {children}
        </View>
      )}
    </Pressable>
  )
}

// 封装后使用方式和原生TouchableOpacity完全一致
// <MyTouchableOpacity activeOpacity={0.3} onPress={() => {}}>
//   <Text>按钮</Text>
// </MyTouchableOpacity>

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