reactjs - 如何在自定义标题组件中呈现材质顶部选项卡导航器

Question

我想渲染createMaterialTopTabNavigator()从react-navigation自定义标题组件内部创建的材质顶部选项卡导航器。事实上，我的标题是一个渐变，所以我需要像这样在标题中添加标签：

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

// 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 上却不行，因为标签栏在标题后面（我不知道为什么）。我可以在世博会（网络版）上重现：世博链接 你有解决方案吗？

Answer 1

最后，我从顶部导航器中删除了标题

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

并创建一个CustomTabHeader带有渐变和标签的自定义标签组件（），我将其用作标题

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

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