如何在React Native + React Navigation v6中让Android/iOS使用相同的屏幕导航动画

React Navigation v6默认会根据平台提供不同的导航转场动画，要实现两端完全一致的效果，可以通过以下几种方式：

方法1：全局强制使用iOS风格动画 #

直接在Stack导航器的全局screenOptions中指定动画类型，覆盖平台默认行为，让Android也采用iOS的滑动转场：

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

const Stack = createStackNavigator();

function AppNavigator() {
  return (
    <Stack.Navigator
      screenOptions={{
        // 统一使用从右侧滑入的iOS风格动画
        animation: 'slide_from_right',
        // 返回时使用弹出动画
        animationTypeForReplace: 'pop',
      }}
    >
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Detail" component={DetailScreen} />
    </Stack.Navigator>
  );
}

方法2：自定义统一转场动画 #

如果需要更个性化的统一动画，可以通过TransitionSpec和CardStyleInterpolator自定义转场逻辑，确保两端平台动画参数完全一致：

import { createStackNavigator, TransitionSpecs, CardStyleInterpolators } from '@react-navigation/stack';

const Stack = createStackNavigator();

// 统一使用iOS的转场时间曲线配置
const customTransitionSpec = {
  open: TransitionSpecs.TransitionIOSSpec,
  close: TransitionSpecs.TransitionIOSSpec,
};

// 采用iOS的水平滑动插值逻辑，也可以自行实现自定义效果
const customCardInterpolator = CardStyleInterpolators.forHorizontalIOS;

function AppNavigator() {
  return (
    <Stack.Navigator
      screenOptions={{
        transitionSpec: customTransitionSpec,
        cardStyleInterpolator: customCardInterpolator,
      }}
    >
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Detail" component={DetailScreen} />
    </Stack.Navigator>
  );
}

如果需要自定义动画（比如淡入+滑动），可以手动实现插值器：

const customCardInterpolator = ({ current, next, layouts }) => {
  const progress = current.progress.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 1],
  });

  return {
    cardStyle: {
      transform: [
        {
          translateX: next
            ? progress.interpolate({
                inputRange: [0, 1],
                outputRange: [layouts.screen.width, 0],
              })
            : current.progress.interpolate({
                inputRange: [0, 1],
                outputRange: [-layouts.screen.width, 0],
              }),
        },
      ],
      opacity: progress,
    },
  };
};

方法3：针对特定屏幕单独配置 #

如果仅需要部分屏幕保持平台一致，可在对应Stack.Screen的options中单独设置：

<Stack.Screen
  name="Detail"
  component={DetailScreen}
  options={{
    animation: 'slide_from_right',
    animationTypeForReplace: 'pop',
  }}
/>

注意事项 #

• 若使用Tab导航器，可通过tabBarAnimation属性统一Tab切换动画（默认spring在两端表现接近，若需完全一致可指定none或自定义）
• 动画配置会覆盖平台默认行为，需测试两端的交互体验确保符合预期

内容的提问来源于stack exchange，提问作者Hocine Hoho