我正在嘗試創建一個應用程式，該應用程式在單擊按鈕后啟動影片并在影片運行時禁用該按鈕。我希望能夠通過按下按鈕、禁用它、運行影片然后重新啟用它來多次使用它。到目前為止，我有一個按鈕，當我按下它時它會被禁用，然后我運行一個影片（藍色方塊向右移動然后回到起始位置），或者至少這是我所希望的。實際情況是，當按下按鈕時，它會變為禁用狀態，但不會出現影片。經過進一步調查，我發現問題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>
);
}
如果我不使用部分代碼來禁用和啟用按鈕，則影片效果很好。
uj5u.com熱心網友回復：
似乎問題是這里的影片價值。只需useRef像這樣包裝它：
const animatedMargin = React.useRef(new Animated.Value(0)).current;
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/405722.html
標籤：
下一篇：具有唯一通用節點的通用樹