动画期间更新状态会导致动画停止运行

Question

我正在尝试使用可拖动组件，拖动时还会创建类似进度条的效果。它几乎可以工作，但我发生了一些奇怪的事情。

在我的onDrag处理程序中，我更新了栏的状态，以便栏可以呈现适当的宽度。但是一旦我设置了状态，我的动画就会重置，因为内部panResponder会重新创建自身。

我是反应（和反应本机）的新手。有几个类似的问题，但我无法弄清楚他们正在做什么来解决问题。

Answer 1

当你改变状态时，他会再次渲染所有内容，并根据你给他的数字再次给你 X 的位置可以使用Animated组件来改变拖动宽度而不改变状态给你附上一个例子成功地 ：）添加导入import React, { useState, useRef } from 'react';import { Text, View, StyleSheet, Animated } from 'react-native';添加参考动画值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();}现在在 bar 组件中使用它！<Animated.View style={[styles.bar, { width: widthAnim }]} />