React 本机动画不是动画

Question

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

稍后我也计划使用 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}
  >

React 本机动画不是动画

React native animations are not animated

react-native

react-native-reanimated

react-native-gesture-handler