Android平台Native Stack Navigator标题居中设置方法

我在使用Native Stack Navigator时遇到标题显示问题：期望标题在屏幕居中展示，但实际显示在左侧。

问题截图：

相关代码：

import {createNativeStackNavigator} from '@react-navigation/native-stack'

import HomeScreen from '../screens/HomeScreen';
import RestaurantDetailsScreen from '../screens/RestaurantDetails'
import DishDetaileScreen from '../screens/DishDetailsScreen';
import Busket from '../screens/Busket';
import OrderScreen from '../screens/OrderScreen';
import OrderDetails from '../screens/OrderDetails';

const Stack = createNativeStackNavigator();

const RootNavigator = () => {
    return(
        <Stack.Navigator initialRouteName="Restaurant">
            <Stack.Screen name="Home" component={HomeScreen}/>
            {/* <Stack.Screen 
            name="Restaurant" 
            component={RestaurantDetailsScreen}
            options={{headerShown: false}}/>
            */}
        </Stack.Navigator>
    )
}


export default RootNavigator

解决方案 #

要让Native Stack Navigator的标题居中，有两种实用方法：

1. 全局统一设置（所有页面生效）
   在Stack.Navigator的screenOptions中添加headerTitleAlign: 'center'配置，所有栈内页面的标题会自动居中：

const RootNavigator = () => {
    return(
        <Stack.Navigator 
            initialRouteName="Restaurant"
            screenOptions={{ headerTitleAlign: 'center' }}
        >
            <Stack.Screen name="Home" component={HomeScreen}/>
            {/* 其他页面配置 */}
        </Stack.Navigator>
    )
}

2. 单个页面独立设置
   如果仅需指定某一个页面标题居中，在对应Stack.Screen的options中配置即可：

<Stack.Screen 
    name="Home" 
    component={HomeScreen}
    options={{ headerTitleAlign: 'center' }}
/>

如果项目中使用了自定义头部组件，需要在自定义组件内手动处理标题布局，比如用alignItems: 'center'的容器包裹标题文本。

内容的提问来源于stack exchange，提问作者Akthar Farvees