已解決430363個問題，去搜搜看，總會有你想問的

動畫期間更新狀態會導致動畫停止運行

首頁猿問動畫期間更新狀態會導致動畫停止運行

動畫期間更新狀態會導致動畫停止運行

JavaScript

紅顏莎娜 2023-07-06 19:50:33

我正在嘗試使用可拖動組件，拖動時還會創建類似進度條的效果。它幾乎可以工作，但我發生了一些奇怪的事情。在我的onDrag處理程序中，我更新了欄的狀態，以便欄可以呈現適當的寬度。但是一旦我設置了狀態，我的動畫就會重置，因為內部panResponder會重新創建自身。我是反應（和反應本機）的新手。有幾個類似的問題，但我無法弄清楚他們正在做什么來解決問題。

查看完整描述

1 回答

慕尼黑的夜晚無繁華

TA貢獻1864條經驗獲得超6個贊

當你改變狀態時，他會再次渲染所有內容，并根據你給他的數字再次給你 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 }]} />

反對回復 2023-07-06

1 回答
0 關注
151 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

動畫期間更新狀態會導致動畫停止運行

動畫期間更新狀態會導致動畫停止運行

1 回答

添加回答