React Native headerTitleStyle 不会居中

Question

我在 react-native 中的 stackNavigator 中遇到了一个小问题。 标题默认样式似乎设置为 alignSelf: start，但是，我无法在我的应用程序中将其更改为居中。[！[标题未居中][1]][1]

https://i.stack.imgur.com/1Ih7Q.png

这是我的路线部分的代码：

import * as React from 'react';

import {createStackNavigator} from '@react-navigation/stack';
import {NavigationContainer} from '@react-navigation/native';
import Main from './pages/Main';
import User from './pages/User';

const Stack = createStackNavigator();

export default function Routes() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="Home"
        screenOptions={{
          headerStyle: {backgroundColor: '#7159c1'},
          headerTintColor: '#fff',
          headerTitleStyle: {
            alignSelf: 'center',
            alignItems: 'center',
            color: '#fff',
          },
        }}>
        <Stack.Screen name="Home" component={Main} />
        <Stack.Screen
          name="User"
          component={User}
          options={({route}) => ({title: route.params.user.name})}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Answer 1

我不知道为什么你所做的不起作用，但尝试将headerTitleAlign: 'center' 属性添加到screenOptions（而不是headerTitleOptions 内screenOptions）