navigation导航栏存在android和ios样式不统一的问题。Android手机上标题不居中,导航栏与状态栏重合。

解决方法为在navigationOptions中进行如下配置。

一、Android中标题不居中

headerTitleStyle: {
alignSelf: 'center',
textAlign: 'center',
flex: 1
},

二、Android中导航栏与状态栏重合

判断为Android手机,margin上面状态栏的高度。

headerStyle: {
marginTop: $IS_ANDROID ? $STATUS_BAR_HEIGHT : 0,
height: 44,
elevation: 0,
borderBottomWidth: 0
},

End---------------

React native随笔——解决navigation导航栏 android和ios样式不统一的更多相关文章

  1. [RN] React Native 图片保存到相册(支持 Android 和 ios)

    React Native 图片保存到相册(支持 Android 和 ios) 原理: IOS用 RN自带的 CameraRoll, Android 使用 不成功,需要 react-native-fs  ...

  2. React Navigation 导航栏样式调整+底部角标消息提示

    五一佳节匆匆而过,有人选择在外面看人山人海,有人选择宅在家中度过五一,也有人依然坚守在第一线,致敬! 这是坚持学习react-native的第二篇文章,可能会迟到,但是绝不会缺席,这篇要涉及到的是re ...

  3. React Native 轻松集成统计功能(Android 篇)

    关于推送的集成请参考这篇文章,本篇文章将引导你集成统计功能,只需要简单的三个步骤就可以集成统计功能. 第一步 安装 在你的项目路径下执行命令: npm install janalytics-react ...

  4. React Native 轻松集成分享功能(Android 篇)

    关于推送的集成请参考这篇文章,关于统计的集成请参考这篇文章,本篇文章将引导你集成分享功能. 在集成插件之前,需要在各大开放平台上成功注册应用,并通过审核(支持 3 个可选的主流平台).支持的平台如下: ...

  5. vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改

    vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改.vue <div class="commonHeader" v-bind:class=" ...

  6. React Native随笔——警告处理方法(持续更新)

    一.警告propTypes was defined as an instance property on commonTabar. Use a static property to define pr ...

  7. 从零学React Native之03页面导航

    之前我们介绍了RN相关的知识: 是时候了解React Native了 从零学React Native之01创建第一个程序 从零学React Native之02状态机 本篇主要介绍页面导航 上一篇文章给 ...

  8. iOS解决隐藏导航栏后,打开照片选择器后导航栏不显示的问题以及更换导航栏背景色

    问题描述: 遇到一种情况,在一个控制器上(隐藏了导航栏),打开照片选择器 UIImagePickerController后,照片选择器头部一片空白,且上滑相册时,信息会有错乱效果. 原因分析: 通过查 ...

  9. React Native微信分享 朋友圈分享 Android/iOS 通用

    超详细React Native实现微信好友/朋友圈分享功能-Android/iOS双平台通用   2016/06/16 |  React Native技术文章 |  Sky丶清|  暂无评论 |  1 ...

  10. win10的react native 开发环境搭建,使用Android模拟器

    1.打开cmd的管理员模式,win+X,选择命令提示符(管理员)即可,运行如下命令: @"%SystemRoot%\System32\WindowsPowerShell\v1.0\power ...

随机推荐

  1. [转帖]Web性能优化工具WebPageTest(三)——本地部署(Windows 7版本)

    http://www.zlprogram.com/Show/30/30117.shtml 这次先能够使用PC端的浏览器测试,首先需要下载官方的发布版本"WebPageTest 3.0&quo ...

  2. [转帖]gcc -O0 -O1 -O2 -O3 四级优化选项及每级分别做什么优化

    相关博客http://blog.chinaunix.net/uid-24954950-id-2956476.html 相关博客http://blog.csdn.net/misiter/article/ ...

  3. [转帖]apt update和apt upgrade命令 - 有什么区别?

    在之前的文章中,我们查看了APT 命令以及您可以使用包管理器来管理包的各种方法.这是一个总体概述,但在本指南中,我们暂停并重点关注 2 个命令用法.这些是apt update和apt upgrade命 ...

  4. fio test 简单查看一些系统的io性能结果

    简单测试的脚本: echo "本次测试测试128k 16k 8k 1k 的 顺序读写 随机读写性能,每个脚本耗时约30s, 总计耗时大约8min左右完成: " fio -name= ...

  5. HBase深度历险 | 京东物流技术团队

    简介 HBase 的全称是 Hadoop Database,是一个分布式的,可扩展,面向列簇的数据库,是一个通过大量廉价的机器解决海量数据的高速存储和读取的分布式数据库解决方案.本文会像剥洋葱一样,层 ...

  6. 文盘Rust -- 领域交互模式如何实现

    作者:京东科技 贾世闻 文盘Rust -- 领域交互模式如何实现 书接上文,上回说到如何通过interactcli-rs四步实现一个命令行程序.但是shell交互模式在有些场景下用户体验并不是很好.比 ...

  7. vue3中retive的错误用法导致数据不跟新

    retive的错误用法 <template> <div> 司藤的信息==>{{ objInfo }} <button @click="handerHttp ...

  8. vue在render函数中如何实现v-model和事件绑定(4)

    1.h函数的三个参数 第一个参数是必须的. 类型:{String | Object | Function} 一个 HTML 标签名.一个组件.一个异步组件.或一个函数式组件. 是要渲染的html标签. ...

  9. Python 潮流周刊第 19 期摘要

    原文全文:https://pythoncat.top/posts/2023-09-09-weekly 文章&教程 1.Mojo 终于提供下载了! 2.我们能从 PEP-703 中学到什么? 3 ...

  10. python读取json格式文件大量数据,以及python字典和列表嵌套用法详解

    1.Python读取JSON报错:JSONDecodeError:Extra data:line 2 column 1 错误原因: JSON数据中数据存在多行,在读取数据时,不能够单单用open(), ...