React Navigation V6实现屏幕淡出-淡入自定义导航过渡求助

要实现当前屏幕淡出、新屏幕淡入的导航过渡，你需要自定义cardStyleInterpolator和transitionSpec配置，以下是可直接复用的实现方案：

1. 自定义过渡插值函数 #

这个函数会根据导航进度，分别控制当前屏幕的淡出和新屏幕的淡入：

import { Animated, Easing } from 'react-native';

const fadeTransition = ({ current, next, inverted, layouts: { screen } }) => {
  // 当前屏幕透明度：从1平滑过渡到0
  const currentOpacity = Animated.interpolate(current.progress, {
    inputRange: [0, 1],
    outputRange: [1, 0],
  });
  // 新屏幕透明度：从0平滑过渡到1
  const nextOpacity = Animated.interpolate(next ? next.progress : 0, {
    inputRange: [0, 1],
    outputRange: [0, 1],
  });

  return {
    cardStyle: {
      opacity: inverted ? currentOpacity : nextOpacity,
    },
  };
};

2. 配置Stack Navigator #

将自定义过渡应用到Stack Navigator的screenOptions中，同时通过transitionSpec控制动画时长和缓动效果：

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

const Stack = createStackNavigator();

const AppNavigator = () => {
  return (
    <Stack.Navigator
      screenOptions={{
        // 自定义过渡动画的时长与缓动逻辑
        transitionSpec: {
          open: {
            animation: 'timing',
            config: {
              duration: 400, // 动画时长，可按需调整
              easing: Easing.inOut(Easing.ease),
            },
          },
          close: {
            animation: 'timing',
            config: {
              duration: 400,
              easing: Easing.inOut(Easing.ease),
            },
          },
        },
        cardStyleInterpolator: fadeTransition,
      }}
    >
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Detail" component={DetailScreen} />
      {/* 添加你的其他屏幕 */}
    </Stack.Navigator>
  );
};

关键说明 #

• current.progress：当前屏幕的退出进度（0=未开始退出，1=完全退出）
• next.progress：新屏幕的进入进度（0=未开始进入，1=完全进入）
• transitionSpec的open和close分别控制进入和返回的动画，可单独调整时长和缓动效果
• 若不需要背景遮层过渡，无需额外配置overlayStyle

常见问题排查 #

• 确保使用的是createStackNavigator，Tab/Drawer导航的过渡配置逻辑不同
• 不要和transitionPresets同时使用，自定义插值会覆盖预设效果
• 如果是嵌套导航结构，需在对应子Stack中配置该过渡，而非根导航

内容的提问来源于stack exchange，提问作者Muhammad Ahmad