使用React Native隐藏状态栏

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

弄清楚如何隐藏状态栏。首先，不建议使用StatusBarIOS，因此您需要导入StatusBar，然后只需在渲染顶部包括以下代码片段即可：

<StatusBar hidden />

在上响应本机文档 StatusBar

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

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

class MyComponent extends Component {

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

编辑：

这将隐藏整个应用程序的状态栏，而不仅仅是在您的特定组件中，要解决此问题，您可以执行以下操作：

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

或者从其他地方以false调用此方法。

对于隐藏：

StatusBar.setHidden(true, 'none');

演出：

StatusBar.setHidden(false, 'slide');

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

所以很简单：

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>
       )
    }
}

从版本0开始。至今（0.55 / 2018年6月）

<StatusBar hidden />

归功于此答案中的第一个评论

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

如果您隐藏它的原因是为了防止组件重叠，则您可能更喜欢使用SafeAreaView，如下所示：

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

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

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

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

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

使它在Android上透明，您可以执行此操作

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

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

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

没用没关系，您尝试过什么？

也许<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>