以下是 react-native-reanimated 的用法清单和核心文档说明，涵盖主要功能、API 和使用示例：

一、核心概念

1. 工作线程：动画在 UI 线程执行（非 JS 线程），避免卡顿
2. 共享值（Shared Values）：动画的驱动数据（代替 Animated.Value）
3. 动画修饰器：定义动画行为（如 withTiming, withSpring）
4. 手势集成：与 react-native-gesture-handler 深度结合

二、安装

# 安装依赖
npm install react-native-reanimated

# 或使用 Expo
expo install react-native-reanimated

在 babel.config.js 中添加插件：

plugins: ['react-native-reanimated/plugin']

三、核心 API 清单

1. 动画值

2. 动画样式

3. 动画函数

4. 手势处理

5. 布局动画

四、关键用法示例

示例1: 基础动画（缩放+透明度）

import Animated, { 
  useSharedValue, 
  useAnimatedStyle, 
  withTiming 
} from 'react-native-reanimated';

const ScaleBox = () => {
  const scale = useSharedValue(1);
  const opacity = useSharedValue(1);

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

  const onPress = () => {
    scale.value = withTiming(0.8, { duration: 300 });
    opacity.value = withTiming(0.5, { duration: 300 });
  };

  return (
    <Animated.View style={[styles.box, animatedStyle]}>
      <Button title="Animate" onPress={onPress} />
    </Animated.View>
  );
};

示例2: 手势拖拽

import { GestureDetector, Gesture } from 'react-native-gesture-handler';
import Animated, { useSharedValue, useAnimatedStyle } from 'react-native-reanimated';

const Draggable = () => {
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);

  const panGesture = Gesture.Pan()
    .onChange((e) => {
      translateX.value += e.changeX;
      translateY.value += e.changeY;
    });

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

  return (
    <GestureDetector gesture={panGesture}>
      <Animated.View style={[styles.draggable, animatedStyle]} />
    </GestureDetector>
  );
};

示例3: 关键帧动画

import { Keyframe } from 'react-native-reanimated';

const keyframe = new Keyframe({
  0: {
    transform: [{ rotate: '0deg' }],
    opacity: 0
  },
  30: {
    opacity: 0.3
  },
  100: {
    transform: [{ rotate: '360deg' }],
    opacity: 1
  }
});

// 使用
rotation.value = keyframe;

五、布局动画示例

import Animated, { Layout } from 'react-native-reanimated';

const ListItem = ({ text }) => (
  <Animated.View 
    layout={Layout.springify()} // 自动添加布局动画
    style={styles.item}
  >
    <Text>{text}</Text>
  </Animated.View>
);

// 进入/退出动画
<Animated.View 
  entering={FadeIn.duration(500)} 
  exiting={FadeOut}
/>

六、性能优化技巧

1. 减少 JS 线程通信：
   • 使用 runOnJS 在 UI 线程执行简单逻辑

     useAnimatedReaction(
     () => scroll.value,
     (scroll) => runOnJS(updateBackend)(scroll)
     );

2. 避免频繁更新：用 useDerivedValue 代替多个独立值
3. 简化样式：合并 useAnimatedStyle 调用

七、调试工具

import { enableLayoutAnimations } from 'react-native-reanimated';

// 开发时启用布局动画
enableLayoutAnimations(true);

// 日志调试
import { log } from 'react-native-reanimated';
useDerivedValue(() => log('Value:', sharedValue.value));

八、官方资源

• 文档
• API 参考
• 示例仓库

注意：Reanimated 3.x+ 要求 React Native ≥ 0.64，推荐使用函数式组件和 Hooks 写法。