如何将React Navigation标题居中？

Question

React-navigation文档还很年轻，阅读问题并不能为我提供很多帮助(每个版本都会更改)。有人有使用React Native中的react-navigation居中标题的有效方法吗？

- jsdario

---

可能有一些解决方案，但在我的项目中，我不使用react-navigation的头部和选项卡。对于头部，我使用自定义头部（react-navigation选项卡的性能并不是很好）。 - Manjeet Singh

有一个 titleStyle 属性可用于样式设置。你试过了吗？ 这是链接。请查看 StackNavigator.md。 - Himanshu Soni

我尝试为所有屏幕设置默认属性，但没有成功 :/ - jsdario

Answer 1

警告：react-navigation 经常变化，对齐标题的方式已经从我第一次回答它时改变了2-3次。如果我的回答对你无效，请查看其他答案。

修改于2021/08/31：

在2020年，headerLayoutPreset 也被弃用了。新的方式是通过 defaultNavigationOptions：（@ThatFrenchComputerGuy 的答案帮了我）

const AppNavigator = createStackNavigator({
    Home: { screen: HomeScreen },
 }, 
 {
  defaultNavigationOptions: {
      title: 'Aligned Center',
      headerTitleAlign: 'center'
  }
});

修改于2019/03/12:

在2018年，react-navigation v2版本发布后（2018年4月7日），由于某些原因，alignSelf不再起作用。下面是新的工作方式，使用headerLayoutPreset，来自@HasanSH:

const HomeActivity_StackNavigator = createStackNavigator({
    Home: {screen: Main},
}, {headerLayoutPreset: 'center'});

2017/07/11的原始回答：

使用 headerTitleStyle：

static navigationOptions = {
    headerTitleStyle: { alignSelf: 'center' },
    title: 'Center Title',
}

- Val

---

不适用于我！我添加了 "textAlign: "center"，flex:1" 来完成任务。 - mehdi jalilvand

在iOS上它运行得很好，但在Android上却不行。添加代码后，它可以在两个平台上运行。谢谢。 - Matias Seguel

对我来说也不起作用。我添加了headerRight: <View style={{ padding: 6 }} />，现在它对我有用了。 - Andrey Patseiko

headerLayoutPreset已被弃用并更名为headerTitleAlign，并移至navigationOptions中。若要获得相同的行为，应在defaultNavigationOptions中声明它。 - C-lio Garcia

2021年，您更新的答案真的很有效，非常感谢！ - fnaquira

感谢您的更新。headerTitleAlign 是我需要解决 Android 对齐问题的关键。iOS 似乎默认居中。 - Dwigt

Answer 2

截至2021年，您可以使用headerTitleAlign。

虽然headerLayoutPreset技术上可以工作，但它应该显示一个信息，说明它对Expo用户已过时。实现方式如下：

const AppNavigator = createStackNavigator({
    Home: HomeScreen,
 }, 
 {
  defaultNavigationOptions: {
      title: 'Centered',
      headerTitleAlign: 'center'
  }
})

React-Navigation v5.x 更新: 根据 @Ewan 的更正，如果你正在使用 React-Navigation v5.x，你无法将参数传递给 createStackNavigator()。因此，你应该按照以下方式实现：

<Stack.Navigator screenOptions={{headerTitleAlign: 'center'}}>

- ThatFrenchComputerGuy

Answer 3

为使标题居中，我们需要通过添加flex属性创建一个flex header。

navigationOptions: {
    title: "Title center",
    headerTitleStyle: { 
        textAlign:"center", 
        flex:1 
    },
}

- Cong Nguyen

---

虽然这段代码可能回答了问题，但是提供关于为什么和/或如何回答问题的额外上下文可以提高其长期价值。 - Vishal Chhodwani

headerTitleStyle: { alignSelf: 'center' , textAlign:"center",flex:1 }, 对我有用！ - mehdi jalilvand

Answer 4

对于在2020年进行搜索的任何人，这对我有效：

<Stack.Navigator screenOptions={{headerTitleAlign: 'center'}}>

https://reactnavigation.org/docs/stack-navigator/#headertitlealign

- Ewan

---

我不得不添加headerTitleStyle: {textAlign: 'center'}。 - Jordan Daniels

适用于 react-navigation v5。 - Eyong Kevin Enowanyo

react-navigation版本大于等于v5的正确（且可行）答案是（请参见：https://reactnavigation.org/docs/stack-navigator/#headertitlealign）： - suther

谢谢。它正在运行。 - Orhan Abar

这应该是首选答案，因为它似乎是此标准API。请点赞。 - Artemis Prime

Answer 5

如果左侧没有后退按钮，那么接受的答案只对我有效。在这种情况下，您需要将一个空视图设置到右侧才能正确居中它。

static navigationOptions = {
    headerTitleStyle: { alignSelf: 'center' },
    title: 'Center Title',
    headerRight: (<View />)
}

- Rawa

---

这是我最常做的事情，但我发现这只是一个权宜之计，不应该被视为正确的答案。无论如何，我已经点赞了，因为它很方便。 - jsdario

我完全同意这是一个解决方法，但我希望它不是。但我认为目前还没有适当的解决方案。希望很快就能修复。 - Rawa

我还在headerTitleStyle中添加了flex: 1, textAlign: 'center',以及headerLeft: (<View/>),并且已经生效。 - Nagibaba

如果我两边都有按钮，这对我很有效。 {headerTitleStyle: { alignSelf: 'center' }, title: '居中标题', headerLeft: (<Icon ... />), headerRight: (<View />) } - Harry Moreno

Answer 6

最好的方法是按照文档中列出的内容进行实现： 在StackNavigatorConfig内分配一个可选属性，如下所示：

createStackNavigator({
   { ... // your screens},
   { ...,
     headerLayoutPreset: 'center' // default is 'left'
   })

headerLayoutPreset - 指定如何布置标题组件。

这样做，您就不必完全搞乱样式。并且它将应用于该堆栈中所有嵌套屏幕。

查看源

- Hasan Sh

---

它可以处理所有带/不带后退箭头的情况，并且能够正常工作。 - Sergey

这是最合适的答案 :) - ziishaned

但仅适用于react-native < v5，否则请使用Ewan的答案：https://dev59.com/31cQ5IYBdhLWcg3wFf8-#60779193 - suther

Answer 7

在defaultNavigationOptions中插入和设置headerTitleAlign的值。以下是示例：

const MainStack = createStackNavigator(
    {
        ...

        defaultNavigationOptions: {
            headerTitleAlign: 'center',
        }
    }
)

- AndriyFM

---

react-navigation已经更新，目前这是正确的做法。 https://reactnavigation.org/docs/en/stack-navigator.html - adhdj

太好了！！... 这应该是被选中的答案。 - METALHEAD

Answer 8

对于React Navigation V6，以下代码在我的测试中可以正常工作:

<Stack.Navigator screenOptions={{ headerTitleAlign: "center" }}>
// Put all of your screens here <Stack.Screen ... />
</Stack.Navigator>

- SaumyadipDev

Answer 9

这对我有帮助：）

static navigationOptions = {
title: "SAMPLE",
headerTitleStyle: { flex: 1, textAlign: 'center'},

};

- Pavitha

Answer 10

我遇到了同样的问题，但解决方案非常简单。 我只需添加一行代码：headerTitleAlign：'center'，

function HomeNavigator() {
  return (
    <TabOneStack.Navigator>
      <TabOneStack.Screen
        name="HomeScreen"
        component={TabOneScreen}
        options={{
          headerRightContainerStyle: {
            marginRight: 20,
          },
          headerTitleAlign: 'center',     <-------- here
          headerTitle: () => (
            <Ionicons
              name={'logo-twitter'}
              color={Colors.light.tint}
              size={30}
            />
          ),
        }}
      />
    </TabOneStack.Navigator>
  )
}

- kayongo Johnson Brian