React Native Reanimated：根据按钮点击切换组件进出动画方向

核心就是用状态控制动画方向，结合Reanimated的Animated.View，根据点击的是Continue还是Return切换对应的动画效果就行，不用折腾Animated.timing。

具体实现步骤 #

1. 加个状态记录导航方向，比如isGoingForward，true代表点了Continue前进，false代表点了Return后退
2. 根据这个状态动态给Animated.View设置entering和exiting属性
3. 切换组件的时候，用key属性强制组件重新挂载，确保动画能正常触发

完整代码示例 #

import { View, useState } from 'react-native';
import { Animated, SlideInRight, SlideOutLeft, SlideInLeft, SlideOutRight } from 'react-native-reanimated';

const ScreenComponent = () => {
  // 记录当前显示的步骤/组件
  const [currentStep, setCurrentStep] = useState(0);
  // 记录动画方向：true=前进（Continue），false=后退（Return）
  const [isGoingForward, setIsGoingForward] = useState(true);

  // 点击Continue触发：切换到下一个组件，标记前进方向
  const callNextConditionalComponent = () => {
    setIsGoingForward(true);
    setCurrentStep(prev => prev + 1);
  };

  // 点击Return触发：切换到上一个组件，标记后退方向
  const callPreviousConditionalComponent = () => {
    setIsGoingForward(false);
    setCurrentStep(prev => prev - 1);
  };

  // 根据当前步骤渲染对应组件
  const renderCurrentComponent = () => {
    switch(currentStep) {
      case 0:
        return <ComponentA />;
      case 1:
        return <ComponentB />;
      case 2:
        return <ComponentC />;
      default:
        return <ComponentA />;
    }
  };

  return (
    <View>
      <HeaderComponent />
      <Animated.View
        // 动态切换动画方向
        entering={isGoingForward ? SlideInRight : SlideInLeft}
        exiting={isGoingForward ? SlideOutLeft : SlideOutRight}
        key={currentStep} // 用key强制组件重新挂载，确保动画触发
      >
        {renderCurrentComponent()}
      </Animated.View>
      <FooterComponent
        onContinue={callNextConditionalComponent}
        onReturn={callPreviousConditionalComponent}
      />
    </View>
  );
};

关键点说明 #

• key属性是关键：当currentStep变化时，Animated.View因为key改变会重新挂载，Reanimated就能正常触发entering和exiting动画
• 状态直接绑定动画：不用复杂的Animated.timing，直接用isGoingForward状态切换预设的Slide动画就行，简单高效
• 组件切换逻辑：通过currentStep控制显示哪个组件，点击按钮时同步更新步骤和方向状态

内容的提问来源于stack exchange，提问作者Pedro Camara Junior