react-native-reanimated

一个提供 API 的库，极大地简化了创建流畅、强大且易于维护的动画的过程。

Android

iOS

tvOS

Web

Included in Expo Go

GitHub

npm

Bundled version:

~3.17.4

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

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

安装

Terminal

- npx expo install react-native-reanimated

If you are installing this in an existing React Native app, make sure to install expo in your project. Then, follow the installation instructions provided in the library's README or documentation.

无需额外配置。安装该库时，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="切换"
        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 及其用法的完整信息。