基于TypeScript的EXPO Tab项目中headerTitleAlign:'left'设置不生效怎么办

问题原因 #

iOS 平台下 React Navigation 导航栏默认标题居中，即使配置 headerTitleAlign: 'left'，也会因为导航栏左侧默认预留的返回按钮边距未被覆盖，导致左对齐不生效。

解决方法 #

在原有配置基础上调整标题容器、左侧容器的边距即可，修改后代码如下：

<Stack.Navigator
  screenOptions={{
    headerStyle: {
      backgroundColor: Colors.light.tint
    },
    headerTintColor: Colors.light.background,
    headerTitleAlign: "left",
    headerTitleStyle: {
      fontWeight: "bold"
    },
    // 新增以下配置调整边距
    headerLeftContainerStyle: {
      paddingLeft: 0,
      marginLeft: 0
    },
    headerTitleContainerStyle: {
      paddingLeft: 0,
      marginLeft: 16 // 可根据需要调整左侧间距数值
    }
  }}
>
  <Stack.Screen
    name="Root"
    component={BottomTabNavigator}
    options={{
      headerTitleAlign: "left",
      title: "RumoR",
      // 如果当前页面不需要左侧返回按钮，可加以下配置
      headerLeft: () => null
    }}
  />
  <Stack.Screen
    name="NotFound"
    component={NotFoundScreen}
    options={{ title: "Oops!" }}
  />
</Stack.Navigator>

备选方案（自定义标题） #

如果要完全控制标题的样式和位置，可以直接自定义标题组件：

options={{
  headerTitle: () => <Text style={{
    fontWeight: 'bold',
    color: Colors.light.background,
    fontSize: 18,
    marginLeft: 16
  }}>RumoR</Text>
}}

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