React Navigation 5：在 BottomTabNavigator 上实现自定义标题答案

【问题标题】：React Navigation 5 : Implementing a custom header on a BottomTabNavigatorReact Navigation 5：在 BottomTabNavigator 上实现自定义标题
【发布时间】：2020-09-13 13:17:27
【问题描述】：

我正在使用带有 2 个屏幕的 BottomTabNavigator，但我还想对每个屏幕使用我导入的自定义标题。我尝试通过在其中添加setOptions 来为Tab.Navigator 设置一个选项：

const Tab = createBottomTabNavigator();

export default function App() {
    return(
      <NavigationContainer >
        <Tab.Navigator setOptions={{  
               headerTitle: <Header />
               //</Header> was imported
        }}>
              <Tab.Screen
                name="HomeScreen" 
                component={HomeScreen}
                options={{
                  tabBarLabel: 'Home',
                  tabBarIcon: ({ color, size }) => (
                    <AntDesign name="home" color={Colors.amarelo} size={30} />
                  )
                }}
              />

              <Tab.Screen
                name="GroupScreen" 
                component={GroupScreen}
                options={{
                  tabBarLabel: 'Home',
                  tabBarIcon: ({ color, size }) => (
                    <AntDesign name="car" color={Colors.amarelo} size={30} />
                  )
                }}
              />
          </Tab.Navigator>
      </NavigationContainer>
      )
}

但是，我的尝试没有成功。我阅读了React-Navigation 5 的文档，但我还没有找到如何在BottomTabNavigator 上实现自定义标头

【问题讨论】：

标签： react-native navigation header react-navigation react-navigation-bottom-tab

【解决方案1】：

底部选项卡导航器没有标题。为此，您必须在底部选项卡导航器的每个选项卡内使用堆栈导航器。因此，您需要创建一个具有“HomeScreen”作为屏幕的堆栈导航器，对于 GroupScreen 也是如此。然后，在底部的选项卡导航器中，使用堆栈导航器作为 tab.screen 的组件。

您可以自定义底部标签导航器的标题。如果对您有帮助，我可以发布一个简短的代码

【讨论】：