如何在React Native中左对齐导航栏标题？

Question

这是我在浏览器中的代码：

<Tab.Screen
    name="Profile"
    component={Profile}
    options={{
      title: username,
      headerStyle: {
        backgroundColor: '#fff',
        headerTitleAlign: 'left',
      },
      headerTintColor: 'black',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    }}
  />

我们希望在iOS上模仿Instagram的标题栏，即将用户名放置在标题栏左上角。

目前我们得到了一个控制台警告信息，指出headertitleAlign被赋予了left的值，但这对headerstyle没有影响。

提前感谢您！

- JamesDeveloper

Answer 1

headerTitleAlign 不是一个有效的样式属性。不能放在 headerStyle 属性中。只需将 headerTitleAlign: 'left' 移到 headerStyle 属性外部即可解决问题。

<Tab.Screen
    name="Profile"
    component={Profile}
    options={{
      title: username,
      headerTitleAlign: 'left', //moved this from headerStyle property
      headerStyle: {
        backgroundColor: '#fff',
      },
      headerTintColor: 'black',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    }}
/>

- nithinpp

---

为什么在iOS上我的headerTitleAlign: 'left'不起作用？ - cblnpa

超奇怪的。文档上说除了 iOS 平台，它默认是居左对齐的。但在安卓上却是居中对齐的。而且在 iOS 上始终都是居中对齐的。哈哈。 - Arjun Nayak

Answer 2

正如 @nithinpp 所提到的，您确实希望在 options 对象的主体中使用 headerTitleAlign: 'left'。请注意，然而，在 iOS 上这个设置不会起作用，就像 文档令人失望地指出 的那样。

如果您希望它在 iOS 上也能工作，您需要提供自己的 headerTitle 组件：

<Tab.Screen
  name="Profile"
  component={Profile}
  options={{
    title: username,
    headerStyle: {
      backgroundColor: '#fff',
    },
    headerTintColor: 'black',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
    headerTitle: props => (
      <View style={{ flex: 1, flexDirection: "row" }}>
        <Text>
          {props.children}
        </Text>
      </View>
    ),
  }}
/>

请注意，在这种情况下，我只是建议您在视图上使用flexDirection: "row"以进行左对齐。您也可以在headerTitle中采取任何您想要的方式来获得所需的效果。

- Philip Su