react-native - React 原生动画不是动画的

Question

所以目前正在试验 RN 动画，我试图尽可能慢地了解基本功能和工作流程。我创建了一个新的 Expo 应用程序并通过命令安装了react-native-reanimated包版本~1.13.0和react-native-gesture-handler版本。~1.7.0expo install

稍后我也计划使用该react-native-redash软件包，但现在我正在尝试配置为什么下面的代码根本不起作用。

import React from "react";
import { View, StyleSheet } from "react-native";

import Animated from "react-native-reanimated";
import { PanGestureHandler } from "react-native-gesture-handler";

const { Value } = Animated;

export default function App() {
  const translateY = new Value(0);
  const translateX = new Value(0);

  return (
    <View style={styles.container}>
      <PanGestureHandler
        onGestureEvent={Animated.event(
          [
            {
              nativeEvent: {
                translationY: translateY,
                translationX: translateX,
              },
            },
          ],
          { useNativeDriver: true }
        )}
      >
        <Animated.View
          style={[
            styles.ball,
            {
              transform: [
                { translateY: translateY },
                { translateX: translateX },
              ],
            },
          ]}
        ></Animated.View>
      </PanGestureHandler>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#ffffff",
    alignItems: "center",
    justifyContent: "center",
  },
  ball: {
    width: 100,
    height: 100,
    borderRadius: 9999,
    backgroundColor: "black",
  },
});

之后我的“球”视图没有动画。任何人都知道我在这里做错了什么？

Answer 1

event() 节点应分配给

 const eventHandler = event(/* */);
 // ...
 <PanGestureHandler
    onGestureEvent={eventHandler}
    onHandlerStateChange{eventHandler}
  >