在做 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. node版本切换工具n的使用介绍

    全局安装 npm install -g n mac的安装目录/usr/local/n/versions/node/13.2.0 因此首先在/usr/local/创建目录n,修改权限为普通访问权限,这样 ...

  2. OpenGL入门学习--超级好的资料

    近几天,由于工作项目需要利用openGL显示STL格式的三维模型,分享下面的BOOK,这个老外写得真是TMD太好了,资料免费! http://www.glprogramming.com/red/ind ...

  3. [转帖]WannaCry惊天大发现！疑似朝鲜黑客组织Lazarus所为

    WannaCry惊天大发现!疑似朝鲜黑客组织Lazarus所为 Threatbook2017-05-16共588524人围观 ,发现 17 个不明物体系统安全 https://www.freebuf. ...

  4. 阿里P8架构师谈：阿里双11秒杀系统如何设计？

    秒杀是电商业务里的标志性事件,这样的典型高并发场景会遇见什么样的挑战呢,然后又是如何来解决的呢? 秒杀活动场景 淘宝双11秒杀场景,大量的用户短时间内涌入,瞬间流量巨大(高并发),比如:1000万人同 ...

  5. Response知识点小结

    HTTP协议: 1. 响应消息:服务器端发送给客户端的数据 * 数据格式: 1. 响应行 1. 组成:协议/版本 响应状态码 状态码描述 2. 响应状态码:服务器告诉客户端浏览器本次请求和响应的一个状 ...

  6. CEF4Delphi 常用设置

    CEF4Delphi是由 SalvadorDíazFau 创建的一个开源项目,用于在基于Delphi的应用程序中嵌入基于Chromium的浏览器. CEF4Delphi 基于Henri Gourves ...

  7. day38——线程queue、事件event、协程

    day38 线程queue 多线程抢占资源 只能让其串行--用到互斥锁 线程queue 队列--先进先出(FIFO) import queue q = queue.Queue(3) q.put(1) ...

  8. xorm实例-创建xorm，映射

    创建xorm引擎 //在xorm里面,可以同时存在多个Orm引擎,一个Orm引擎称为Engine, //一个Engine一般只对应一个数据库. //Engine通过调用`xorm.NewEngine` ...

  9. postman调用webapi错误记录

    1.webapi ,接口中header中,value 不能太长,太长会报错 结局:value中不要存太长的数据 2.如果key 中有中文,会获取不到数据 , 解决:需要把中文转码,然后后端解码 3.如 ...

  10. 使用jQuery开发tree插件

    1.插件截图 2.插件使用 首先引入jquery库,然后引入tree.js.tree.css文件,如下: <script type="text/javascript" src ...