如何使用@react-navigation/native-stack在iOS实现slide_from_left页面切换动画？

API 探路者

2026-7-26

解决方案：统一Android和iOS的页面左滑入栈动画

在React Navigation的Native Stack Navigator中，animation: 'slide_from_left'仅对Android生效是因为iOS原生栈动画的逻辑与Android存在差异。要实现两端统一的左滑入栈效果，你需要自定义页面切换的插值动画，具体实现方式如下：

方法一：自定义左滑入插值函数

定义一个控制页面从左侧滑入的插值逻辑：

const slideFromLeftInterpolator = ({ current, layouts }) => {
  return {
    cardStyle: {
      transform: [
        {
          translateX: current.progress.interpolate({
            inputRange: [0, 1],
            outputRange: [-layouts.screen.width, 0],
          }),
        },
      ],
    },
  };
};

将该插值器配置到导航器或单个页面中：

// 全局配置（所有页面统一生效）
<NativeStack.Navigator
  screenOptions={{
    cardStyleInterpolator: slideFromLeftInterpolator,
    animationEnabled: true, // 必须开启，确保自定义动画生效
  }}
>
  {/* 你的页面栈内容 */}
</NativeStack.Navigator>

// 单个页面单独配置
<NativeStack.Screen
  name="TargetScreen"
  component={TargetScreenComponent}
  options={{
    cardStyleInterpolator: slideFromLeftInterpolator,
    animationEnabled: true,
  }}
/>

方法二：修改iOS默认水平动画方向

如果想基于iOS原生水平动画的基础上反转方向，可以直接调整内置插值器的逻辑：

import { CardStyleInterpolators } from '@react-navigation/native-stack';

const slideFromLeftIOS = ({ current, layouts }) => {
  const interpolatedTranslateX = current.progress.interpolate({
    inputRange: [0, 1],
    outputRange: [-layouts.screen.width, 0],
  });

  return {
    cardStyle: {
      transform: [{ translateX: interpolatedTranslateX }],
    },
  };
};

之后同样在screenOptions中设置该插值器即可。