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

IT技术 android reactjs react-native
2021-05-24 18:41:20

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

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

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

alignSelf: 'center'

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

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

3个回答

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

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

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

只是为了补充这一点。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

你可以做的是这样的： 

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

和navBarTitleText风格：

position: 'absolute',
left: 0,
right: 0,
backgroundColor: 'transparent',
textAlign: 'center'
其它你可能感兴趣的问题
上一篇我可以将 NextJS 放在 localhost/next 之类的子文件夹中吗？ 下一篇在react查询中处理未经授权的请求