使用React Native隐藏状态栏

Question

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

Answer 1

弄清楚如何隐藏状态栏.首先,不推荐使用 StatusBarIOS,因此您需要导入StatusBar,然后只需在渲染的顶部包含此代码段:

<StatusBar hidden />

反应原生文档 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传递给隐藏属性的简单方法。

所以很简单：

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 />

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

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

Answer 5

对于隐藏：

StatusBar.setHidden(true, 'none');

演出：

StatusBar.setHidden(false, 'slide');