React Native导航栏标题未居中，如何解决？

针对你遇到的导航栏标题未居中问题，可以通过以下几种方式解决：

方法一：全局统一设置所有页面标题居中 #

修改导航器代码，在Stack.Navigator的screenOptions中添加headerTitleAlign: 'center'，所有栈内页面的标题都会自动居中：

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from '../screens/HomeScreen'

const Stack = createNativeStackNavigator();

const MyStack = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerTitleAlign: 'center' // 全局设置标题居中
        }}
      >
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{ title: 'Home' }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default MyStack;

方法二：单独设置单个页面标题居中 #

如果只需要指定页面的标题居中，直接在对应Stack.Screen的options里添加配置：

<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={{ 
    title: 'Home',
    headerTitleAlign: 'center' // 仅当前页面标题居中
  }}
/>

方法三：自定义标题组件实现居中 #

若需要更复杂的标题样式，可以自定义组件并通过样式强制居中：

<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={{
    headerTitle: () => (
      <Text style={{ 
        textAlign: 'center',
        flex: 1,
        fontSize: 18,
        fontWeight: 'bold'
      }}>Home</Text>
    )
  }}
/>

说明 #

headerTitleAlign是@react-navigation/native-stack提供的官方配置项，设置为'center'可以统一iOS和Android平台的标题对齐逻辑（默认Android左对齐、iOS居中）。

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