react native 使用react-navigation (嵌套路由)标题栏居中

解决方法:
去 node_modules/react-navigation/src/views/Header/Header.js中的 title 属性一栏里

_renderTitle(props, options) {
    const { layoutPreset, transitionPreset } = this.props;
    let style = [
      { justifyContent: layoutPreset === 'center' ? 'center' : 'flex-start' },
      getTitleOffsets(
        layoutPreset,
        false,
        options.hasLeftComponent,
        options.hasRightComponent
      ),
      options.headerTitleContainerStyle,
    ];

  return this._renderSubView(
      { ...props, style },
      'title',
      this._renderTitleComponent,
      transitionPreset === 'uikit'
        ? this.props.titleFromLeftInterpolator
        : this.props.titleInterpolator
    );
  }

修改为:

  _renderTitle(props, options) {
    const { layoutPreset, transitionPreset } = this.props;
   // 主要把 flex-start 改成  center
    let style = [
      { justifyContent: layoutPreset === 'center' ? 'center' : 'center' },
      getTitleOffsets(
        layoutPreset,
        false,
        options.hasLeftComponent,
        options.hasRightComponent
      ),
      options.headerTitleContainerStyle,
    ];

    return this._renderSubView(
      { ...props, style },
      'title',
      this._renderTitleComponent,
      transitionPreset === 'uikit'
        ? this.props.titleFromLeftInterpolator
        : this.props.titleInterpolator
    );
  }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容