React Native使用react-native-reanimated实现骨架屏报错及渐变动画咨询

1. Skeleton组件报错修复 #

你遇到的undefined is not a function (near '..._reactNativeReanimated.default.sequence...')错误，是因为react-native-reanimated 2.x 已废弃Animated.sequence这类旧版API，需要改用v2的新写法。以下是修复后的代码：

import { useEffect, useRef } from "react";
import { StyleSheet } from "react-native";
import Animated, { useAnimatedStyle, withRepeat, withTiming } from "react-native-reanimated";

const Skeleton = () => {
  const animatedStyle = useAnimatedStyle(() => {
    return {
      opacity: withRepeat(
        withTiming(1, { duration: 500 }),
        -1, // 无限重复
        true // 反向执行，实现0.3→1→0.3的循环效果
      ),
    };
  }, []);

  return (
    <Animated.View 
      style={[
        styles.skeleton, 
        animatedStyle,
        { height: 100, width: 100 }
      ]} 
    />
  );
};

const styles = StyleSheet.create({
  skeleton: {
    backgroundColor: "red",
  },
});

export default Skeleton;

如果需要严格对应原sequence的执行逻辑，也可以用withSequence结合withRepeat实现：

const animatedStyle = useAnimatedStyle(() => {
  return {
    opacity: withRepeat(
      withSequence(
        withTiming(1, { duration: 500 }),
        withTiming(0.3, { duration: 800 })
      ),
      -1
    ),
  };
}, []);

2. expo-linear-gradient的动画支持 #

可以对expo-linear-gradient执行动画，具体步骤如下：

• 先将LinearGradient包装为Animated组件：

  import { LinearGradient } from 'expo-linear-gradient';
  const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
  

• 之后即可像操作普通Animated组件一样，给它的样式（如opacity、transform）或渐变颜色属性添加动画。比如实现渐变颜色的过渡效果：

  import { useAnimatedProps } from 'react-native-reanimated';
  
  // 组件内部逻辑
  const animatedProps = useAnimatedProps(() => {
    return {
      colors: [
        `rgba(255,0,0,${withTiming(0.5, { duration: 1000 })})`,
        `rgba(0,255,0,${withTiming(0.8, { duration: 1000 })})`,
      ],
    };
  });
  
  return (
    <AnimatedLinearGradient
      animatedProps={animatedProps}
      style={styles.gradient}
      start={{ x: 0, y: 0 }}
      end={{ x: 1, y: 1 }}
    />
  );
  

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