Скрытие строки состояния с помощью React Native

Ответ 1

Разобрался, как скрыть строку состояния. Прежде всего, StatusBarIOS устарел, поэтому вам нужно импортировать StatusBar а затем просто включить этот фрагмент кода вверху рендера:

<StatusBar hidden />

Реагировать на родные документы на StatusBar

Ответ 2

Вы можете вызвать этот метод из любого места в вашем компоненте:

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

class MyComponent extends Component {

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

РЕДАКТИРОВАТЬ:

Это скроет строку состояния для всего приложения, а не только для вашего конкретного компонента, для решения этого вы можете сделать:

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

Или вызов этого метода с ложным откуда-то еще.

Ответ 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>
       )
    }
}

Ответ 4

С версии 0.?? к текущему (0.55/июнь 2018 г.)

<StatusBar hidden />

Отдайте свой первый комментарий этому ответу

Не забудьте сначала импортировать компонент StatusBar согласно другим ответам здесь

Ответ 5

Для скрытых:

StatusBar.setHidden(true, 'none');

Для видимости:

StatusBar.setHidden(false, 'slide');

Ответ 6

Если ваша причина скрыть это состоит в том, чтобы предотвратить наложение ваших компонентов, вы можете просто использовать SafeAreaView следующим образом:

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

Он должен быть родительским компонентом экрана и может дополнительно использовать backgroundColor чтобы соответствовать цвету вашего экрана. Обязательно установите атрибут flex. Ваши компоненты теперь будут занимать любую область, не используемую строкой состояния. Это особенно полезно для решения проблемы "засечек" с некоторыми новыми телефонами.

SafeAreaView является компонентом Reaction-native, поэтому вам необходимо убедиться, что вы добавили его в свой импорт:

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