在React Native中的动画过程中禁用该按钮

Question

我正在尝试创建一个应用程序，该应用程序在单击按钮后启动动画，并在动画运行时禁用按钮。我想通过按下按钮，禁用它，运行动画，然后重新启用它来多次使用它。到目前为止，我有一个按钮，当我按下它时会被禁用，然后我运行动画(蓝色方块向右移动，然后回到起始位置(，或者至少这是我所希望的。实际情况是，当按下按钮时，它会被禁用，但不会发生动画。经过进一步调查，我发现问题是由于在动画活动时使用setState造成的。例如，如果在动画运行时setState，则动画将停止。然而，我不明白为什么在动画开始前设置状态也不起作用。我使用的是Animated.View，这是我的代码：

import React, { useState } from 'react'
import { Animated, View, Button } from 'react-native';
export default function App() {
const [dis,setDis] = useState(false)
const animatedMargin = new Animated.Value(0);
const slideAnimation = () => {
Animated.timing(animatedMargin, { //go right
toValue: 200,
duration: 1000,
useNativeDriver: false 
}).start()
setTimeout(() => {
Animated.timing(animatedMargin, { //return left
toValue: 0,
duration: 1000,
useNativeDriver: false 
}).start()
}, 1000);
setTimeout(() => { setDis(false) }, 2000); //enable button
}
return (
<View style={{ marginTop:50 }}>
<Animated.View style={{ left: animatedMargin }}>
<View style={{ backgroundColor:'#00f', height:50, width:50 }}/>
</Animated.View>
<Button title='go' disabled={dis}
onPress={()=>{
setDis(true),
slideAnimation()
}}
></Button>
</View>
);
}

如果我不使用部分代码来禁用和启用按钮，动画效果会很好。

Answer 1

这里的问题似乎是动画值。只需像这样用useRef包装：

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

例如，如果动画值在500毫秒内从0更改为1，则当您更改状态(重新渲染组件(时，将创建一个新实例并丢失当前进度，这就是为什么您需要用useRef钩子将其包裹以只创建一次实例。