React Native：卸载动画

Question

我有一个类似组件的组件，它接受一个 prop 并基于这个 prop 进行渲染。每次这个道具发生变化并且组件重新渲染时，我希望新组件从 20dp 上升，旧组件下降到 20dp 并消失。我实现了第一个（缓入），但我不知道如何实现第二个（缓出）。我认为我必须在 useEffect(unmount) 的返回方法上执行此操作，但 Animated 似乎在Mount 上不起作用。

function Component({status}: Props) {
if (status === 'x') return <AnimatedView status={status}><View> xxx <View /><AnimatedView />

<AnimatedView status={status}><View> yyy <View /><AnimatedView />
}

function AnimatedView ({status}: AnimatedProps) {
  const animated = useRef(new Animated.Value(status === 'x' ? 1 : 0))
    .current;

  useEffect(() => {
    const animation = Animated.timing(animated, {
      toValue: status === 'x' ? 1 : 0,
      duration: 200,
      useNativeDriver: true
    });
    animation.start();
    return () => {
      animation.stop();
    };
  }, [animated, status]);
}

 const styles = {
    transform: [
      {
        translateY: animated.interpolate({
          inputRange: [0, 1],
          outputRange: status === 'x' ? [20, 0] : [0, 20]
        })
      }
    ],
    opacity: animatedFormHeader.interpolate({
      inputRange: [0, 1],
      outputRange:  status === 'x' ? [0, 1] : [1, 0]
    })
  };

有什么方法可以通过“react-native”动画实现这一点？我应该使用其他 API 吗？我可以举一些例子吗？实际上，我认为我应该重新编写整个内容，因为我认为动画基于道具发生并不是一个好主意。我只想在安装和卸载时为这个组件设置动画。

Answer 1

我根据上面的理解创建了一个组件，希望这是您想要的方式...

小吃：https://snack.expo.io/yjEX_u_Tu

export default ({ status }) => {
  const [text, setText] = useState('');
  const value = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    const animation = Animated.timing(value, {
      toValue: 1,
      duration: 500,
    });
    animation.start(({ finished }) => {
      if (finished) {
        console.log(finished);
        setText(status ? 'Hi' : 'Bye');
        Animated.timing(value, {
          toValue: 0,
          duration: 500,
        }).start();
      }
    });
  }, [status]);

  const translateY = value.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 20],
  });

  const opacity = value.interpolate({
    inputRange: [0, 1],
    outputRange: [1, 0.2],
  });
  return (
    <Animated.View
      style={[styles.container, { opacity, transform: [{ translateY }] }]}>
      <Animated.Text style={{ color: 'white' }}>{text}</Animated.Text>
    </Animated.View>
  );
};