Перечисление BarStyle

Перечисление BarStyle описывает строки для barStyle у StatusBar и для setBarStyle. От выбора зависит контраст иконок часов и сети с фоном полосы.

Синтаксис

<StatusBar barStyle="light-content" />

Значения

Значение	Описание
`'default'`	Стиль по умолчанию для текущей платформы и темы.
`'light-content'`	Светлый текст и иконки на темной полосе.
`'dark-content'`	Темный текст и иконки на светлой полосе.

Пример

Давайте поставим light-content на темном экране:

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

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

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

Пример

Давайте на светлом фоне включим dark-content:

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

export default function App() {
	return (
		<View style={{ flex: 1, backgroundColor: '#f0f4f8' }}>
			<StatusBar barStyle="dark-content" />
			<Text>12345</Text>
		</View>
	);
}

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

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

компонент StatusBar,
куда пишут barStyle
метод setBarStyle,
который меняет стиль без JSX
перечисление ColorScheme,
от которой часто зависит выбор стиля
функция useColorScheme,
которая читает тему для barStyle