动画不触发重新渲染

Question

我有以下React Native代码。我在android上运行它，但还没有尝试其他设备。当它运行时，我按下按钮运行动画，可以看到参考值正在更新，并在我的addListener回调中打印到控制台。但似乎从来没有触发我的组件的重新渲染，即使endAngle被更新。所以，我的组件只渲染了一次，然后再也没有随着动画的变化而变化。我是否有什么明显的遗漏？

export default AnimatedDonutWrapper = (props) => {
  let AnimatedDonut = Animated.createAnimatedComponent(DonutChart);
  var endAngle = useRef(new Animated.Value(0.1)).current;

  endAngle.addListener((data) => {
    console.log(
      'data: ' + JSON.stringify(data) + ' ' + JSON.stringify(endAngle),
    );
  });

  function animate() {
    Animated.timing(endAngle, {
      toValue: 2 * Math.PI,
      duration: 2000,
      useNativeDriver: true,
    }).start();
  }

  return (
    <View
      style={{flex: 1, justifyDirection: 'column', justifyContent: 'center'}}>
      <View style={{flex: 1}}>
        <AnimatedDonut
          data={[2, 4, 6, 8]}
          chartTranslate={[useWindowDimensions().width / 2, 150]}
          innerRadius={70}
          outerRadius={100}
          startAngle={0}
          endAngle={endAngle}
        />
      </View>
      <View
        style={{
          flex: 1,
          alignItems: 'center',
        }}>
        <View style={{flex: 1, width: '50%'}}>
          <Button title="Refresh" color="red" onPress={animate} />
        </View>
      </View>
    </View>
  );
};