Hiding the status bar with React Native

问题:

How do you hide the status bar for iOS or Android when developing with React Native? I've imported StatusBar, but I believe there is also StatusBarIOS and a StatusBar for Android.

回答1:

Figured out how to hide the status bar. First of all, StatusBarIOS is deprecated so you need to import StatusBar and then simply include this code snippet at the top of your render:

<StatusBar hidden />

React Native Docs on StatusBar

回答2:

You can invoke this method from anywhere in your component:

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

class MyComponent extends Component {

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

EDIT:

This will hide the status bar for the entire app and not just in your specific component, to solve this you can do:

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

Or calling this method with false from somewhere else.

回答3:

I prefer the simple way of importing the StatusBar component and passing true to hidden prop...

So Simply:

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

回答4:

For Hidden:

StatusBar.setHidden(true, 'none');

For Show:

StatusBar.setHidden(false, 'slide');

回答5:

From version 0.?? to current (0.55 / June 2018)

<StatusBar hidden />

Credit to the first comment in this answer

Remember to first import the StatusBar component as per the other answers here

回答6:

If your reason for hiding it is to prevent your components from overlapping it, you might prefer to just use SafeAreaView as follows:

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

It should be the parent component of a screen and can optionally use a backgroundColor to match the color of your screen. Make sure to set a flex attribute. Your components will now just take up any area not being used by the status bar. This is especially useful in getting around the 'notch' issue with some of the newer phones.

SafeAreaView is a component of react-native so you will need to make sure you add it to your imports:

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