在做 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. [LeetCode] 165. Compare Version Numbers 比较版本数

    Compare two version numbers version1 and version1.If version1 > version2 return 1, if version1 &l ...

  2. [LeetCode] 637. Average of Levels in Binary Tree 二叉树的层平均值

    Given a non-empty binary tree, return the average value of the nodes on each level in the form of an ...

  3. php_mvc实现步骤三，四

    3.match_mvc MVC 以ecshop的前台为例: 功能一: 首页 购物车数据,商品分类数据,其他的首页需要的数据 功能二: 拍卖活动 购物车数据,商品分类数据,拍卖相关数据 功能三: 团购商 ...

  4. LeetCode 240. 搜索二维矩阵 II(Search a 2D Matrix II) 37

    240. 搜索二维矩阵 II 240. Search a 2D Matrix II 题目描述 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target.该矩阵具有以下特性 ...

  5. Windows 下删除 Docker 容器的方法

    Issue: 删除命令执行失败 如果在 CMD 命令提示符下删除容器可能失败,可切换至 PowerShell 中执行成功. unknown shorthand flag: 'a' in -a See ...

  6. 一起来学Spring Cloud | 第八章：消息总线(Spring Cloud Bus)

    上一章节,我们讲解了分布式配置中心spring cloud config,我们把配置项存放在git或者本地,当我们修改配置时,需要重新启动服务才能生效.但是在生产上,一个服务部署了多台机器,重新启动比 ...

  7. 19.Python略有小成(面向对象Ⅰ)

    Python(面向对象Ⅰ) 一.面向对象初识 回顾面向过程编程与函数式编程 # 面向过程编程 测量对象的元素个个数. s1 = 'fjdsklafsjda' count = 0 for i in s1 ...

  8. Numpy学习笔记（上篇）

    目录 Numpy学习笔记(上篇) 一.Jupyter Notebook的基本使用 二.Jpuyter Notebook的魔法命令 1.%run 2.%timeit & %%timeit 3.% ...

  9. MAT实战：JVM内存溢出的定位与分析

  10. [LOJ #2833]「JOISC 2018 Day 1」帐篷

    题目大意:有一个$n\times m$的网格图,若一个人的同一行或同一列有人,他就必须面向那个人,若都无人,就可以任意一个方向.若一个人无法确定方向,则方案不合法,问不同的方案数.$n,m\leqsl ...