React Native中如何为TouchableOpacity按钮添加样式动画

问题说明 #

现有TabController组件功能正常，需要为标签按钮添加背景色过渡动画：默认背景为color.shade04（灰色），点击激活时平滑切换到color.bluePurple（浅蓝色）。此前尝试使用Animated.View未达到预期效果，原代码如下：

export const TabController = (props: TabControllerProps) => {
  const { index, activeTab, setActiveTab, containerStyle } = props

  return (
    <>
      <View style={TABS}>
        <View style={{ ...CONTAINER, ...containerStyle }}>
          <TouchableOpacity
            onPress={() => {
              setActiveTab(0)
            }}
            style={{
              backgroundColor: activeTab === 0 ? color.bluePurple : color.shade04,
              ...TAB_BTN,
            }}
          >
            <View
              style={{
                flex: 1,
                flexDirection: 'row',
                justifyContent: 'center',
                alignItems: 'center',
              }}
            >
              <Text tx={'Topics'} preset="body1Emphasized" />
            </View>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => {
              setActiveTab(1)
            }}
            style={{
              backgroundColor: activeTab === 1 ? color.bluePurple : color.shade04,
              ...TAB_BTN,
            }}
          >
            <View
              style={{
                flex: 1,
                flexDirection: 'row',
                justifyContent: 'center',
                alignItems: 'center',
              }}
            >
              <Text
                style={activeTab === 1 ? ACTIVE : NORMAL}
                tx={'Quiz'}
                preset="body1Emphasized"
              />
            </View>
          </TouchableOpacity>
        </View>
      </View>
    </>
  )
}

实现方案 #

利用React Native的Animated库，通过监听activeTab状态变化驱动动画值，将其映射为背景色的过渡效果。同时抽离重复的标签按钮逻辑，优化代码结构：

import { Animated, Easing } from 'react-native';

export const TabController = (props: TabControllerProps) => {
  const { index, activeTab, setActiveTab, containerStyle } = props;
  // 为每个标签创建独立的动画值，初始状态匹配当前激活标签
  const tabAnimations = [
    React.useRef(new Animated.Value(activeTab === 0 ? 1 : 0)).current,
    React.useRef(new Animated.Value(activeTab === 1 ? 1 : 0)).current,
  ];

  // 监听activeTab变化，触发对应标签的过渡动画
  React.useEffect(() => {
    tabAnimations.forEach((anim, idx) => {
      Animated.timing(anim, {
        toValue: activeTab === idx ? 1 : 0,
        duration: 300, // 动画时长，可根据需求调整
        easing: Easing.inOut(Easing.ease),
        useNativeDriver: false, // 颜色动画不支持原生驱动
      }).start();
    });
  }, [activeTab]);

  // 将动画值映射为背景色范围
  const getAnimatedBgColor = (anim: Animated.Value) => {
    return anim.interpolate({
      inputRange: [0, 1],
      outputRange: [color.shade04, color.bluePurple],
    });
  };

  // 抽离标签按钮组件，减少重复代码
  const TabButton = ({ tabIndex, label }: { tabIndex: number; label: string }) => {
    const isActive = activeTab === tabIndex;
    return (
      <TouchableOpacity
        onPress={() => setActiveTab(tabIndex)}
        style={{
          backgroundColor: getAnimatedBgColor(tabAnimations[tabIndex]),
          ...TAB_BTN,
        }}
      >
        <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
          <Text
            style={isActive ? ACTIVE : NORMAL}
            tx={label}
            preset="body1Emphasized"
          />
        </View>
      </TouchableOpacity>
    );
  };

  return (
    <View style={TABS}>
      <View style={{ ...CONTAINER, ...containerStyle }}>
        <TabButton tabIndex={0} label="Topics" />
        <TabButton tabIndex={1} label="Quiz" />
      </View>
    </View>
  );
};

关键说明 #

1. 动画值管理：为每个标签分配独立的Animated.Value，初始值匹配当前激活状态，确保页面加载时显示正确。
2. 动画触发逻辑：通过useEffect监听activeTab变化，调用Animated.timing执行平滑过渡，配置合适的时长和缓动曲线提升体验。
3. 颜色映射：使用interpolate将0-1的动画值转换为对应的背景色区间，实现灰色到浅蓝色的渐变过渡。
4. 代码优化：抽离TabButton组件，避免重复代码，后续新增标签只需直接调用组件即可。

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