如何在React-native或Expo中删除状态栏高度

Question

我要删除StatusBar的高度。

因此，尽管我成功尝试不看起来像隐藏，但status bar的高度仍然保持不变。我想摆脱这个statusbar的高度。

  <View style={styles.container}>
        <StatusBar hidden={true} />
...

使用StatusBar.currentHeight但不起作用。

  constructor(props) {
    super(props);
  StatusBar.currentHeight = 0
}

  

如何摆脱StatusBar区域？

Answer 1

帮助您获取状态栏高度和修改的小型库。

安装

npm install --save react-native-status-bar-height

OR

yarn add react-native-status-bar-height

使用getStatusBarHeight（skipAndroid：boolean = false）

import { getStatusBarHeight } from 'react-native-status-bar-height';


// 44 - on iPhoneX
// 20 - on iOS device
// X - on Android platfrom (runtime value)
// 0 - on all other platforms (default)
console.log(getStatusBarHeight());

// will be 0 on Android, because You pass true to skipAndroid
console.log(getStatusBarHeight(true));

refer here

For Example

Answer 2

StatusBar.currentHeight是不可写的。 StatusBar.currentHeight将返回状态栏的高度。 For more information

Answer 3

您可以尝试

import { SafeAreaView } from "react-navigation";

SafeAreaView.setStatusBarHeight(0);