React Native 导航头部中的标题如何实现左对齐？

警告原因 #

headerTitleAlign不属于headerStyle的配置属性，它是options下的顶层配置项，你把它放在样式属性里自然不会生效，还会触发控制台警告。

解决方案 #

方案1：修正属性位置（基础适配） #

直接将headerTitleAlign移到options顶层即可实现标题左对齐，适配绝大多数场景：

<Tab.Screen
    name="Profile"
    component={Profile}
    options={{
      title: username,
      headerStyle: {
        backgroundColor: '#fff',
      },
      headerTitleAlign: 'left',
      headerTintColor: 'black',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
      // 若不需要左侧默认的返回按钮/占位留白，可加以下配置清空
      headerLeft: () => null
    }}
  />

React Navigation 6.x及以上版本原生支持iOS端该配置的生效，如果你使用的是5.x及更低版本，添加headerLeft: () => null即可消除左侧默认间距，实现和Instagram一致的左上角对齐效果。

方案2：自定义标题组件（完全复刻样式） #

如果你需要实现Instagram用户名旁的下拉箭头等定制化效果，可以直接自定义headerTitle组件，灵活度更高：

import { Text } from 'react-native';

// ...
<Tab.Screen
    name="Profile"
    component={Profile}
    options={{
      headerStyle: {
        backgroundColor: '#fff',
      },
      headerTintColor: 'black',
      headerTitle: () => (
        <Text style={{fontWeight: 'bold', fontSize: 20, color: 'black'}}>
          {username}
          {/* 这里可以加下拉箭头、点击事件等自定义逻辑 */}
        </Text>
      ),
      headerTitleAlign: 'left',
      headerLeft: () => null
    }}
  />

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