如何从 Reanmited Value 中获取数值？答案

【问题标题】：How to get numeric value from Reanmited Value?如何从 Reanmited Value 中获取数值？
【发布时间】：2020-03-05 07:01:03
【问题描述】：

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

我使用的是胜利原生饼图，我想制作一个简单的效果，饼图角度从 0 到 360，但我尝试了 react-native 动画 API，它与添加侦听器配合得很好，但我想使用 reanimated 来解决性能问题

我要找的图表从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
        }
      }}
    />
  );
};

如何通过 reanimated 实现所需的输出？

【问题讨论】：

标签： javascript reactjs react-native victory-charts react-native-reanimated

【解决方案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，但您也必须创建AnimatedComponent

【讨论】：