使用React Native隐藏状态栏

Question

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

Answer 1

弄清楚如何隐藏状态栏。首先，StatusBarIOS是deprecated，因此您需要导入StatusBar，然后只需在渲染的顶部包含此代码段：

<StatusBar hidden />

React Native Docs on StatusBar

Answer 2

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

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

class MyComponent extends Component {

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

编辑：

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

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

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

Answer 3

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

简单地说：

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

Answer 4

从版本0开始。到目前为止（0.55 / 2018年6月）

<StatusBar hidden />

相信this answer的第一条评论

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

Answer 5

对于隐藏：

StatusBar.setHidden(true, 'none');

展示：

StatusBar.setHidden(false, 'slide');

Answer 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';