如何在导航容器中将 header 的文本居中？

Question

I am trying to center the text for a header, but can't seem to implement it. I am following a tutorial on this and even though I'm following it step-by-step the text is not aligning in the center. I want it to center as I will be using a backHeaderTitle using the useLayoutEffect to return to the previous screen. I would appreciate any help as I have been stuck for a few days on this.

\\

import "react-native-gesture-handler";
import React from "react"; 
import { StyleSheet, Text, View } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/
stack";
import LoginScreen from "./screens/LoginScreen";

const Stack = createStackNavigator();
const globalScreenOptions = {
  headerStyle: {backgroundColor: "#2C6BED"},
  headerTitleStyle: {color: "white"},
  headerTintColor: "white",
}
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={globalScreenOptions}>
        <Stack.Screen  
        name="Login" 
        component={LoginScreen}
        
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

\\

Answer 1

Try adding this to your globalScreenOptions

    headerTitleAlign: 'center'