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

Question

嘿，当使用多个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，因为弹出窗口的Stack.Navigator具有不同且复杂得多的screenOptions。另外，在Docs about nesting navigators中，建议将一个Stack.Navigator放入另一个。在这种情况下，问题在于，当您设置父Stack.Navigator headerMode =“ screen”和子代Stack.Navigator headerMode =“ none”时，子代的headerMode将从父代继承。其他属性也存在相同的问题-这就是为什么导航结构保持原样。

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

Answer 1

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

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

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

childrens headerMode继承自parent。其他属性也存在相同的问题-这就是为什么导航结构保持原样。

导航器不会继承其父导航器的配置。如果您在谈论导航器配置（属性）和屏幕，则导航器的配置并非特定于屏幕。

您不需要那么多导航器。这样的单个导航器就可以了：

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>
  );
};