如何将页眉组件放在 TopTabNavigator 上方？

Question

我想在 Header 组件位于 TopTabNavigator 上方的位置执行此操作：示例如果我没有两种类型的导航器（Stack 和 Tab），我可以这样做：（使用<NavigaionContainer>Header 并将其放入其中，但这不是我的情况）//Just an Exampleconst Tab = createMaterialTopTabNavigator();function MyTabs() {    return (      <NavigationContainer>        <Header /> <-- Put the header here        <Tab.Navigator>          <Tab.Screen name="Home" component={HomePage} />          <Tab.Screen name="Friends" component={FriendsPage} />          <Tab.Screen name="Store" component={StorePage} />          <Tab.Screen name="Notifications" component={NotificationsPage} />        </Tab.Navigator>      </NavigationContainer>    );  }这是我的代码：import Header from './src/components/Header';const Tab = createMaterialTopTabNavigator();function MyTabs() {    return (      <Tab.Navigator>        <Tab.Screen name="Home" component={HomePage} />        <Tab.Screen name="Friends" component={FriendsPage} />        <Tab.Screen name="Store" component={StorePage} />        <Tab.Screen name="Notifications" component={NotificationsPage} />      </Tab.Navigator>    </NavigationContainer>  );}const Stack = createStackNavigator();function App() {  return (    <NavigationContainer>      <Stack.Navigator   initialRouteName="home" screenOptions={{        headerShown: false      }} >        <Stack.Screen name="Login" component={Login} />        <Stack.Screen name="Register" component={Register} />        <Stack.Screen name="MainContent" component={MyTabs} />      </Stack.Navigator>    </NavigationContainer>  );}

Answer 1

您可以在堆栈导航器中设置header屏幕options的 propMainContent以呈现该屏幕的自定义标题。

假设您只想显示顶部选项卡的自定义标题，而导航器中的其他屏幕根本没有标题，您可以执行以下操作：

function App() {

  return (

    <NavigationContainer>

      <Stack.Navigator

        initialRouteName="home"

        screenOptions={({route}) => ({

          headerShown: route.name === 'MainContent',

        })}>

        <Stack.Screen name="Login" component={Login} />

        <Stack.Screen name="Register" component={Register} />

        <Stack.Screen

          name="MainContent"

          component={MyTabs}

          options={{header: () => <Header />}}

        />

      </Stack.Navigator>

    </NavigationContainer>

  );

}