复活

一个提供 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're installing this in a bare React Native app, you should also follow these additional installation instructions.

无需额外配置。当你安装库时，重新启动 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,
  },
});