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 传递给隐藏道具的简单方法...

如此简单：

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

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隐藏状态栏

9 个答案: