Метод setHidden

Метод setHidden у StatusBar принимает флаг видимости и тип анимации. Для animation используют 'none', 'fade' или 'slide'.

Синтаксис

StatusBar.setHidden(true, 'fade');

Параметры

Параметр	Описание
`hidden`	При `true` полоса скрыта, при `false` снова видна.
`animation`	`'none'` без перехода, `'fade'` через прозрачность, `'slide'` со сдвигом.

Пример

Давайте спрячем полосу с fade при входе в режим просмотра:

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

export default function App() {
	const [cinema, setCinema] = useState(false);

	const enter = () => {
		setCinema(true);
		StatusBar.setHidden(true, 'fade');
	};

	const exit = () => {
		setCinema(false);
		StatusBar.setHidden(false, 'slide');
	};

	return (
		<View style={{ flex: 1, backgroundColor: cinema ? '#000000' : '#ffffff' }}>
			<Pressable onPress={cinema ? exit : enter}>
				<Text style={{ color: cinema ? '#ffffff' : '#112233' }}>
					{cinema ? '12345' : 'abcde'}
				</Text>
			</Pressable>
		</View>
	);
}

На экране полоса исчезает с затуханием и возвращается со сдвигом.

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

метод setBarStyle,
который меняет стиль видимой полосы
метод setTranslucent,
который делает полосу полупрозрачной на Android
компонент Modal,
где часто прячут StatusBar
компонент StatusBar,
с параметром hidden в JSX