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

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

// 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 3

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 4

首先我们需要导入

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

WindowHeight = Dimensions.get('window').height 。 屏幕高度 = Dimensions.get('screen').height 。 StatusBarHeight = StatusBar.currentHeight

WindowHeight = ScreenHeight - NavigationBarHeight

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

当我们没有 NavigationBar时， WindowHeight = ScreenHeight

Answer 5

首先在其他答案中提到，在 Android 中使用 react native Dimensions 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)

Answer 6

对我来说这很有效

import { Dimensions} from "react-native";
      const screenHeight = Dimensions.get('screen').height;
      const windowHeight = Dimensions.get('window').height;
      const navbarHeight = screenHeight - windowHeight

Answer 7

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

根据react native docs可以使用

import { StatusBar } from 'react-native';

然后在你的代码中

StatusBar.currentHeight

更新

你可以使用这个模块react-native-extra-dimensions-android得到这个

要检测是否存在soft android nav，你可以使用这个模块react-native-detect-navbar-android。