android 状态栏挡住app,【已解决】react-navigation导航栏被状态栏遮盖挡住了一部分...

通过：

确认了使用：

native-navigation

而通过官网：

的demo：

已经发现了：

android手机中，导航栏的部分，顶部被状态栏遮挡了：

以为是特殊情况呢

结果自己去：

折腾的效果，问题依旧

所以确认是库的问题了，所以要去解决

react-navigation navigation bar status bar

react-navigation navigation bar status bar overlap

去试试iPhone中是否有此问题。

iPhone中没有此问题

基本上确认了：

不是expo的问题

而是android需要特殊处理。

参考：

后来看到更新版本的文档：

里面除了解释，还有参考代码和写法。

去试了试：

app.json{

"expo": {

"sdkVersion": "21.0.0",

"androidStatusBar": {

"backgroundColor": "#C2185B"

}

但是没有效果。

androidStatusBar expo

去试试：

App.jsconst RseApp = StackNavigator(

{

Home: { screen: Home },

Profile: { screen: Profile },

{

navigationOptions: {

headerStyle: {

marginTop: Expo.Constants.statusBarHeight

}

);

结果：

android中就正常了：

ios还是保持正常的，不受影响。

【总结】

expo的做法：

对于android默认是用了透明的状态栏，导致andorid中，有些navigation libraries不支持这个。

所以解决办法是：

方法1:设置backgroundColor：此处设置了，但是没用。

方法2:在入口的app：

App.js

添加Expo.Constants.statusBarHeight，代码：const RseApp = StackNavigator(

{

Home: { screen: Home },

Profile: { screen: Profile },

{

navigationOptions: {

headerStyle: {

marginTop: Expo.Constants.statusBarHeight

}

);

即可。

【后记】

参考：

其实是react-navigation自己的bug，此处是直接修改了代码：

import { Animated, Platform, StyleSheet, View, StatusBar } from ‘react-native’;

// const STATUSBAR_HEIGHT = Platform.OS === ‘ios’ ? 20 : 0;

const STATUSBAR_HEIGHT = Platform.OS === ‘ios’ ? 20 : StatusBar.currentHeight;

同时把之前的App.js的代码注释掉：const RseApp = StackNavigator(

{

Home: { screen: Home },

Profile: { screen: Profile },

// Note: Not need add following code if update react-navigation code according to:

// Set STATUSBAR_HEIGHT for android. by gunn · Pull Request #2446 · react-community/react-navigation

// and for new version react-navigation, maybe has fixed this bug

// {

// navigationOptions: {

// headerStyle: {

// marginTop: Expo.Constants.statusBarHeight

// }

);

所以：

暂时就是自己改

node_modules/react-navigation/src/views/Header/Header.js

代码，就可以了。

之后：希望新版的react-navigation已经修复此问题。

不过改fix，有人不同意，也评论了，但是对于此处api <19或<21的android来说，暂时我觉得可以忽略。所以不是大问题。

不过，如果到时候如果导致native的app的顶部多出了额外的空白，则再考虑如何消除和避免此问题，或者干脆忽略掉expo的问题。

而要完美的解决该问题，则可以参考：

“

Getting the correct status bar underlap height is actually pretty complex.iOS’ StatusBar height is normally hardcoded at 20 which is correct for all currently released iOS devices. It can grow during calls due to the call indicator, however iOS actually pushes the viewport down clipping the bottom of the viewport instead of growing the status bar’s height, so the relevant height stays at 20.

However Apple is releasing a new iPhone X which has a StatusBar height of 44. And they’re doing this alongside a release of an iPhone 8 that has as StatusBar height of 20. So iOS’ StatusBar height is now hardware dependent.

Android has different StatusBar heights, it was 25 up till Marshmallow (API level 23) when it changed to 24. Some devices like the Kindle Fire change the value. And it’s also dynamic, on tablets it can be 32px. Though as long as there is no circumstance where the "status_bar_height", "dimen", "android" trick doesn’t return a value StatusBar.currentHeight takes care of this for Android.

However while that’s all fine for getting the height of the StatusBar, than doesn’t actually tell you if the StatusBar is overlapping (is set to translucent), if it’s not translucent than the overlapping height is 0.

If the user is running vanilla react-native on Android with no StatusBar tweaks, the StatusBar is not translucent and the overlapping height is 0.

But even if the user sets the StatusBar to translucent, that doesn’t mean that it is actually translucent. react-native supports android all the way back to API level 16. Whether the StatusBar is translucent if you set it depends on the version of Android and how you set it to translucent.

Android introduced the ability to set the StatusBar to translucent statically using android:windowTranslucentStatus in KitKat (API level 19), this is how Expo does it.

But it wasn’t till Lollipop (API level 21) that it became possible to set it translucent dynamically, the way does it.

I think the long term solution is going to be to make react-native support StatusBar.currentHeight on all platforms and add an StatusBar.isTranslucent() + event emitter api.

By the way, just to make everyone’s lives worse

android 状态栏挡住app,【已解决】react-navigation导航栏被状态栏遮盖挡住了一部分...相关推荐

React Navigation 导航栏样式调整+底部角标消息提示
五一佳节匆匆而过,有人选择在外面看人山人海,有人选择宅在家中度过五一,也有人依然坚守在第一线,致敬! 这是坚持学习react-native的第二篇文章,可能会迟到,但是绝不会缺席,这篇要涉及到的是re ...
【Android项目实战 | 从零开始写app (六) 】用TabLayout+ViewPager搭建App 框架主页面底部导航栏
本篇实现效果: 搭建app框架的方式有很多,本节主要用TabLayout+ViewPager搭建App框架,这种方式简单易实现,在主页中加载Fragment碎片,实现不同功能页面的切换效果图如下: 文 ...
android 控制导航栏、状态栏
1. 旧API隐藏导航栏: window.attributes.apply {systemUiVisibility = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION or V ...
Android9.0 完全隐藏导航栏、状态栏
需求:自定义界面全屏显示,隐藏导航栏,状态栏按照google的官方办法,设置如下几个Flag就可以隐藏导航栏: View decorView = getWindow().getDecorView() ...
微信h5隐藏导航栏和状态栏_导航栏未在SwiftUI中隐藏
微信h5隐藏导航栏和状态栏 TL;DR: If you can't tap on buttons in the navigation-bar area, you can jump directly t ...
android10动态显示隐藏导航栏，状态栏
实现方式:在frameworks里增加一个自定义的service,接收上层应用广播,然后通过这个service来发送控制显示隐藏的功能,也可以上层应用发送广播直接控制显示隐藏,因为还有其它功能,所以 ...
2.12、系统修改-隐藏安卓系统的导航栏和状态栏
1.导航栏与状态栏首先看一下导航栏和状态栏位置: 最上面是状态栏statusBar 最下面是导航栏`'NavagationBar 一.隐藏导航栏目录: frameworks/base/packag ...
iOS设置导航栏和状态栏
文章目录 iOS 15 之后导航栏背景色的设置 1.状态栏设置 1.1.没有导航栏 1.2.有导航栏 2.导航栏背景和字体颜色 2.1.十六进制颜色转RGB 2.2.生成纯色图片 3.导航栏的另外一种 ...
定制iOS 7中的导航栏和状态栏
近期,跟大多数开发者一样,我也正忙于对程序进行升级以适配iOS 7.最新的iOS 7外观上有大量的改动.从开发者的角度来看,导航栏和状态栏就发生了明显的变化.状态栏现在是半透明的了,这也就意味着导航栏 ...

android 状态栏挡住app,【已解决】react-navigation导航栏被状态栏遮盖挡住了一部分...

android 状态栏挡住app,【已解决】react-navigation导航栏被状态栏遮盖挡住了一部分...相关推荐

最新文章

热门文章