React Native如何实现带平滑渐变动画的按压按钮？

我之前在做React Native项目时也碰到过这个问题——TouchableHighlight自带的onShowUnderlay和onHideUnderlay确实是同步触发的，没法直接实现平滑的渐变过渡，只能做到状态突变。不过我们可以换个思路，用动画库来自己控制背景色的变化，这里给你两种实用的解决方案：

方案一：用TouchableWithoutFeedback + Animated（推荐） #

TouchableWithoutFeedback没有自带的underlay层，能让我们完全自主控制按压状态下的动画效果，灵活性更高。

代码示例 #

import React, { useRef } from 'react';
import { View, Text, TouchableWithoutFeedback, Animated } from 'react-native';

const GradientPressButton = ({ title, onPress }) => {
  // 创建动画值，0代表未按压状态，1代表按压状态
  const pressAnim = useRef(new Animated.Value(0)).current;

  // 按压开始：触发渐变动画到激活状态
  const handlePressIn = () => {
    Animated.timing(pressAnim, {
      toValue: 1,
      duration: 200, // 可根据需求调整动画时长
      useNativeDriver: false, // 背景色动画不支持native driver
    }).start();
  };

  // 按压结束：触发渐变动画回到基础状态
  const handlePressOut = () => {
    Animated.timing(pressAnim, {
      toValue: 0,
      duration: 200,
      useNativeDriver: false,
    }).start();
  };

  // 插值计算背景色：从基础色平滑过渡到激活色
  const backgroundColor = pressAnim.interpolate({
    inputRange: [0, 1],
    outputRange: ['#4a90e2', '#2962ff'], // 替换成你的基础色和激活色
  });

  return (
    <TouchableWithoutFeedback
      onPressIn={handlePressIn}
      onPressOut={handlePressOut}
      onPress={onPress}
    >
      <Animated.View
        style={{
          paddingHorizontal: 24,
          paddingVertical: 12,
          borderRadius: 8,
          backgroundColor,
          alignItems: 'center',
        }}
      >
        <Text style={{ color: '#fff', fontSize: 16, fontWeight: '500' }}>
          {title}
        </Text>
      </Animated.View>
    </TouchableWithoutFeedback>
  );
};

export default GradientPressButton;

方案说明 #

• 通过Animated.Value的插值功能，将0-1的动画值映射为背景色的渐变区间
• 利用TouchableWithoutFeedback的onPressIn和onPressOut钩子触发动画，实现按压时的平滑过渡
• 完全自定义动画时长和颜色，适配不同设计需求

方案二：保留TouchableHighlight并自定义动画 #

如果你一定要用TouchableHighlight，可以把它自带的underlay设为透明，然后在onShowUnderlay和onHideUnderlay中触发我们自己的动画：

代码示例 #

import React, { useRef } from 'react';
import { View, Text, TouchableHighlight, Animated } from 'react-native';

const GradientButton = ({ title, onPress }) => {
  const pressAnim = useRef(new Animated.Value(0)).current;

  const handleShowUnderlay = () => {
    Animated.timing(pressAnim, {
      toValue: 1,
      duration: 200,
      useNativeDriver: false,
    }).start();
  };

  const handleHideUnderlay = () => {
    Animated.timing(pressAnim, {
      toValue: 0,
      duration: 200,
      useNativeDriver: false,
    }).start();
  };

  const backgroundColor = pressAnim.interpolate({
    inputRange: [0, 1],
    outputRange: ['#4a90e2', '#2962ff'],
  });

  return (
    <TouchableHighlight
      onShowUnderlay={handleShowUnderlay}
      onHideUnderlay={handleHideUnderlay}
      onPress={onPress}
      underlayColor="transparent" // 关闭自带的underlay效果
      style={{ borderRadius: 8 }}
    >
      <Animated.View
        style={{
          paddingHorizontal: 24,
          paddingVertical: 12,
          borderRadius: 8,
          backgroundColor,
          alignItems: 'center',
        }}
      >
        <Text style={{ color: '#fff', fontSize: 16 }}>{title}</Text>
      </Animated.View>
    </TouchableHighlight>
  );
};

export default GradientButton;

方案说明 #

• 将underlayColor设为透明，避免和我们自定义的动画冲突
• 复用TouchableHighlight的原有钩子触发动画，保留它的其他交互特性

进阶：实现线性渐变背景的平滑过渡 #

如果需要更复杂的线性渐变效果，可以结合react-native-linear-gradient库，通过动画控制渐变的起止颜色：

import LinearGradient from 'react-native-linear-gradient';

// 创建可动画的线性渐变组件
const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);

// 在组件内部定义渐变颜色的插值
const startColor = pressAnim.interpolate({
  inputRange: [0, 1],
  outputRange: ['#4a90e2', '#2962ff'],
});

const endColor = pressAnim.interpolate({
  inputRange: [0, 1],
  outputRange: ['#50e3c2', '#13cf97'],
});

// 替换之前的Animated.View为AnimatedLinearGradient
<AnimatedLinearGradient
  colors={[startColor, endColor]}
  style={{
    paddingHorizontal: 24,
    paddingVertical: 12,
    borderRadius: 8,
    alignItems: 'center',
  }}
>
  <Text style={{ color: '#fff', fontSize: 16 }}>按钮文字</Text>
</AnimatedLinearGradient>

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