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>
  );
};

Answer 1

就我而言，马上就收到有关将useNativeDriver设置为true的警告，所以我做到了。当我得到代码“工作”时，useNativeDriver：True阻止了它的运行。我将其切换为false，然后动画运行良好。我需要对此进行更多研究，以更好地了解正在发生的事情，但是它现在正在运行。

动画不触发重新渲染

1 个答案: