状态栏和底部触控栏的高度获取

在应用设置沉浸式的时候，能否设置顶部沉浸式，底部在安全区域内布局。如果自己设置底部margin，底部高度如何获取。

HarmonyOS

Heiang

2024-09-29 13:10:51

浏览

回答 2

待解决

回答 2

按赞同

按时间

鱼弦CTO

在应用开发中，设置顶部沉浸式和底部安全区域内布局时，需要获取状态栏和底部触控栏（导航栏）的高度。在不同平台上，这些高度可能会有所不同，但基本原理是相似的。

以下是一些常见的方法，用于获取状态栏和底部导航栏的高度，并在应用中实现顶部沉浸式和底部安全区域内布局：

### 获取状态栏高度

在大多数前端框架和库中，都提供了获取状态栏高度的方法。例如，在 React Native 中，可以使用 StatusBar 模块。

import { StatusBar, Platform } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const statusBarHeight = Platform.OS === 'android' ? StatusBar.currentHeight : 44; // iOS 默认状态栏高度为44

### 获取底部导航栏高度

获取底部导航栏的高度通常比较复杂，因为不同设备和系统版本的高度可能不同。一种方法是使用第三方库来处理安全区域，例如 react-native-safe-area-context。

首先安装该库：

npm install react-native-safe-area-context

然后在组件中使用它：

import React from 'react';
import { View, Text, StyleSheet, Platform } from 'react-native';
import { SafeAreaProvider, SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';

function App() {
  const insets = useSafeAreaInsets();

  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.container}>
        <View style={[styles.content, { paddingBottom: insets.bottom }]}>
          <Text>Content goes here</Text>
        </View>
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  content: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

### 设置顶部沉浸式和底部安全区域内布局

要实现顶部沉浸式效果，可以结合状态栏高度调整布局。以下是一个完整的示例代码，展示了如何在 React Native 中实现顶部沉浸式和底部安全区域内布局：

import React from 'react';
import { View, Text, StyleSheet, Platform, StatusBar } from 'react-native';
import { SafeAreaProvider, SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';

function App() {
  const insets = useSafeAreaInsets();

  return (
    <SafeAreaProvider>
      <SafeAreaView style={[styles.container, { paddingTop: insets.top }]}>
        <View style={styles.header}>
          <Text style={styles.headerText}>Header (Immersive)</Text>
        </View>
        <View style={[styles.content, { paddingBottom: insets.bottom }]}>
          <Text>Content goes here</Text>
        </View>
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  header: {
    height: 50,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#6200EE',
  },
  headerText: {
    color: '#FFFFFF',
    fontSize: 20,
  },
  content: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

### 解释

状态栏高度：

使用Platform 和StatusBar 获取不同平台上的状态栏高度。
为 Android 和 iOS 分别设置不同的高度。

底部安全区：

使用react-native-safe-area-context 库获取底部安全区的高度。
在SafeAreaView 中，通过paddingBottom: insets.bottom 确保内容不被底部导航栏覆盖。

沉浸式布局：

使用SafeAreaView 和useSafeAreaInsets 来控制顶部和底部的安全区，并确保内容在安全区域内布局。
设置paddingTop: insets.top 实现顶部沉浸式效果。

通过这些步骤，你可以实现顶部沉浸式和底部安全区域内布局，确保在不同设备上都能获得良好的用户体验。如果有任何进一步的问题或需求，请随时提问！

2024-09-29 14:08:40

superinsect

指南链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5#getwindowavoidarea9

参考代码：目前通过getWindowAvoidArea无法拿到bottom的高度；底部菜单栏高度。

onPageShow() {  
  AppStorage.setOrCreate("nav", this.pathInfos);  
  let windowStage = AppStorage.get("windowStage") as window.WindowStage;  
  console.info("zzzzz "+JSON.stringify(windowStage.getMainWindowSync().getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR)));  
}

2024-09-29 15:54:28

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

状态栏和底部触控栏的高度获取

订阅鸿蒙技术特刊，精选内容抢先看