Android导航栏高度React-Native

Question

我正试图通过RN获得Android底部栏(我称之为导航栏,你有后退键).因为当我这样做时:

Dimensions.get('window').height

我用这个酒吧得到了高度!因为它可以或不可以在那里,并且可以根据设置更大或更大,这对我来说是个大问题.

简单的问题,我找不到答案..
谢谢!

Answer 1

• 在IOS设备，screenHeight === windowHeight;
• 在带有底部导航栏的 Android 设备中，screen height === windowHeight + statusBarHeight + bottomNavigatorBarHeight ;
• 在没有底部导航栏的 Android 设备中，bottomNavigatorBarHeight为零。

import {Dimensions, StatusBar} from 'react-native'; 

const SCREEN_HEIGHT = Dimensions.get('screen').height; // device height
const STATUS_BAR_HEIGHT = StatusBar.currentHeight || 24; 
const WINDOW_HEIGHT = Dimensions.get('window').height;

Answer 2

import { Dimensions , StatusBar } from 'react-native';

const screenHeight = Dimensions.get('screen').height;
const windowHeight = Dimensions.get('window').height;
const navbarHeight = screenHeight - windowHeight + StatusBar.currentHeight;

Answer 3

我使用下面的工作表来做到这一点：

// RN version:0.57.0
let deviceH = Dimensions.get('screen').height;
// the value returned does not include the bottom navigation bar, I am not sure why yours does.
let windowH = Dimensions.get('window').height;
let bottomNavBarH = deviceH - windowH;

Answer 4

如果您指的是顶部的状态栏。

根据反应本机文档，您可以使用

import { StatusBar } from 'react-native';

然后在你的代码中

StatusBar.currentHeight

更新

您可以使用此模块react-native-extra-dimensions-android来获得它

要检测软 android 导航是否存在，您可以使用此模块react-native-detect-navbar-android。