如何在Styled Components中结合react-native-reanimated实现动画？

两者完全可以结合使用，以下是针对按钮、滚动视图等场景的可行方案：

1. 核心方法：用Animated.createAnimatedComponent包装Styled组件 #

这是通用解决方案，将你用Styled Components定义的组件，转化为支持Reanimated动画的组件：

示例：为Styled View添加淡入动画 #

import styled from 'styled-components/native';
import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';
import { useEffect } from 'react';

// 1. 定义基础Styled组件
const StyledView = styled.View`
  width: 200px;
  height: 200px;
  background-color: #2196F3;
  border-radius: 8px;
`;

// 2. 转化为支持动画的组件
const AnimatedStyledView = Animated.createAnimatedComponent(StyledView);

// 3. 在组件中使用动画
function AnimatedBox() {
  const opacity = useSharedValue(0);

  useEffect(() => {
    opacity.value = withTiming(1, { duration: 1000 });
  }, []);

  const animatedStyle = useAnimatedStyle(() => ({
    opacity: opacity.value,
  }));

  return <AnimatedStyledView style={animatedStyle} />;
}

2. 按钮组件（如TouchableOpacity）的处理 #

针对按钮类组件，同样用createAnimatedComponent包装你的Styled按钮，再结合触摸反馈动画：

const StyledButton = styled.TouchableOpacity`
  padding: 12px 24px;
  background-color: #4CAF50;
  border-radius: 4px;
`;

const StyledButtonText = styled.Text`
  color: white;
  font-size: 16px;
`;

// 转化为动画按钮
const AnimatedButton = Animated.createAnimatedComponent(StyledButton);

function AnimatedPressableButton() {
  const scale = useSharedValue(1);

  const onPressIn = () => {
    scale.value = withTiming(0.95, { duration: 100 });
  };

  const onPressOut = () => {
    scale.value = withTiming(1, { duration: 100 });
  };

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
  }));

  return (
    <AnimatedButton
      style={animatedStyle}
      onPressIn={onPressIn}
      onPressOut={onPressOut}
    >
      <StyledButtonText>点击我</StyledButtonText>
    </AnimatedButton>
  );
}

3. 滚动视图（ScrollView）的动画处理 #

如果要给Styled定义的ScrollView添加滚动相关动画（比如视差效果），同样包装后使用：

const StyledScrollView = styled.ScrollView`
  flex: 1;
  background-color: #f5f5f5;
`;

const AnimatedScrollView = Animated.createAnimatedComponent(StyledScrollView);
const StyledHeaderView = styled.View`
  height: 200px;
  background-color: #673AB7;
  justify-content: center;
  align-items: center;
`;
const StyledHeaderText = styled.Text`
  color: white;
  font-size: 24px;
`;

const AnimatedStyledHeader = Animated.createAnimatedComponent(StyledHeaderView);

function AnimatedParallaxScroll() {
  const scrollY = useSharedValue(0);

  const animatedHeaderStyle = useAnimatedStyle(() => ({
    transform: [{ translateY: scrollY.value * -0.5 }],
    opacity: 1 - scrollY.value / 200,
  }));

  return (
    <AnimatedScrollView
      onScroll={Animated.event(
        [{ nativeEvent: { contentOffset: { y: scrollY } } }],
        { useNativeDriver: true }
      )}
      scrollEventThrottle={16}
    >
      <AnimatedStyledHeader style={animatedHeaderStyle}>
        <StyledHeaderText>视差头部</StyledHeaderText>
      </AnimatedStyledHeader>
      {/* 滚动内容示例 */}
      {Array.from({length: 20}).map((_, i) => (
        <styled.View key={i} style={{padding: 16, borderBottomWidth: 1, borderBottomColor: '#eee'}}>
          <styled.Text>列表项 {i+1}</styled.Text>
        </styled.View>
      ))}
    </AnimatedScrollView>
  );
}

常见错误排查 #

• 不要尝试直接使用Animated.StyledView：Styled Components的组件不是原生Animated组件，必须通过createAnimatedComponent转换
• 嵌套Animated.View时，确保动画值绑定的是转换后的Styled动画组件，而非普通Animated.View
• 优先开启useNativeDriver: true（Reanimated推荐使用原生驱动，大部分动画属性都支持）

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