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

【问题标题】：How to render material top tab navigator inside a custom header component如何在自定义标题组件中呈现材质顶部选项卡导航器
【发布时间】：2022-01-11 13:54:29
【问题描述】：

我想在自定义标题组件中呈现使用 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 上却不行，因为标签栏在标题后面（我不知道为什么）。我可以在 expo 上重现（网络版）：Expo link 你有解决办法吗？

【问题讨论】：

标签： reactjs react-native react-navigation react-navigation-v5 react-navigation-top-tabs

【解决方案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} />}
.....

【讨论】：