更改 Navigator.NavigationBar（标题）的默认样式答案

【问题标题】：Changing the default style for a Navigator.NavigationBar (title)更改 Navigator.NavigationBar（标题）的默认样式
【发布时间】：2016-03-08 12:53:37
【问题描述】：

我使用以下语法在我的 react-native 应用程序中创建了一个导航栏

<Navigator
  renderScene={this.renderScene.bind(this)}
  navigator={this.props.navigator}
  navigationBar={
    <Navigator.NavigationBar 
      style={styles.navbar}  
      routeMapper={NavigationBarRouteMapper} />
      } />

默认情况下，导航栏的布局是 LeftButton 与栏的左侧对齐，RightButton 与栏的右侧对齐。但是 Title 与它的容器 flexbox 的左侧对齐。 LeftButton 旁边。

我想要实现的非常简单，我只希望标题在导航栏的两个按钮之间居中。

我的标题只是一个像这样的组件

<Text style={styles.navbarTitleText}>
 Welcome
</Text>

我认为我可以使用以下样式实现此目的

alignSelf: 'center'

这几乎可行，但很明显 Title 的容器 flexbox 开始于 LeftButton 的右侧边缘并结束于导航栏的末尾屏幕的边缘，所以它在这两个点之间居中。这不是屏幕/导航栏的中心。

我只是想要一个中心标题，有人可以帮忙吗？

【问题讨论】：

标签： android reactjs react-native

【解决方案1】：

我假设您在 Android 上遇到了这个问题。我有同样的问题，标题放在左边。对我来说，结果如下：

<NavigationBar
        routeMapper={NavigationBarRouteMapper}
        style = {styles.navigationBar}
        navigationStyles={Navigator.NavigationBar.StylesIOS}
/>

StylesIOS 使导航栏类似于 iOS 外观，其中标题居中。

【讨论】：

没问题！显然，Android 中的导航栏标题有一个内置边距，这就是通常的对齐不起作用的原因。
嗨，你能告诉我在哪里可以添加此代码以在中心获取导航栏标题。

【解决方案2】：

只是补充一下。 pinewood 的答案将为您提供 android 上的 iOS 样式，尽管它并不完全相同，但您仍然需要进行调整。但是，您可以保留 android 样式并仍然将您的标题居中。

Android 上的 NavigationBar 有一个 leftMargin（在撰写本文时为 72px）应用于标题区域，这就是为什么当您将标题居中时它看起来有点偏离中心。因此，为了使您的标题居中，只需应用与现有 leftMargin 相等的 rightMargin。您可以在Navigator.NavigationBar.Styles.Stages.Left.Title.marginLeft 中找到边距的值。因此，您的代码将如下所示：

import { Navigator } from 'react-native'

let headerTitleLeftMargin = Navigator.NavigationBar.Styles.Stages.Left.Title.marginLeft || 0

那么你的风格：

alignSelf: 'center'
marginRight: headerTitleLeftMargin

【讨论】：

位置似乎已更改，可能无法再导入。我在react-navigation/src/view/Header.js找到了一些样式设置。

【解决方案3】：

你可以做的是这样的：

<Text style={styles.navbarTitleText}>
 Welcome
</Text>

navBarTitleText 风格：

position: 'absolute',
left: 0,
right: 0,
backgroundColor: 'transparent',
textAlign: 'center'

【讨论】：

不走运，这只会产生与alignSelf: 'center'相同的结果