React Native的导航栏标题居中设置

在React Native中，要使导航栏标题居中，可以使用react-navigation库中的headerTitleAlign属性。以下是如何使用它的示例：

首先，确保已安装@react-navigation/native和相应的依赖项。然后，按照以下步骤操作：

1. 导入所需的库和组件：

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

2. 创建堆栈导航器：

const Stack = createStackNavigator();

3. 定义一个包含标题的堆栈导航器组件：

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{
            headerTitleAlign: 'center', // 设置标题居中
            headerStyle: {
              backgroundColor: '#f4511e',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
              fontWeight: 'bold',
            },
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

在上面的示例中，我们为Home堆栈导航器设置了headerTitleAlign: 'center'，使标题居中。同时，我们还自定义了标题的背景颜色、文字颜色和字体粗细。