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 DEVICE_HEIGHT = Dimensions.get('screen').height;
const STATUS_BAR = StatusBar.statusBarHeight || 24; 
const WINDOW_HEIGHT = Dimensions.get('window').height;

Answer 2

如果您询问状态栏

根据react native docs

您可以使用

import { StatusBar } from 'react-native';

然后在你的代码中

StatusBar.currentHeight

更新

您可以使用此模块react-native-extra-dimensions-android

来获取此信息

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

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 { Dimensions , StatusBar } from 'react-native';

WindowHeight = Dimensions.get('window').height。 ScreenHeight = Dimensions.get('screen').height。 StatusBarHeight = StatusBar.currentHeight

WindowHeight = ScreenHeight - NavigationBarHeight

当我们要在页面底部实现浮动按钮时，将 WindowHeight 设置为高度，并将bottom : StatusBar.currentHeight设置为子元素。

当我们没有 NavigationBar 时， WindowHeight = ScreenHeight

Answer 5

memory

Answer 6

首先，如其他答案中所述，使用 Android 中的react native维度API，窗口高度=屏幕高度-（状态栏高度+导航栏高度）

经过数小时的调查，我发现在某些 Android 设备中，Dimensions API给出了错误的窗口高度数字。

解决方案是使用[react-native-extra-dimensions-android] [1]

[1]：https://github.com/Sunhat/react-native-extra-dimensions-android它为您提供以下信息：

REAL_WINDOW_HEIGHT-屏幕的实际高度，包括系统装饰元素 REAL_WINDOW_WIDTH-屏幕的实际宽度，包括系统装饰元素 STATUS_BAR_HEIGHT-状态栏的高度 SOFT_MENU_BAR_HEIGHT-软菜单栏的高度（在大多数新的Android设备上支持）

然后您可以计算窗口高度：REAL_WINDOW_HEIGHT-（STATUS_BAR_HEIGHT + SOFT_MENU_BAR_HEIGHT）