如何在React Navigation中创建带有可见层级的堆栈导航器？

效果名称 #

这种交互通常被称为层级堆叠导航，属于卡片模态转场的变种，核心是下层页面在新页面推入时做缩放下沉，突出上下层级关系。

可行性说明 #

完全可以在React Native中实现，且可以基于React Navigation框架完成，不需要从零搭建导航基础能力。

核心实现步骤 #

• 转场动画自定义：你可以基于React Navigation提供的转场配置能力，分别定义新页面推入、旧页面下沉的动画效果
• 顶部堆栈指示器自定义：通过React Navigation提供的导航状态监听能力，自定义导航头组件，根据当前栈的长度渲染对应的层级标识

示例代码（基于@react-navigation/stack） #

先安装React Navigation相关基础依赖后，自定义转场配置如下：

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

// 自定义转场配置
const stackTransitionConfig = {
  // 沿用iOS标准弹性动画曲线，也可以根据需求自定义
  transitionSpec: {
    open: TransitionSpecs.TransitionIOSSpec,
    close: TransitionSpecs.TransitionIOSSpec,
  },
  cardStyleInterpolator: ({ current, next, layouts }) => {
    return {
      cardStyle: {
        transform: [
          // 新页面从下方滑入+缩放入场
          {
            translateY: current.progress.interpolate({
              inputRange: [0, 1],
              outputRange: [layouts.screen.height * 0.3, 0],
            }),
          },
          {
            scale: current.progress.interpolate({
              inputRange: [0, 1],
              outputRange: [0.95, 1],
            }),
          },
          // 旧页面缩放下沉
          ...(next
            ? [
                {
                  scale: next.progress.interpolate({
                    inputRange: [0, 1],
                    outputRange: [1, 0.9],
                  }),
                },
              ]
            : []),
        ],
        // 旧页面增加圆角增强层级感
        borderRadius: next ? next.progress.interpolate({
          inputRange: [0, 1],
          outputRange: [0, 16],
        }) : 0,
        overflow: 'hidden',
      },
    };
  },
};

在堆栈导航器的配置中引入即可生效：

<Stack.Navigator
  screenOptions={{
    ...stackTransitionConfig,
    header: () => <CustomStackIndicator /> // 自定义顶部层级指示器组件
  }}
>
  {/* 注册你的路由页面 */}
</Stack.Navigator>

顶部指示器实现 #

自定义CustomStackIndicator组件时，通过useNavigationState钩子获取当前栈的路由数量，渲染对应个数的标识条，当前激活页面对应的标识做高亮处理即可。

内容的提问来源于stack exchange，提问作者C.T. Bell