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

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 }]} />