Компонент StatusBar

Компонент StatusBar меняет цвет и видимость системной полосы над приложением. Параметр barStyle берет значение из BarStyle. Параметры backgroundColor и translucent работают на Android. Те же настройки можно задать методами setBarStyle, setHidden и другими без JSX.

Синтаксис

<StatusBar barStyle="light-content" backgroundColor="#112233" />

Параметры

Параметр	Описание
`barStyle`	Стиль текста и иконок на полосе из `BarStyle`.
`hidden`	При `true` полоса скрыта, при `false` видна.
`backgroundColor`	Цвет фона полосы на Android, например `'#112233'`.
`translucent`	На Android контент рисуется под полупрозрачной полосой.

Методы

Метод	Описание
`setBarStyle`	Меняет стиль полосы с опциональной анимацией.
`setHidden`	Прячет или показывает полосу с анимацией появления.
`setBackgroundColor`	Ставит цвет фона на Android.
`setTranslucent`	Включает или выключает прозрачность полосы на Android.

Пример

Давайте зададим светлый текст на темном фоне полосы:

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

export default function App() {
	return (
		<View style={{ flex: 1, backgroundColor: '#223344' }}>
			<StatusBar barStyle="light-content" backgroundColor="#112233" />
			<Text style={{ color: '#ffffff' }}>abcde</Text>
		</View>
	);
}

На экране системная полоса темная, текст на ней и в приложении светлый.

Пример

Давайте спрячем полосу на время просмотра:

import { useState } from 'react';
import { View, Text, StatusBar, Pressable } from 'react-native';

export default function App() {
	const [hidden, setHidden] = useState(false);

	return (
		<View style={{ flex: 1 }}>
			<StatusBar hidden={hidden} barStyle="dark-content" />
			<Pressable onPress={() => setHidden((v) => !v)}>
				<Text>12345</Text>
			</Pressable>
		</View>
	);
}

На экране после нажатия полоса исчезает и снова появляется.

Смотрите также

перечисление BarStyle,
которое задает barStyle
компонент ActivityIndicator,
который показывает загрузку на экране
компонент SafeAreaView,
который отступает контент от системных панелей
класс Platform,
чтобы проверить Android перед фоном полосы