在 React Native 中获取软导航栏的高度

Question

我在 React Native (Dimensions.get("window").height) 屏幕的相同高度呈现内容，但是当 Android phone 有一个软导航栏时，一些内容会像这样隐藏：

在我的 phone 上，也有一个软导航栏，但它的功能似乎不同并且没有覆盖内容，像这样：

这两个导航栏有什么区别？我只想找到黑色导航栏的高度（如果存在）然后我就可以解决我的问题。我进行了广泛的搜索，似乎没有明确的答案。也许我的术语有误？

Answer 1

不要使用 Dimensions.get("window").height，您无法从中安全地计算屏幕高度。不同的设备将有不同的导航栏（阻塞和不阻塞，也取决于 AndroidManifest）、状态栏、相机切口。 React Native SafeAreaView 专门用于此目的 - 您将内容包装在 SafeAreaView 中，它将提供填充以确保内容不会与这些区域重叠

Answer 2

试试这个

import { Dimensions, Platform, StatusBar } from "react-native";

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

Answer 3

对于有类似需求的人，这是我用来获取软导航栏高度的方法。我已经在使用 React 导航，所以 react-native-safe-area-context 随之而来。

import { Dimensions, StatusBar } from "react-native";
import { initialWindowMetrics } from 'react-native-safe-area-context';

export const WINDOW_HEIGHT = Dimensions.get('window').height;
const { insets, frame } = initialWindowMetrics;
export const BOTTOM_NAV_BAR_HEIGHT = frame.height - WINDOW_HEIGHT- StatusBar.currentHeight

在 React Native 中获取软导航栏的高度

Get the height of soft nav bar in React Native

layout

android

react-native