复活

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

该库在 Expo SDK 参考中列出，因为它包含在 Expo 中。你可以将你选择的任何库与 开发构建 一起使用。

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

¥react-native-reanimated provides an API that greatly simplifies the process of creating smooth, powerful, and maintainable animations.

Reanimated 使用与 JavaScriptCore 的 "远程 JS 调试" 不兼容的 React Native API。要将调试器与带有 react-native-reanimated 的应用一起使用，你需要使用 Hermes JavaScript 引擎 和 Hermes 的 JavaScript 检查器。

¥Reanimated uses React Native APIs that are incompatible with "Remote JS Debugging" for JavaScriptCore. To use a debugger with your app with react-native-reanimated, you'll need to use the Hermes JavaScript engine and the JavaScript Inspector for Hermes.

安装

¥Installation

If you are installing this in an existing React Native app (bare workflow), start by installing expo in your project. Then, follow the additional instructions as mentioned by library's README under "Installation in bare React Native projects" section.

无需额外配置。当你安装库时，重新启动 Babel 插件 会自动在 babel-preset-expo 中配置。

¥No additional configuration is required. Reanimated Babel plugin is automatically configured in babel-preset-expo when you install the library.

用法

¥Usage

下面的例子展示了如何使用 react-native-reanimated 库创建一个简单的动画。有关 API 及其用法的更多信息，请参阅 react-native-reanimated 文档。

¥The following example shows how to use the react-native-reanimated library to create a simple animation. For more information on the API and its usage, see react-native-reanimated documentation.

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,
  },
});