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

Question

我想在 Header 组件位于 TopTabNavigator 上方的位置执行此操作：示例

如果我没有两种类型的导航器（Stack 和 Tab），我可以这样做：（使用<NavigaionContainer>Header 并将其放入其中，但这不是我的情况）

//Just an Example

const 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() {&nbsp; return (&nbsp; &nbsp; <NavigationContainer>&nbsp; &nbsp; &nbsp; <Stack.Navigator&nbsp; &nbsp; &nbsp; &nbsp; initialRouteName="home"&nbsp; &nbsp; &nbsp; &nbsp; screenOptions={({route}) => ({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; headerShown: route.name === 'MainContent',&nbsp; &nbsp; &nbsp; &nbsp; })}>&nbsp; &nbsp; &nbsp; &nbsp; <Stack.Screen name="Login" component={Login} />&nbsp; &nbsp; &nbsp; &nbsp; <Stack.Screen name="Register" component={Register} />&nbsp; &nbsp; &nbsp; &nbsp; <Stack.Screen&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="MainContent"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; component={MyTabs}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; options={{header: () => <Header />}}&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; </Stack.Navigator>&nbsp; &nbsp; </NavigationContainer>&nbsp; );}