React Navigation实现屏幕层叠效果的三类问题解决方案问询

Stack Overflow支持直接嵌入gif格式的动图，上传到问题附件即可直接显示；Loom视频暂不支持直接嵌入，你可以粘贴视频链接作为补充说明。

以下是你三个问题的解决方案：

修改后的完整配置 #

过渡配置

import { Dimensions } from 'react-native'
const { height: windowHeight } = Dimensions.get('window')
// 若适配带状态栏的设备，可通过react-native-safe-area-context获取实际状态栏高度替换此处
const STATUS_BAR_HEIGHT = 0

const MyTransition = {
  transitionSpec: {
    open: {
      animation: 'timing',
      config: {
        duration: 750,
        // 若需要动态动画borderRadius，可开启下一行关闭原生驱动
        // useNativeDriver: false
      },
    },
    close: {
      animation: 'timing',
      config: {
        duration: 750,
        // useNativeDriver: false
      },
    },
  },
  cardStyleInterpolator: ({ current, previous, layouts }) => {
    return {
      // 当前打开的Screen B样式配置
      cardStyle: {
        transform: [
          {
            perspective: 750
          },
          {
            translateY: current.progress.interpolate({
              inputRange: [0,  1],
              outputRange: [windowHeight -54 - STATUS_BAR_HEIGHT,  54],
            }),
          },
          {
            scale: current.progress.interpolate({
              inputRange: [0, 1, 2],
              outputRange: [1.2, 1, .9],
            }),
          },
        ],
      },
      // 下层Screen A样式配置
      previousCardStyle: previous ? {
        transform: [
          {
            scale: current.progress.interpolate({
              inputRange: [0, 1],
              outputRange: [1, 0.95],
            }),
          },
          {
            translateY: current.progress.interpolate({
              inputRange: [0,1],
              outputRange: [0, 20]
            })
          }
        ],
        opacity: current.progress.interpolate({
          inputRange: [0,1],
          outputRange: [1, 0.8]
        })
      } : {},
      // 遮罩层样式配置
      overlayStyle: {
        backgroundColor: 'rgba(0,0,0,0.3)',
        opacity: current.progress.interpolate({
          inputRange: [0, 1],
          outputRange: [0, 1],
        }),
      },
    }
  },
}

导航器配置

<Stack.Navigator
  screenOptions={{
    headerShown: false,
    cardOverlayEnabled: true,
    gestureEnabled: true,
    presentation: 'modal', // React Navigation 6+ 原mode属性改为presentation，写在screenOptions中生效
    cardStyle: { backgroundColor: 'transparent' }, // 卡片背景设为透明
    ...MyTransition,
  }}
>
  <Stack.Screen name="ScreenA" component={ScreenA} />
  <Stack.Screen name="ScreenB" component={ScreenB} />
</Stack.Navigator>

页面组件配置

给ScreenA和ScreenB的根View添加如下样式：

const rootStyle = {
  flex: 1,
  backgroundColor: '#ffffff', // 页面实际背景色写在根容器中
  borderTopLeftRadius: 16,
  borderTopRightRadius: 16,
  overflow: 'hidden'
}

问题对应解决逻辑 #

• Screen A顶部留白问题：原translateY的高度计算未扣除状态栏高度导致定位偏移，修正高度计算逻辑，同时新增previousCardStyle主动控制下层页面的位置，消除默认边距影响。
• borderRadius报错/不生效问题：原生动画驱动仅支持transform和opacity两类属性的动画，不需要动态变化的圆角直接写在页面根容器样式中即可。如果需要圆角跟随过渡动画变化，在transitionSpec的config中添加useNativeDriver: false关闭原生驱动，就可以直接在cardStyle中配置动态borderRadius。
• Screen B打开后看不到下层Screen A问题：新增cardStyle: { backgroundColor: 'transparent' }关闭卡片默认的白色背景，避免下层页面被不透明的卡片背景遮挡；给overlay添加半透明背景色，同时配置previousCardStyle的缩放和透明度，强化层级显示效果。

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