react-navigation: header 选项卡导航上方

Question

我正在尝试让下图中的食谱 header 显示在选项卡导航器上方（下图中的主页和设置）。目前我在堆栈导航器中有选项卡导航器。在堆栈导航器上，我定义了一个标题和 headerTitle 但都没有显示。我怎样才能得到上面的header？谢谢！

这是目前的样子：

我想实现类似的东西：

这是我的堆栈导航代码：

    <NavigationContainer>
      <Tab.Navigator
        shifting={false}
        labeled={false}
        initialRouteName="Home"
        activeColor="#32CA81"
        barStyle={styles.navContainer}
        screenOptions={{
          headerShown: false,
        }}
        tabBarOptions={{
          activeTintColor: '#e91e63',
        }}
      >
        <Tab.Screen
          name="Camera"
          component={Camera}

          options={{
            tabBarLabel: "Camera",
            tabBarIcon: ({ color }) => (
              <MaterialIcons name="camera-alt" color={color} size={26} />
            ),
          }}
        />
        <Tab.Screen
          name="Home"
          component={Home}
          options={{
            title: "Recipes",
            headerTitle: "Recipes",
            tabBarLabel: "Recipes",
            tabBarIcon: ({ color }) => (
              <MaterialIcons name="restaurant-menu" color={color} size={26} />
            ),
          }}
        />
        <Tab.Screen
          name='Saved'
          component={SavedScreen}
          options={{
            shifting: true,
            tabBarLabel: 'Saved',
            tabBarIcon: ({color}) => (
              <MaterialIcons name='favorite' color={color} size={26} />
            ),
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>

这是我的标签导航代码：

return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={Recipes} />
      <Tab.Screen name="Settings" component={Recipes} />
    </Tab.Navigator> 
  );

Answer 1

我最终用选项卡和堆栈导航器包装了组件。我将文本组件和选项卡放在同一个堆栈屏幕上。