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

有一个新的图书馆，它的作用就像一个魅力

https://github.com/ConnectyCube/react-native-android-navbar-height

import { Dimensions } from "react-native";
import { getNavigationBarHeight } from "react-native-android-navbar-height";

// ...

const scale = Dimensions.get('screen').scale;
const navigationBarHeight = await getNavigationBarHeight();
const result = navigationBarHeight / scale;

Answer 5

首先我们需要导入

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

窗口高度 =

Dimensions.get('window').height

。 屏幕高度 =

Dimensions.get('screen').height

。 StatusBarHeight = StatusBar.currentHeight

窗口高度 = 屏幕高度 - 导航栏高度

当我们想在页面底部实现浮动按钮时，设置 WindowHeight 为高度，并设置

bottom : StatusBar.currentHeight

为子元素。

当我们没有NavigationBar时， 窗口高度 = 屏幕高度

Answer 6

首先，正如其他答案中提到的，在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 7

const navbarHeight = screenHeight - windowHeight + StatusBar.currentHeight;

在横向情况下，这是错误的并且会得到负数。

Answer 8

Dimensions.get('screen').height - Dimensions.get('window').height - StatusBar.currentHeight 将为您提供底部导航栏的高度。

在较旧的 Android 手机中，有时状态栏高度包含在 Dimensions.get('window').height 中，正如上面@Ian提到的那样。

要解决这个问题，我们需要在此类设备的情况下添加回 StatusBar.currentHeight。

我无法找到任何可以告知我们 Dimensions.get('window').height 行为的设备属性，所以我用这种方法解决了它：

1. 使用 style={{flex:1}} 创建一个视图。它应该是屏幕中唯一的父View，以便它覆盖整个屏幕。
2. 使用 onLayout 测量此视图的高度。
3. 与 Dimensions.get('window').height 比较
4. 差异大于 1 的设备就是我们找到的设备。

工作代码：（请记住在空屏幕内调用MyComponent。）

import { SCREENS_HEIGHT } from 'constants/constants';
import React, { useState } from 'react';
import { Dimensions, StatusBar, Text, View } from 'react-native';
const MyComponent: React.FC = () => {
  const [statusBarIncludedInWindowHeight, setStatusBarIncludedInWindowHeight] = useState(false);
  const navbarHeight =
    Dimensions.get('screen').height -
    Dimensions.get('window').height -
    (StatusBar.currentHeight || 0);
  return (
    <View
      style={{ flex: 1 }}
      onLayout={({
        nativeEvent: {
          layout: { height },
        },
      }) => {
        setStatusBarIncludedInWindowHeight(Math.abs(height - SCREENS_HEIGHT) > 1);
      }}
    >
      <Text style={{ color: 'black' }}>
        Navbar Height is :{' '}
        {navbarHeight + (statusBarIncludedInWindowHeight ? StatusBar.currentHeight || 0 : 0)}
      </Text>
    </View>
  );
};
export default MyComponent;

Answer 9

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

根据react native docs你可以使用

import { StatusBar } from 'react-native';

然后在你的代码中

StatusBar.currentHeight

更新

您可以使用此模块来获取此内容react-native-extra-dimensions-android

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