React Native (Android) - Stacknavigator 高于其他视图

Question

我刚开始 React Native 开发。

我已经花了很多时间在某件事上，但我仍然被封锁。

我有一个 "header" 视图，在该视图下，有一个 Stack 导航器和一个选项卡导航器。

当我打开堆栈导航器（使用登录按钮）时，我想将新视图放在 "header" 上方，而不隐藏他以避免在新视图出现时出现丑陋的效果。 这是一个示例，当我在 stacknavigator 上放置一个负边距顶部时，它位于 header 后面

有没有其他方法可以正确地做到这一点？ 谢谢

有关信息，我从 React Native 样板 "Pepperoni App Kit" 开始，在 AppNavigator 之前添加了我的自定义 header，并在选项卡导航器上隐藏了 header。

Answer 1

而不是 header 在 View 下，您应该使用 headerMode:'screen' 选项和 StackNavigator。您可以使用导航选项控制每个子导航器下 header 的可见性。

这是示例片段

export const Root = StackNavigator(
  {
    Tabs: {
      screen: HOViewPager,
      navigationOptions: {
        title: "Title",
        header: <Header />,
      },
    },
    login: {
      screen: Login,
      navigationOptions: {
        headerMode: "none",
        header: null,
      },
    },
    imageoverlay: {
      screen: HOImageOverlay,
      navigationOptions: {
        headerMode: "none",
        header: null,
      },
    },
  },
  {
    mode: "modal",
    headerMode: "screen",
  }
);