react-native-reanimated

一个极大简化创建流畅、强大且易于维护的动画过程的库

Android

iOS

tvOS

Web

Included in Expo Go

GitHub

npm

Recommended version:

4.6.0

react-native-reanimated 提供了一套 API，大幅简化创建流畅、强大且易于维护的动画的过程。

Reanimated 使用的 React Native API 与 JavaScriptCore 的“远程 JS 调试”不兼容。要在使用 react-native-reanimated 的应用中使用调试器，你需要使用 Hermes JavaScript 引擎和 Hermes 的 JavaScript 检查器。

安装

Terminal

- npx expo install react-native-reanimated react-native-worklets

- yarn expo install react-native-reanimated react-native-worklets

- pnpm expo install react-native-reanimated react-native-worklets

- bun expo install react-native-reanimated react-native-worklets

无需进行其他配置。安装此库时，Reanimated Babel 插件会在 babel-preset-expo 中自动配置。

用法

以下示例展示了如何使用 react-native-reanimated 库创建一个简单的动画。

使用 react-native-reanimated

import Animated, {
  useSharedValue,
  withTiming,
  useAnimatedStyle,
  Easing,
} from 'react-native-reanimated';
import { View, Button, StyleSheet } from 'react-native';

export default function AnimatedStyleUpdateExample() {
  const randomWidth = useSharedValue(10);

  const config = {
    duration: 500,
    easing: Easing.bezier(0.5, 0.01, 0, 1),
  };

  const style = useAnimatedStyle(() => {
    return {
      width: withTiming(randomWidth.value, config),
    };
  });

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.box, style]} />
      <Button
        title="toggle"
        onPress={() => {
          randomWidth.value = Math.random() * 350;
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 100,
    height: 80,
    backgroundColor: 'black',
    margin: 30,
  },
});

了解更多

访问官方文档

获取有关 API 及其用法的完整信息。