我们如何将 react-navigation 标题的标题居中？

Question

React-navigation 文档还很年轻，阅读这些问题对我来说不是很有效（每个版本的更改）是否有人有一种工作方法可以在 React Native 中使用 react-navigation 在 Android 中居中标题？

原文由 jsdario 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 发布，翻译遵循 CC BY-SA 4.0 许可协议