Javascript 在动画期间更新状态会停止动画的运行

我试图使用一个可拖动的组件，当拖动它时，它也会创建一个类似进度条的效果。它几乎开始工作了，但我有点奇怪

在我的

onDrag

处理程序中，我更新了条的状态，以便条可以呈现其适当的宽度。但是一旦我设置了状态，我的动画就会重置，因为内部

panResponder

会重新创建自己

我是新来的反应者（而且是本地人）。有几个类似的问题，但我不知道他们在做什么来解决这个问题

这是我正在尝试制作的组件的小吃

---

当你改变状态时，他会再次渲染所有内容，并根据你给他的图形再次给出X的位置

可以使用动画组件更改拖动宽度，而无需更改状态

给你举个例子

成功：）

添加导入

import React, { useState, useRef } from 'react';
import { Text, View, StyleSheet, Animated } from 'react-native';

添加ref动画值

const widthAnim = useRef(new Animated.Value(0)).current;

const onDrag=(event, gestureState)=> {
  let width = Math.min(Math.max(gestureState.moveX, iconSize), dragWidth);
  Animated.timing(widthAnim, {
    toValue: Math.max(width - padding, 0),
    duration: 1,
  }).start();
}

更改动画值

const widthAnim = useRef(new Animated.Value(0)).current;

const onDrag=(event, gestureState)=> {
  let width = Math.min(Math.max(gestureState.moveX, iconSize), dragWidth);
  Animated.timing(widthAnim, {
    toValue: Math.max(width - padding, 0),
    duration: 1,
  }).start();
}

现在在酒吧组件中使用它

<Animated.View style={[styles.bar, { width: widthAnim }]} />

---

我正在查看您的代码，发现可拖动组件没有移动，请尝试将x={barWidth？barWidth:padding}设置为可拖动组件。我用一个很好的解释更新了我的答案！