在做 React Native 应用的时候，我们常常使用 react-navigation 做导航栏，发现 Android 上的标题不居中，IOS 上没问题。

1 如果只有标题，那就在 headerTitleStyle 设置 alignSelf:'center' 就可以。
2 如果标题栏左侧还有返回按钮，发现标题偏右依然不居中，则简单的处理方式是:
在右边再添加一个等宽高的空 View，如下:

headerRight: <View />

升级新版本之后发现这招不灵了，可以在 headerTitleStyle 里设置 flex:1, textAlign: 'center' 来实现。

 

作者：wwpeng520
链接：https://www.jianshu.com/p/0f55925206f7
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

react-navigation 做导航栏，发现 Android 上的标题不居中的更多相关文章

  1. [RN] React Native 自定义导航栏随滚动渐变

    React Native 自定义导航栏随滚动渐变 实现效果预览: 代码实现: 1.定义导航栏 NavPage.js import React, {Component} from 'react'; im ...

  2. React Native自定义导航栏

    之前我们学习了可触摸组件和页面导航的使用的使用: 从零学React Native之09可触摸组件 - 从零学React Native之03页面导航 - 经过之前的学习, 我们可以完成一个自定义导航栏了 ...

  3. iOS学习——更改导航栏的返回按钮的标题与颜色

    转载自:修改navigationController返回按钮颜色和文字 今天在做项目时遇到这个问题,试了很多方法都失败了.最后终于找到正确的方案了,在这里分享给大家. 引言 在iOS开发过程中,Nav ...

  4. React Native 之导航栏

    一定要参考官网: https://reactnavigation.org/docs/en/getting-started.html 代码来自慕课网:https://www.imooc.com/cour ...

  5. 运用<ul><li>做导航栏

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. React Native 底部导航栏

    首先安装:npm install react-native-tab-navigator   然后再引入文件中    import TabNavigator from 'react-native-tab ...

  7. Android开发技巧——实现在图标文本底部导航栏（更新）

    本文参考了导航栏的代码viewpagerindicator实现. 本文介绍了之前版本号qq或者微信,添加文本,实现图标,导航栏的底部. 2014-09-14 13:59:42更新:library的代码 ...

  8. Android开发技巧——实现底部图标文字的导航栏（已更新）

    本文章的导航栏代码参考了viewpagerindicator的实现.本文叙述的是之前版本的qq或微信中,底部的图标加文字的导航栏的实现. 2014-09-14 13:59:42更新:library的代 ...

  9. 分别用ToolBar和自定义导航栏实现沉浸式状态栏

    一.ToolBar 1.在build.gradle中添加依赖,例如: compile 'com.android.support:appcompat-v7:23.4.0' 2.去掉应用的ActionBa ...

随机推荐

  1. WebViewJavascriptBridge js跟app的交互框架

    https://github.com/marcuswestin/WebViewJavascriptBridge 参考: https://www.cnblogs.com/LiLihongqiang/p/ ...

  2. java内存泄露/溢出等常见问题模拟及原因分析

    Java 8:从持久代到metaspace 系统稳定性--OutOfMemoryError 常见原因及解决方法 java各种异常问题示例(附pdf下载): java.lang.OutOfMemoryE ...

  3. H2数据库介绍

    H2数据库是一个开源的关系型数据库. H2是一个采用java语言编写的嵌入式数据库引擎,只是一个类库(即只有一个 jar 文件),可以直接嵌入到应用项目中,不受平台的限制 应用场景: 可以同应用程序打 ...

  4. MAX10 ADC的一些基知识

    MAX10 ADC 的一些知识 1.        MAX 10 内部集成的12bit SAR ADC的特点为: a.        采样速率高达1Mhz. b.        模拟通道多达18个,单 ...

  5. 运行报错：'_TestResult' object has no attribute 'outputBuffer'

    一.运行main函数,未生成测试报告,报错:'_TestResult' object has no attribute 'outputBuffer' 解决方式: 1.在HTMLTestReportCN ...

  6. Docker部署ELK 7.0.1集群之Elasticsearch安装介绍

    elk介绍这里不再赘述,本系列教程多以实战干货为主,关于elk工作原理介绍,详情查看官方文档. 一.环境规划 主机名 IP 角色 节点名 centos01 10.10.0.10 es node-10 ...

  7. Apache Kafka Consumer 消费者集

    1.目标 在我们的上一篇文章中,我们讨论了Kafka Producer.今天,我们将讨论Kafka Consumer.首先,我们将看到什么是Kafka Consumer和Kafka Consumer的 ...

  8. 如何申请百度地图用户Key

    打开网页http://lbsyun.baidu.com/,进入百度地图开发平台. 单击[登录],登录百度账号.如果您还没有百度账号,单击箭头处[立即注册]注册百度账号. 登录完成后,单击右上角箭头处[ ...

  9. 在window10安装Mysql

    一:下载 1.1下载地址:https://dev.mysql.com/downloads/mysql/ 1.2解压 D:\InstallSoftWare\MYSQL 2环境变量配置    path里添 ...

  10. 小程序发起get请求====post请求