React-Navigation v5 - 堆栈导航器之间的透明度

Posted 2023-02-21

【中文标题】React-Navigation v5 - 堆栈导航器之间的透明度

【英文标题】：React-Navigation v5 - transparency between stack navigators

【发布时间】：2020-05-24 22:09:06

【问题描述】：

嘿，我在使用多个 Stack.Navigator 时遇到了透明度问题。

我创建了 2 个 Stack.Navigators -> 一个用于 Screens，一个用于 Popups。 问题是，我的 Popups 具有透明背景，在这种情况下，我需要在背景中显示 Screens。它在 react.navigation v4 中工作，现在在 v5 中我找不到任何解决方案如何解决这个问题。

零食 https://snack.expo.io/@m.jachym/react-navigation-stacks-transparency

navigation structure img

*有两个 Stack.Navigator，因为用于 Popups 的 Stack.Navigator 具有不同且复杂得多的 screenOptions。 此外，在Docs about nesting navigators 中，建议将一个 Stack.Navigator 放入另一个中。在这种情况下，问题是，当您设置父 Stack.Navigator headerMode="screen" 和子 Stack.Navigator headerMode="none" 时，孩子的 headerMode 是继承自父母。其他属性也存在同样的问题 - 这就是为什么我的导航结构是这样的。

我知道我做错了什么，或者那是新版本 react-navigation 的问题，我应该写信给 react-navigation 团队？*

【参考方案1】：

问题是当您在Modals 堆栈中显示屏幕时，您希望在后台拥有您的Screens 堆栈。您已为模态堆栈中的屏幕设置透明背景，但包含 Modals 堆栈的屏幕本身没有透明背景。

您还需要使包含Modals 堆栈的屏幕透明：

<Stack.Screen
  name="Modals"
  component=Modals
  options= cardStyle:  backgroundColor: "transparent"  
/>

children 的 headerMode 是从 parent 继承的。其他属性也存在同样的问题 - 这就是为什么我的导航结构是这样的。

导航器不会继承其父导航器的配置。如果您在谈论导航器配置（道具）和屏幕，导航器的配置不适用于屏幕（例如屏幕没有headerMode）。

您不需要这么多导航器。像这样的单个导航器很好：

const modalOptions = 
  headerShown: false,
  cardStyle:  backgroundColor: "transparent" ,
  cardOverlayEnabled: true,
  cardStyleInterpolator: ( current:  progress  ) => (
    cardStyle: 
      opacity: progress.interpolate(
        inputRange: [0, 0.5, 0.9, 1],
        outputRange: [0, 0.1, 0.3, 0.7]
      )
    ,
    overlayStyle: 
      opacity: progress.interpolate(
        inputRange: [0, 1],
        outputRange: [0, 0.6],
        extrapolate: "clamp"
      )
    
  )
;

const Navigation = () => 
  return (
    <Stack.Navigator headerMode="screen">
      <Stack.Screen name="Home" component=Home />
      <Stack.Screen
        name="NewPopup"
        component=NewPopup
        options=modalOptions
      />
      <Stack.Screen name="Popup" component=Popup options=modalOptions />
    </Stack.Navigator>
  );
;

【讨论】：

哦，我现在明白了。感谢您的帮助，以及 react-navigation 5.x :)