這個賞金已經結束。此問題的答案有資格獲得 100聲望賞金。賞金寬限期在13 小時后結束。 廢土想引起更多的關注這個問題。
加載資料后，我試圖停止影片。為了測驗，我使用計時器來模擬狀態變化（資料已加載）以中斷影片。問題是影片在狀態改變后繼續運行。
const [isLoading, setIsLoading] = useState(false);
const animationRef = useRef(new Animated.Value(0)).current;
const loadData = () => {
setIsLoading(true);
setTimeout(() => {
setIsLoading(false);
}, 3000)
}
useEffect(() => {
const rotateElement = () => {
animationRef.setValue(0);
Animated.timing(animationRef, {
toValue: 1,
duration: 1500,
easing: Easing.linear,
useNativeDriver: true,
}).start(rotateElement);
};
if (isLoading) {
rotateElement();
} else {
Animated.timing(animationRef).stop();
}
}, [isLoading, animationRef]);
const spin = animationRef.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '360deg'],
});
小吃： https ://snack.expo.dev/@wastelandtime/timer
uj5u.com熱心網友回復：
僅嘗試從 start 中洗掉引數 rotateElement。
const rotateElement = () => {
animationRef.setValue(0);
Animated.timing(animationRef, {
toValue: 1,
duration: 1500,
easing: Easing.linear,
useNativeDriver: true,
}).start();
uj5u.com熱心網友回復：
您可以設定一個非常長的持續時間，理想情況下只要您配置的超時。然后，您不需要像 Ivan 建議的那樣呼叫傳遞 as 回呼的start函式。rotateElement這樣，當您呼叫該stop方法時，它將按需要作業。
另一種選擇是使用 react-native-reanimated 包以更具宣告性的方式撰寫此函式，確保影片將在您需要時運行。
我編輯了你的零食，實施了復活的替代方案：https ://snack.expo.dev/@scalfs/timer
uj5u.com熱心網友回復：
在查看代碼示例時，只需使用 Animated.loop（具有所需的迭代）應該可以很好地作業。所以代碼塊中的 useEffect 是這樣的，
useEffect(() => {
const rotateElement = () => {
// animationRef.setValue(0); This isn't necessary anymore.
Animated.loop(
Animated.timing(animationRef, {
toValue: 1,
duration: 1500,
easing: Easing.linear,
useNativeDriver: true,
}),
{
iterations: 2,
}
).start(rotateElement);
};
if (isLoading) {
rotateElement();
} else {
Animated.timing(animationRef).stop();
}
}, [isLoading, animationRef]);
至于您的用例，可以將迭代設定為足夠高的數量，并且只需使用 if 陳述句在加載完成時停止回圈，就像您在此處所做的那樣。您也可以添加錯誤檢查，這樣回圈就不會無限地繼續下去。
uj5u.com熱心網友回復：
每次狀態更改時，您都會創建一個新的 rotateElement 瞬間。你試圖停止的影片不是你想的那樣。
const loadData = () => {
setIsLoading(true);
setTimeout(() => {
setIsLoading(false);
}, 1000)
}
const rotateElement = Animated.timing(animationRef, {
toValue: 1,
duration: 3000,
easing: Easing.linear,
useNativeDriver: true,
});
useEffect(() => {
if (isLoading) {
rotateElement.start();
} else {
rotateElement.stop();
}
}, [isLoading]);
最好在 useEffect 之外創建 rotateElement，如上所示。
我還更改了影片的時間，因為演示太短而無法正確模擬加載結束。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/493209.html