useEffect 反向动画不显示

Question

问题：

目前，我正在为useEffect Hook 和Animated.timing 苦苦挣扎。不知何故没有显示反向动画。切换只是跳回（见下面的 gif）。莫名其妙，动画回调调用成功。

想要的行为： 当活动道具改变时，滑块应该平滑地来回移动。

代码

滑块:

const Slider = ({sliderWidth, circleHeight, active, onToggle}) => {
    const transformX = new Animated.Value(0);

    React.useEffect(() => {
      console.log('only run when active changed', transformX);
      const value = active ? sliderWidth-circleHeight: 0;
      console.log('value', value);
        Animated.timing(transformX, {
          toValue: value,
          duration: 500,
          useNativeDriver: true
        }).start(() => console.log('animation done'));
    }, [active, transformX, sliderWidth, circleHeight]);

    return (
      <View style={{position: 'absolute',width: sliderWidth+10, backgroundColor: 'white', borderBottomLeftRadius: 8, borderBottomRightRadius: 8, flexDirection: 'column', alignItems: 'center'}}>
        <View style={{width: sliderWidth, borderRadius: sliderWidth/2, borderWidth: 1, height: circleHeight,justifyContent: 'center', alignItems: 'center', marginTop: 8, marginBottom: 8, backgroundColor: 'white'}}>
          <Text style={{fontSize: 11}}> {active ?  "Pickup" : "Delivery"} </Text>
          <TouchableOpacity onPress={onToggle} style={{position: 'absolute', left:0,  transform: [{translateX: transformX}]}}>
          <View style={{height: circleHeight-2, width: circleHeight-2, borderRadius: circleHeight/2-1, backgroundColor: 'orange' }} />
          </TouchableOpacity>
        </View>
      </View>
    );
};

应用程序：

export default function App() {
  const sliderWidth = WIDTH/3;
  const circleHeight = 30;
  const [active, setActive] = React.useState(0);
  return (
    <View style={styles.container}>
      <Slider sliderWidth={sliderWidth} circleHeight={circleHeight} onToggle={() => setActive(!active)} active={active}/>
    </View>
  );
}

小吃

https://snack.expo.io/@tim1717/useeffect-animation

Answer 1

这很简单，你应该使用 transformX 作为状态。老实说，我不知道是什么原因导致了这个问题，但这是一个问题。

const Slider = ({sliderWidth, circleHeight, active, onToggle}) => {
  const [transformX] = React.useState(new Animated.Value(0));
...

useEffect 反向动画不显示

useEffect reverse animation is not shown

animation

react-native

react-hooks

use-effect

问题：

代码

小吃