使用 React Native 隐藏状态栏答案

【问题标题】：Hiding the status bar with React Native使用 React Native 隐藏状态栏
【发布时间】：2016-07-11 05:29:31
【问题描述】：

在使用 React Native 开发时，如何隐藏 iOS 或 Android 的状态栏？我已经导入了 StatusBar，但我相信还有 StatusBarIOS 和 Android 的 StatusBar。

【问题讨论】：

仅供参考，StatusBarIOS 已弃用。 StatusBar 现在是跨平台的标准组件。

【解决方案1】：

想出了如何隐藏状态栏。首先，StatusBarIOS 是deprecated，所以你需要导入StatusBar，然后在你的渲染顶部简单地包含这个代码sn-p：

<StatusBar hidden />

React Native Docs on StatusBar

【讨论】：

你不需要 ={true} - 就足够了
它隐藏了所有组件的状态栏。无论如何要从特定组件中隐藏它？
@KaranBhutwala 在该特定渲染部分添加此代码
我正在使用“react-native”：“0.44.2”和 Android Emulator Nexus_6_API_25。当我设置时，它工作得很好，直到第一次刷新。第一次刷新后，我必须更新我的页面几次以隐藏 android 中的状态栏。我该如何解决？
@KaranBhutwala 你找到办法了吗？（隐藏特定组件）

【解决方案2】：

您可以从组件中的任何位置调用此方法：

import React, { Component } from 'react';
import { StatusBar } from 'react-native';

class MyComponent extends Component {

    componentDidMount() {
       StatusBar.setHidden(true);
    }
}

编辑：

这将隐藏整个应用程序的状态栏，而不仅仅是在您的特定组件中，您可以这样做：

componentWillUnmount() {
     StatusBar.setHidden(false);
}

或者从其他地方用 false 调用这个方法。

【讨论】：

在导入 React 时缺少撇号 (')，{ Component } from 'react;
是的，它可以工作，但它隐藏了每个屏幕的状态栏，即使我只在启动画面中这样做。
这个答案解决了我的 3 个问题，谢谢！

【解决方案3】：

隐藏：

StatusBar.setHidden(true, 'none');

秀场：

StatusBar.setHidden(false, 'slide');

【讨论】：

【解决方案4】：

我更喜欢导入 StatusBar 组件并将 true 传递给 hidden 属性的简单方法...

这么简单：

import React from "react";
import { StatusBar, View, Text } from "react-native";

class App extends React.Component {

    render() {
       return (
        <View>
          <StatusBar hidden={true} />
          <Text>Hello React Native!</Text>
        </View>
       )
    }
}

【讨论】：

这是与所选答案相同的答案。
这一项包括导入。 @NirBen-Yair

【解决方案5】：

从版本 0.??至当前（0.55 / 2018 年 6 月）

<StatusBar hidden />

感谢this answer中的第一条评论

请记住首先按照此处的其他答案导入StatusBar component

【讨论】：

【解决方案6】：

如果您隐藏它的原因是为了防止组件重叠，您可能更愿意按如下方式使用 SafeAreaView：

<SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
  <View style={{flex: 1}}>
    <Text>Hello World!</Text>
  </View>
</SafeAreaView>

它应该是屏幕的父组件，并且可以选择使用backgroundColor 来匹配屏幕的颜色。确保设置flex 属性。您的组件现在将只占用状态栏未使用的任何区域。这对于解决一些较新手机的“缺口”问题特别有用。

SafeAreaView 是 react-native 的一个组件，因此您需要确保将其添加到您的导入中：

import { SafeAreaView, Text, View } from 'react-native';

【讨论】：

是这样做的正确方法....我是这个领域的新手，我认为 SafeAreaView 仅适用于 ios

【解决方案7】：

{Platform.OS === 'ios' && <StatusBar barStyle="light-content" />}

【讨论】：

【解决方案8】：

要使其在 android 上透明，您可以这样做

<StatusBar  backgroundColor={'#ffffff00'} />

{Platform.OS === 'ios' && <StatusBar barStyle="light-content" />}

<StatusBar hidden /> 也被隐藏，但您可能会在顶部看到一个边距

【讨论】：

我在 componentDidMound 方法中写了它，但仍然显示状态栏。我也需要更新 info.plist 吗？

【解决方案9】：

不管你尝试了什么都没有用？

您的代码中可能还有另一个<StatusBar hidden="false">。它比你的定义更深刻。这将替换您之前的 hidden="true" 设置。

<View>
  <StatusBar hidden={true} /> // this will be replaced by the deeper StatusBar tag
  
  <View>
    <StatusBar hidden={false} /> // remove this or put your `hidden="true"` here
  </View>
</View>

【讨论】：