使用 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 传递给 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>
       )
    }
}

Answer 4

来自版本 0。??到当前（0.55 / 2018 年 6 月）

<StatusBar hidden />

归功于

中的第一条评论

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

Answer 5

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

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

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

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

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

Answer 6

隐藏:

StatusBar.setHidden(true, 'none');

显示:

StatusBar.setHidden(false, 'slide');

Answer 7

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

Answer 8

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

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

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

也 <StatusBar hidden /> 隐藏了它，但您可能会在顶部看到空白

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

使用 React Native 隐藏状态栏

Hiding the status bar with React Native

statusbar

reactjs

react-native