时间戳

首页 > 解决方案 > React Navigation 5：在 BottomTabNavigator 上实现自定义标题

react-native - React Navigation 5：在 BottomTabNavigator 上实现自定义标题

问题描述

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

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-nativenavigationheaderreact-navigationreact-navigation-bottom-tab

解决方案

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

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

推荐阅读