如何在自定义 header 组件中呈现 material 顶部选项卡导航器

Question

我想在自定义 header 组件中呈现 material 使用 createMaterialTopTabNavigator() 从 react-navigation 创建的顶部选项卡导航器。 事实上，我的 header 是一个渐变，所以我需要像这样在 header 中加入制表符：

所以我在标签栏上设置了一个 marginTop 负数以将其放在 header:

// AppNavigator.ts
function MyTabStack() {
  const TabStack = createMaterialTopTabNavigator();

  return (
    <TabStack.Navigator
      initialRouteName="MyTabScreen1"
      lazy={true}
      style={{
        marginTop: -40 - 14,
        zIndex: 1,
      }}
      tabBarOptions={{
        style: {
          backgroundColor: 'transparent',
          height: 50,
        },
      }}>
      <TabStack.Screen
        name="MyTabScreen1"
        component={MyTabScreen1}
        options={{ title: 'Tab 1' }}
      />
      <TabStack.Screen
        name="MyTabScreen2"
        component={MyTabScreen2}
        options={{ title: 'Tab 2' }}
      />
    </TabStack.Navigator>
  );
}

function App() {
  return (
    <SafeAreaProvider>
      <NavigationContainer
        <Stack.Navigator headerMode="screen" initialRouteName="MyScreen">
        <StackFidelity.Screen
           name="MyScreen"
           options={() => ({
             header: ({ options }) => <MyGradientHeader {...options} />,
          })}
          component={MyTabStack}
       />
       </Stack.Navigator>
    </NavigationContainer>
  );
}

它在 Android 上运行良好，但在 iOS 上运行良好，因为标签栏在 header 后面（我不知道为什么）。 我可以在世博会上重新发布（网络版）：Expo link 你有解决方案吗？

Answer 1

最后，我从我的顶级导航器

中删除了header

function App() {
  return (
    <SafeAreaProvider>
      <NavigationContainer
        <Stack.Navigator initialRouteName="MyScreen">
            <StackFidelity.Screen
                name="MyScreen"
                options={{ headerShown: false }}
                component={MyTabStack}
       />
       </Stack.Navigator>
    </NavigationContainer>
  );
}

并创建一个带有渐变和选项卡的自定义选项卡组件 (CustomTabHeader)，我将其用作 header

function MyTabStack() {
    const Tab = createMaterialTopTabNavigator();

  return (
    <Tab.Navigator
      initialRouteName="LittleCardsScene"
      tabBarPosition="top"
      tabBar={(props) => <CustomTabHeader {...props} />}
.....