如何从 Reanmited Value 中获取数值？

Question

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

我使用 victory native 饼图，我想制作一个简单的效果，即饼图角度从 0 到 360，但我已经尝试过 react-native animated API 它与添加侦听器一起使用效果很好，但我想要使用 reanimated 性能问题

我要找的图表从0到360开始的动画效果

运行正确使用 react-native 动画 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 中：

您可以显式使用 .value 来设置动画 sharedValues, derivedValues，但您也必须创建动画组件

如何从 Reanmited Value 中获取数值？

How to get numeric value from Reanmited Value?

javascript

reactjs

react-native

victory-charts

react-native-reanimated