React Native中如何为Pressable组件添加按压状态的平滑过渡效果

要实现Pressable状态切换的平滑过渡，最优方案是结合React Native自带的Animated API封装自定义组件，无需引入额外第三方依赖，兼容性和性能表现最优，完全可以复刻TouchableOpacity的默认不透明度过渡效果，也支持自定义其他属性的动画过渡。

核心逻辑是用Animated.Value跟踪按压状态，状态变更时通过Animated.timing驱动样式属性的平滑过渡：

• 初始化动画值对应组件默认状态的样式数值
• 监听onPressIn事件触发按压态的动画过渡
• 监听onPressOut、onPressCancel事件触发状态重置的动画过渡
• 将动画值绑定到组件对应样式属性上即可

首先是封装可复用的AnimatedPressable组件：

import React, { useRef } from 'react';
import { Animated, Pressable } from 'react-native';

const AnimatedPressable = ({ 
  children, 
  pressOpacity = 0.2, // 按压时的不透明度
  animationDuration = 150, // 动画时长，和TouchableOpacity默认时长一致
  style, 
  ...pressableProps 
}) => {
  const opacity = useRef(new Animated.Value(1)).current;

  const runPressInAnimation = () => {
    Animated.timing(opacity, {
      toValue: pressOpacity,
      duration: animationDuration,
      useNativeDriver: true, // 启用原生驱动，避免JS线程卡顿影响动画
    }).start();
  };

  const runPressResetAnimation = () => {
    Animated.timing(opacity, {
      toValue: 1,
      duration: animationDuration,
      useNativeDriver: true,
    }).start();
  };

  return (
    <Pressable
      onPressIn={runPressInAnimation}
      onPressOut={runPressResetAnimation}
      onPressCancel={runPressResetAnimation}
      {...pressableProps}
    >
      <Animated.View style={[style, { opacity }]}>
        {children}
      </Animated.View>
    </Pressable>
  );
};

export default AnimatedPressable;

使用方式和原生Pressable完全一致：

// 业务侧调用示例
<AnimatedPressable 
  onPress={() => {
    // 处理点击逻辑
  }}
>
  <View style={{ padding: 12, backgroundColor: '#1677ff', borderRadius: 4 }}>
    <Text style={{ color: '#fff' }}>按压测试按钮</Text>
  </View>
</AnimatedPressable>

如果需要实现除透明度之外的其他过渡效果，比如按压缩放、背景色渐变，只需要新增对应的Animated.Value，在动画回调中同时修改对应数值并绑定到样式即可。若项目已引入react-native-reanimated库，也可以用该库的API实现更复杂的交互动画，性能表现会更优。

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