React-Navigation是当前RN开发中很流行的一个库，性能、使用体验等各方面都还不错，然而有一个问题却一直困扰着大家，就是Android端header标题显示不能设置为居中，倔强的作者似乎也没有去修复的意思，认为这是Android的显示规范。各路开发人员也发挥自己的聪明才智，去让标题居中。
常用的方法是：
navigationOptions: {
headerTitleStyle:{
alignSelf:'center',
textAlign: 'center',
flex:1,
}
}
在左右两边都没按钮或其他元素的时候，标题确实是居中了，但是一旦左或者右一边有元素时，这个居中就出问题了。
于是有人又在此基础上改进了一下，
navigationOptions: {
headerTitleStyle:{
alignSelf:'center',
textAlign: 'center',
flex:1,
},
headerRight:React.createElement(View, null, null),
}
因为大部分页面左边已经有返回按钮了，所以只需要在导航栏右边设置一个空的View就能保证两边都有按钮，标也题居中了。然而这样做也有不少麻烦，需要去关注哪些页面没有返回按钮，如果哪个粗心地开发人员忘了去设置左边的元素，标题又歪了。
现在我来说一下我的解决方案。
从前面的解决方案可知，Android端标题居中受两边是否有元素影响，那两边的元素具体是怎么影响标题块的呢？我们首先来看一下React-Navigation的Header.js源码。
// Header.js 253行
_renderTitle(props, options) {
let style = {};
const { transitionPreset } = this.props;
if (Platform.OS === 'android') {
if (!options.hasLeftComponent) {
style.left = 0;
}
if (!options.hasRightComponent) {
style.right = 0;
}
} else if (
Platform.OS === 'ios' &&
!options.hasLeftComponent &&
!options.hasRightComponent
) {
style.left = 0;
style.right = 0;
}
if (options.headerTitleContainerStyle) {
style = [style, options.headerTitleContainerStyle];
}
return this._renderSubView(
{ ...props, style },
'title',
this._renderTitleComponent,
transitionPreset === 'uikit'
? this.props.titleFromLeftInterpolator
: this.props.titleInterpolator
);
}
我们可以看到在系统为Android时style的left和right是根据是否左右两边是否有元素来确定的，也就是说如果你左边有元素右边没有元素，那right就会设置为0，这时title的宽度其实总宽度减去左边元素的宽度，这时如果再title如果再居中就会往右偏。
如下图所示：（红色区域是title的显示区域，箭头为页面的中间位置）
由此可知，当left没设置为0，但right设置为0时，title的显示区域被改变了，那么我们来看看left或right没设置为0前是什么样子的，我们找到了title的样式设置：
// Header.js 636行
title: {
bottom: 0,
top: 0,
left: TITLE_OFFSET,
right: TITLE_OFFSET,
position: 'absolute',
alignItems: 'center',
flexDirection: 'row',
justifyContent: Platform.OS === 'ios' ? 'center' : 'flex-start',
},
可以看出left和right默认设置为了TITLE_OFFSET
// Header.js 24行
const TITLE_OFFSET = Platform.OS === 'ios' ? 70 : 56;
我的解决办法就是让right和left一直保持是TITLE_OFFSET这个值，从_renderTitle函数中我们可以看到
if (options.headerTitleContainerStyle) {
style = [style, options.headerTitleContainerStyle];
}
这个headerTitleContainerStyle配置就很关键了，它能覆盖这里的style，也就是说如果我在headerTitleContainerStyle中设置right和left的值，那它就能覆盖掉之前设置为0的right和left，于是我们把navigator设置代码修改为：
最终设置
const TITLE_OFFSET = Platform.OS === 'ios' ? 70 : 56;
…
…
// 3.0后的版本改为了defaultNavigationOptions
// 3.0以前的版本使用navigationOptions
navigationOptions: {
headerTitleStyle:{
alignSelf:'center',
textAlign: 'center',
flex:1,
},
headerTitleContainerStyle:{
left: TITLE_OFFSET,
right: TITLE_OFFSET,
}
},
不用担心headerRight、headerLeft的设置和影响，只需在createStackNavigator中统一设置一下就解决问题了，个人认为是比较完美的解决办法，希望对被这个问题困扰的朋友有帮助。
感谢@已婚老男孩 指出React-Navigation 3.0版本后navigationOptions改为了defaultNavigationOptions。请大家根据自己的版本来进行设置。
3.0后新增了一个属性 headerLayoutPreset，设置为"center"即可让标题居中，就不用再修改headerTitleContainerStyle，大家可以查看相关API
如有其他疑问，请在下方留言。
