如何为反应导航制作静态标题

Question

当我在屏幕选项中使用标题时，它会为每个屏幕创建相同的标题，但我只想要一个标题。

import React from 'react';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {Home, Account, Cart} from '../screens';
import Header from '../components/Header';

const Router = () => {
  const Stack = createNativeStackNavigator<NavigationParams>();
  return (
    <Stack.Navigator
      screenOptions={{
        header(props) {
          return <Header props={props} />;
        },
        animation: 'slide_from_right',
      }}
      initialRouteName="Home">
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Account" component={Account} />
      <Stack.Screen name="Cart" component={Cart} />
    </Stack.Navigator>
  );
};

export default Router;

Answer 1

您需要显示堆栈标题而不是显示屏幕标题。 所以在

screenOptions

里面你需要设置

headerShown: false

注意：这适用于 react-navigation 5.x 及更高版本。如果您使用的是旧版本，则需要使用：

    navigationOptions: {
        headerVisible: false,
    }