如何在React Native中立即停止循环动画

Question

我正在尝试在react native中实现循环动画。我也可以停止动画，但是只有在完成正在运行的动画后才能停止动画。有没有办法立即停止它。由于我正在更改state的值，因此我认为我无法使用Animated.loop。

编辑：我尝试使用来停止动画

Animated.timing(this.state.opacity).stop()

但这对动画没有影响，它一直在继续。因此，我添加了一个布尔值来控制它，但是只有在完成正在进行的动画循环之后，该布尔值才有效。

这是我的代码

this.state = {
   varyingText: 'location',
   stopAnimation: false,
   opacity: new Animated.Value(0),
};


componentDidMount = () => {
    this.startAnimation();
  };

  startAnimation = () => {
    if (this.state.stopAnimation) return;

    Animated.timing(this.state.opacity, {
      toValue: 1,
      duration: 1000
    }).start(() => {
      Animated.timing(this.state.opacity, {
        toValue: 0,
        duration: 1000
      }).start(() => {
        this.setState({
          varyingText: 'location 1',
        }, () => {
          Animated.timing(this.state.opacity, {
            toValue: 1,
            duration: 1000
          }).start(() => {
            Animated.timing(this.state.opacity, {
              toValue: 0,
              duration: 1000
            }).start(() => {
              this.setState({
                varyingText: 'location 2',
              }, () => {
                Animated.timing(this.state.opacity, {
                  toValue: 1,
                  duration: 1000
                }).start(() => {
                  Animated.timing(this.state.opacity, {
                    toValue: 0,
                    duration: 1000
                  }).start(() => {
                    this.setState({
                      varyingText: 'location 3',
                    }, () => this.startAnimation())
                  })
                })
              })
            })
          })
        })
      })
    });
  };

stopAnimation = () => {
    this.setState({
      stopAnimation: true,
    });
  };

render() {
    const opacityStyle = {
      opacity: this.state.opacity,
    };
    return (
      <View style={styles.view}>
          <Animated.Text style={...opacityStyle}>
             {this.state.varyingText}
          </Animated.Text>

          <Button
             onPress={this.stopAnimation}
             title="Stop"
             color="#841584"
          />
      </View>
    );
  }

在代码中，如果我在文本为location 1时停止动画，则动画将停止，但仅在显示location 2之后。