更改 Navigator.NavigationBar(标题)的默认样式 [英] Changing the default style for a Navigator.NavigationBar (title)

问题描述

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

I've created a navigation bar in my react-native app using the following syntax

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

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

By default the navigation bar has a layout where the LeftButton is aligned to the left side of the bar and the RightButton is aligned to right side of the bar. But the Title is aligned to the left side of it's container flexbox. Which is next to the LeftButton.

我想要实现的目标非常简单，我只希望 Title 位于导航栏的两个按钮之间.

What I'm trying to achieve is very simple I just want the Title centered between the two buttons of the navigation bar.

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

My title is just a < Text> component like so

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

我认为我可以使用以下样式来实现这一点

I thought I could achieve this using the following style

alignSelf: 'center'

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

this almost works but it became apparent that the container flexbox for the Title starts on the righthand edge of the LeftButton and ends at the end of the navigation bar at the edge of the screen, so it's centered between those 2 points. Which isn't the center of the screen/navbar.

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

I just want a central title, can anyone help?

推荐答案

我假设您在 Android 上出现了这个问题.我在将标题放在左侧时遇到了同样的问题.对我有用的是以下内容:

I assume this problem occurred for you on Android. I had the same issue with the title being placed on the left. What worked out for me was the following:

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

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

The StylesIOS makes the navbar resemble the iOS-look, where the title is centered.

这篇关于更改 Navigator.NavigationBar(标题)的默认样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！