React Navigation 5：在 BottomTabNavigator 上实现自定义 header

Question

我正在使用带有 2 个屏幕的 BottomTabNavigator，但我还想对每个屏幕使用我导入的自定义 header。我尝试通过在其中添加 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

上实现自定义 header

Answer 1

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

的组件

您可以自定义 header 底部选项卡导航器。 如果对您有帮助，我可以 post 一个简短的代码