解决React-Navigation在Android上标题不居中

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的显示区域，箭头为页面的中间位置）

image.png

由此可知，当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

如有其他疑问，请在下方留言。