Question

我使用以下语法

在我的react-native应用程序中创建了一个导航栏

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

默认情况下，导航栏的布局中 LeftButton 与条形图的左侧对齐，而 RightButton 与条形图的右侧对齐。但标题与其容器flexbox的左侧对齐。它位于 LeftButton 的旁边。

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

我的头衔只是一个＆lt;文本和GT;像这样的组件

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

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

alignSelf: 'center'

这几乎可以工作，但很明显，标题的容器弹性框在 LeftButton 的右边缘开始，并在导航栏的末尾结束屏幕的边缘，所以它在这两个点之间居中。这不是屏幕/导航栏的中心。

我只想要一个中心标题，任何人都可以帮忙吗？

Answer 1

我认为Android上出现此问题。我有同样的问题，标题放在左边。对我来说有用的是：

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

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

Answer 2

只是添加到此。松木的答案会在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

Answer 3

你可以做的是这样的事情：

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

并以navBarTitleText样式：

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

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

3 个答案: