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

Posted 2023-02-19

【中文标题】React 导航，如何将屏幕置于顶部

【英文标题】：React Navigation, How To Place Screens Top On Each Other

【发布时间】：2021-10-24 14:34:54

【问题描述】：

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

我有这个过渡：

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 视频无法打开，我正在添加图片。

【参考方案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

【讨论】：

谢谢，它确实有效，但我在堆栈中有 3 个屏幕，我只想将 TransitionPresets 应用于一个屏幕。这可能吗？

您可以在您想要的 v6 屏幕的options 中指定它。但是如果你使用 v5，你需要为这样的模态创建一个单独的模态堆栈。

标题有不必要的填充。 headerStatusBarHeight 也不起作用。我收到navigation.getState is not a function 错误。你知道我该如何解决这个问题吗？

你确定你不是旧版本吗？

最新是5.9.8