带标题的嵌套选项卡导航器

Question

我正在努力实现与下图类似的东西。

基本上，我希望有一个嵌套的标签导航器并将其放在自定义标题下。主选项卡导航器位于底部。嵌套选项卡导航器位于顶部，带有“Recent，Tab2，Tab3”。我已经设置到这里，但是我无法让嵌套导航器将其置于自定义标题下。有什么方法可以做到这一点吗？任何帮助将不胜感激。

以下是导航员的代码：

const TopNav = TabNavigator(
  {
    Recent: { screen: Recent },
    Tab2: { screen: Tab2 },
    Tab3: { screen: Tab3 },
  },
  {
    tabBarOptions: {
      activeTintColor: "#f67425",
      activeBackgroundColor: "#ffffff",
      inactiveTintColor: "#4a4a4a",
      inactiveBackgroundColor: "#ffffff",
      // showLabel: false,
    },
    tabBarComponent: TabBarBottom,
    initialRouteName: "Messages",
    tabBarPosition: "top",
    swipeEnabled: false,
    animationEnabled: false,
  }
);

const BottomNav = TabNavigator(
  {
    Search: { screen: Search },
    Messages: { screen: TopNav },
    Contacts: { screen: Contacts },
    More: { screen: More },
  },
  {
    tabBarOptions: {
      activeTintColor: "#f67425",
      activeBackgroundColor: "#ffffff",
      inactiveTintColor: "#4a4a4a",
      inactiveBackgroundColor: "#ffffff",
      // showLabel: false,
    },
    tabBarComponent: TabBarBottom,
    initialRouteName: "Messages",
    tabBarPosition: "bottom",
    swipeEnabled: false,
  }
);