Метод setBarStyle

Метод setBarStyle у StatusBar вызывают статически: StatusBar.setBarStyle. Первый аргумент берут из BarStyle. Второй аргумент animated включает плавную смену на iOS.

Синтаксис

StatusBar.setBarStyle('dark-content', true);

Параметры

Параметр	Описание
`style`	Значение из `BarStyle`.
`animated`	При `true` смена стиля идет с анимацией.

Пример

Давайте переключим стиль полосы по нажатию:

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

export default function App() {
	const [light, setLight] = useState(true);

	const toggle = () => {
		const next = !light;
		setLight(next);
		StatusBar.setBarStyle(next ? 'light-content' : 'dark-content', true);
	};

	return (
		<View style={{ flex: 1, backgroundColor: light ? '#112233' : '#ddeeff' }}>
			<Pressable onPress={toggle}>
				<Text style={{ color: light ? '#ffffff' : '#112233' }}>abcde</Text>
			</Pressable>
		</View>
	);
}

На экране фон и стиль полосы меняются вместе после касания.

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

перечисление BarStyle,
откуда берут style
метод setBackgroundColor,
который меняет фон полосы на Android
метод setHidden,
который прячет полосу
компонент StatusBar,
где те же настройки задают через JSX