在动画过程中React Native状态更新“重置”动画

import React, { Component } from 'react';
import { Animated, View, Text, TouchableOpacity } from 'react-native';

class ResetAnimation extends Component {
  constructor() {
    super();
    this.animatedValue = new Animated.Value(0);
  }

  startAnimation = () => {
    Animated.timing(this.animatedValue, {
      toValue: 1,
      duration: 1000,
    }).start(() => {
      // 动画完成后将状态重置为初始状态
      this.animatedValue.setValue(0);
    });
  };

  render() {
    const interpolateValue = this.animatedValue.interpolate({
      inputRange: [0, 1],
      outputRange: [0, 200],
    });

    const animatedStyle = {
      transform: [{ translateY: interpolateValue }],
    };

    return (
      <View>
        <Animated.View style={[styles.box, animatedStyle]} />
        <TouchableOpacity onPress={this.startAnimation}>
          <Text>开始动画</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = {
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'red',
  },
};

export default ResetAnimation;