如何从 Reammited Value 中获取数值？

Question

我使用 react native reanimated 创建了一个简单的动画，但我无法访问 Reanimated Value 的数值

我使用的是胜利本机饼图，我想制作一个简单的效果，饼角从 0 到 360，但我已经尝试过 react-native 动画 API，它可以很好地与添加侦听器配合使用，但我想使用重新动画来解决性能问题

我正在寻找的图表从 0 到 360 开始的动画效果

使用 react-native Animated API 正确运行：

const Chart = props => {
  const { data, width, height } = props;
  const endAngleAnimatedValue = new Value(0);
  const [endAngle, setEndAngle] = useState(0);
  const runTiming = Animated.timing(endAngleAnimatedValue, {
    duration: 1000,
    to: 360
  });

  useEffect(() => {
    endAngleAnimatedValue.addListener(_endAngle => setEndAngle(_endAngle));
    runTiming.start();
    return () => {
      endAngleAnimatedValue.removeAllListeners();
    };
  }, [endAngleAnimatedValue]);

  return (
    <VictoryPie
      data={data}
      width={width}
      height={height}
      padding={0}
      startAngle={0}
      endAngle={endAngle}
      style={{
        data: {
          fill: ({ datum }) => datum.fill,
          fillOpacity: 0.7
        }
      }}
    />
  );
};

我怎样才能通过重生实现所需的输出？

Answer 1

我完全忘记了这个问题

如果使用react-native-reanimated v1，我们可以有两种实现：

1. using react-native-svg and some helpers from react-native-redash

2. using `const AnimatedPie = Animated.createAnimatedComponent(VictoryPie)` then passing `endAngleAnimatedValue` as a prop.

在复活 v2 中：

您可以显式使用.valueanimated sharedValues, derivedValues，但也必须createAnimatedComponent