我有一个进度条屏幕内导航，我需要重置每次用户点击该特定路线。现在它只播放动画，当我第一次去该路线。我的问题是：如何重置barWidth，以便每次用户单击特定路线时都播放动画？
我试过什么了？
我认为问题是组件没有重新渲染，这就是为什么值没有重置，但看起来问题是当用户在动画播放后点击屏幕时，条的宽度没有重置。
一开始我尝试使用useRef挂钩，后来改为简单地将动画值设置为0，但在这两种情况下，条的宽度都没有重置。
编码：

const { width } = Dimensions.get("screen");

const SettingsScreen = ({navigation}) => {
  const isFocused = useIsFocused();
  return (
    <FlatList
      contentContainerStyle={style.barContainer}
      data={[1, 2, 3, 4, 5]}
      keyExtractor={(_, index) => index.toString()}
      renderItem={() => (
        <ProgressBar isFocused={isFocused} navigation={navigation} />
      )}
    ></FlatList>
  );
};

const ProgressBar = ({ navigation, isFocused }) => {
  //const barWidth = React.useRef(new Animated.Value(0)).current;
const barWidth = new Animated.Value(0);

  console.log(barWidth);

  const finalWidth = width / 2;

  React.useEffect(() => {
    const listener = navigation.addListener("focus", () => {
      Animated.spring(barWidth, {
        toValue: finalWidth,
        bounciness: 10,
        speed: 2,
        useNativeDriver: false,
      }).start();
    });

    return listener;
  }, [navigation]);

  return (
    <View style={style.contentContainer}>
      <Animated.View style={[style.progressBar, { width: barWidth }]} />
    </View>
  );
};

const style = StyleSheet.create({
  contentContainer: {
    flex: 1,
    justifyContent: "center",
    padding: 30,
  },
  barContainer: {
    padding: 30,
  },
  progressBar: {
    backgroundColor: "green",
    width: width / 2,
    height: 15,
    borderRadius: 15,
  },
});