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

Question

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

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

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

React Native state update during animation "resets" the animation

Update state during animation in react native?

这是我要生产的组件的摘要。

https://snack.expo.io/mHaw0gLLz

Answer 1

当你改变state的时候他又重新渲染所有的东西，然后按照你给他的图重新给你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();
}

现在在条形组件中使用它！

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

fix expo

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

Updating state during animation stops animation from functioning

javascript

reactjs

react-native

react-animated