如何实现React Native导航的黑场淡入淡出过渡效果？

当然可以实现这种过渡效果！其实核心就是利用React Navigation的自定义过渡配置，把「当前屏幕淡出到黑场」和「新屏幕从黑场淡入」这两个阶段的动画结合起来就行。我给你一步步拆解具体实现方法：

前提说明 #

假设你使用的是React Navigation 5/6+（目前主流版本），我们会用到导航库自带的cardStyleInterpolator和transitionSpec来定义自定义过渡。

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

这个函数会控制导航过程中当前屏幕、新屏幕以及黑场背景的透明度变化：

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

const fadeToBlackThenFadeInterpolator = ({ current, next, layouts }) => {
  // 控制黑场背景的透明度：0→0.5秒时黑场渐显，0.5→1秒时黑场渐隐
  const blackOverlayOpacity = current.progress.interpolate({
    inputRange: [0, 0.5, 1],
    outputRange: [0, 1, 0],
  });

  // 当前屏幕的透明度：0→0.5秒时从完全可见淡出到透明
  const currentScreenOpacity = current.progress.interpolate({
    inputRange: [0, 0.5],
    outputRange: [1, 0],
  });

  // 新屏幕的透明度：0.5→1秒时从透明淡入到完全可见
  const nextScreenOpacity = next ? next.progress.interpolate({
    inputRange: [0.5, 1],
    outputRange: [0, 1],
  }) : 0;

  return {
    // 当前屏幕的样式
    cardStyle: {
      opacity: currentScreenOpacity,
    },
    // 黑场背景的样式
    overlayStyle: {
      backgroundColor: 'black',
      opacity: blackOverlayOpacity,
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
    },
    // 新屏幕的样式
    nextCardStyle: {
      opacity: nextScreenOpacity,
    },
  };
};

2. 在Stack导航器中应用过渡配置 #

把上面的插值函数和过渡动画配置绑定到你的Stack导航器上：

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

const Stack = createStackNavigator();

function AppNavigator() {
  return (
    <Stack.Navigator
      screenOptions={{
        // 应用自定义过渡插值
        cardStyleInterpolator: fadeToBlackThenFadeInterpolator,
        // 定义过渡的动画曲线和时长
        transitionSpec: {
          open: {
            animation: 'timing',
            config: {
              duration: 800, // 过渡总时长，可根据需求调整（比如改成600）
              easing: Easing.inOut(Easing.ease),
            },
          },
          close: {
            // 返回时的过渡配置，可以和打开时一致或者单独调整
            animation: 'timing',
            config: {
              duration: 800,
              easing: Easing.inOut(Easing.ease),
            },
          },
        },
      }}
    >
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Target" component={TargetScreen} />
    </Stack.Navigator>
  );
}

3. 自定义调整（可选） #

• 修改黑场颜色：把overlayStyle里的backgroundColor改成你想要的颜色（比如#222222深灰）
• 增加黑场停留时间：调整inputRange的数值，比如把黑场的插值改成：

  const blackOverlayOpacity = current.progress.interpolate({
    inputRange: [0, 0.3, 0.7, 1],
    outputRange: [0, 1, 1, 0],
  });
  

  这样黑场会在0.3→0.7秒期间保持完全不透明，形成短暂的停顿效果
• 调整过渡速度：修改transitionSpec里的duration值，数值越小过渡越快

关键原理 #

这个实现的核心是把整个过渡过程拆成两个阶段：

1. 前半段（0→50%时长）：当前屏幕逐渐消失，黑场背景逐渐显现
2. 后半段（50%→100%时长）：新屏幕逐渐显现，黑场背景逐渐消失

通过React Navigation的progress插值器，我们能精准控制每个元素在过渡过程中的状态变化，完美实现你想要的效果。

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