小编典典

更改Navigator.NavigationBar的默认样式(标题)

reactjs

我使用以下语法在我的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'

这几乎工作,但很明显的是,容器为Flexbox的在 标题 上的右手边缘开始 LeftButton
在屏幕的边缘上的导航条的端部和端部,所以它的那些2个点之间的中心。这不是屏幕/导航栏的中心。

我只想要一个中央标题,有人可以帮忙吗?


阅读 895

收藏
2020-07-22

共1个答案

小编典典

我认为这个问题是在Android上为您发生的。我也有同样的问题,标题放在左边。对我有用的是:

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

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

2020-07-22