React Native Reanimated 项目教程

1. 项目介绍

React Native Reanimated 是一个用于 React Native 的高性能动画库，提供了更全面、低级别的抽象，以便在 Animated 库的基础上构建更复杂的动画和手势交互。Reanimated 允许开发者使用纯 JavaScript 定义动画，这些动画默认在 UI 线程上运行，从而实现高达 120 fps 的流畅动画和交互。

主要特点

• 高性能动画：通过在 UI 线程上运行动画，确保动画的流畅性。
• 低级别抽象：提供更灵活的 API，支持复杂的手势交互。
• 纯 JavaScript 定义：开发者可以使用熟悉的 JavaScript 语法定义动画。

2. 项目快速启动

安装

首先，确保你已经安装了 React Native CLI 和 Yarn。然后，通过以下命令安装 React Native Reanimated：

yarn add react-native-reanimated

配置

在 babel.config.js 文件中添加 Reanimated 的 Babel 插件：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['react-native-reanimated/plugin'],
};

基本使用

以下是一个简单的示例，展示如何使用 Reanimated 创建一个基本的动画：

import React from 'react';
import { View, Button } from 'react-native';
import Animated, { useSharedValue, withSpring } from 'react-native-reanimated';

const App = () => {
  const offset = useSharedValue(0);

  const handlePress = () => {
    offset.value = withSpring(Math.random() * 200);
  };

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Animated.View
        style={{
          width: 100,
          height: 100,
          backgroundColor: 'blue',
          transform: [{ translateX: offset }],
        }}
      />
      <Button title="Move" onPress={handlePress} />
    </View>
  );
};

export default App;

3. 应用案例和最佳实践

应用案例

手势动画

Reanimated 非常适合处理复杂的手势动画。例如，你可以创建一个可以拖动的卡片组件：

import React from 'react';
import { View, StyleSheet } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedGestureHandler,
  useAnimatedStyle,
  withSpring,
} from 'react-native-reanimated';
import { PanGestureHandler } from 'react-native-gesture-handler';

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

  const gestureHandler = useAnimatedGestureHandler({
    onStart: (_, ctx) => {
      ctx.startX = translateX.value;
      ctx.startY = translateY.value;
    },
    onActive: (event, ctx) => {
      translateX.value = ctx.startX + event.translationX;
      translateY.value = ctx.startY + event.translationY;
    },
    onEnd: () => {
      translateX.value = withSpring(0);
      translateY.value = withSpring(0);
    },
  });

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

  return (
    <PanGestureHandler onGestureEvent={gestureHandler}>
      <Animated.View style={[styles.card, animatedStyle]} />
    </PanGestureHandler>
  );
};

const styles = StyleSheet.create({
  card: {
    width: 100,
    height: 100,
    backgroundColor: 'red',
    borderRadius: 10,
  },
});

export default DraggableCard;

最佳实践

• 避免频繁更新：尽量减少动画过程中的频繁更新，以提高性能。
• 使用 useSharedValue：对于需要在多个地方共享的值，使用 useSharedValue 而不是 useState。
• 合理使用 withSpring 和 withTiming：根据动画的需求选择合适的动画函数。

4. 典型生态项目

React Native Gesture Handler

React Native Gesture Handler 是一个与 Reanimated 紧密结合的手势处理库，提供了更高级的手势识别和处理功能。通过结合使用这两个库，开发者可以轻松实现复杂的手势交互和动画效果。

React Native Skia

React Native Skia 是一个基于 Skia 的图形渲染库，与 Reanimated 结合使用可以实现更复杂的图形动画和视觉效果。

React Native Navigation

React Native Navigation 是一个用于导航管理的库，结合 Reanimated 可以实现流畅的页面切换动画。

通过这些生态项目的结合使用，开发者可以构建出更加丰富和流畅的 React Native 应用。