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

Question

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

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

小吃 https://snack.expo.io/@m.jachym/react-navigation-stacks-transparency

navigation structure img

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

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

Answer 1

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

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

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

the childrens headerMode is inherited from parent. The same problem is with other properties - that's why the structure of my navigation is as it is.

导航器不继承其父导航器的配置。如果您正在谈论导航器配置( Prop )和屏幕，导航器的配置不适用于屏幕(例如，屏幕没有 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>
  );
};