React 导航，如何将屏幕置于顶部

Question

我想实现如下图所示的屏幕。

我有这个过渡：

const MyTransition = {
  transitionSpec: {
    open: {
      animation: 'timing',
      config: {
        duration: 750,
      },
    },
    close: {
      animation: 'timing',
      config: {
        duration: 750,
      },
    },
  },
  cardStyleInterpolator: ({ current, next, layouts }) => {
    return {
      cardStyle: {
        transform: [
          {
            perspective: 750
          },
          {
            translateY: current.progress.interpolate({
              inputRange: [0,  1],
              outputRange: [height -54,  54],
            }),
          },
          {
            scale: current.progress.interpolate({
              inputRange: [0, 1, 2],
              outputRange: [1.2, 1, .9],
            }),
          },
    
        ],
      },
      overlayStyle: {
        opacity: current.progress.interpolate({
          inputRange: [0, 1],
          outputRange: [0, 1],
        }),
      },
    }
  },
}

导航器：

<Stack.Navigator
  screenOptions={{
    headerShown: false,
    cardOverlayEnabled: true,
    gestureEnabled: true,
    ...MyTransition,
  }}
>
  <Stack.Screen name="ScreenA" component={ScreenA} />
  <Stack.Screen name="ScreenB" component={ScreenB} mode='modal'/>
</Stack.Navigator>

Please see the transition animation here with Loom video

（顺便说一句，我可以在问题中嵌入 gif/Loom 视频吗？）

从视频中可以看出，

-Screen A 顶部有多余的空白空间。

-Screen A 和 Screen B 没有 top border radius。

（如果我使用borderRadius，则会收到此错误：Property 'borderRadius' is not supported by native animated module）

-Screen B打开后，看不到Screen B下的Screen A。

我该如何解决以上问题？

编辑： 如果 Loom 视频无法打开，我正在添加图片。

Answer 1

对于 React Navigation 6：

<Stack.Navigator
  screenOptions={{
    presentation: "modal",
    gestureEnabled: true,
  }}
>
  <Stack.Screen name="Home" component={Home} />
  <Stack.Screen name="Profile" component={Profile} />
</Stack.Navigator>

https://reactnavigation.org/docs/stack-navigator#presentation

对于 React Navigation 5：

import { TransitionPresets } from "@react-navigation/stack";

// ...

<Stack.Navigator
  mode="modal"
  screenOptions={({ route, navigation }) => ({
    gestureEnabled: true,
    cardOverlayEnabled: true,
    headerStatusBarHeight:
      navigation.getState().routes.findIndex(r => r.key === route.key) > 0
        ? 0
        : undefined,
    ...TransitionPresets.ModalPresentationIOS
  })}
>
  <Stack.Screen name="Home" component={Home} />
  <Stack.Screen name="Profile" component={Profile} />
</Stack.Navigator>;

https://reactnavigation.org/docs/5.x/stack-navigator#pre-made-configs