Метод setTranslucent

Метод setTranslucent у StatusBar доступен только на Android. При true контент рисуется под полосой, и приложение само задает отступ сверху.

Синтаксис

StatusBar.setTranslucent(true);

Параметры

Параметр	Описание
`translucent`	`true` включает прозрачность, `false` возвращает непрозрачную полосу.

Пример

Давайте на Android включим translucent и растянем фон под полосу:

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

export default function App() {
	useEffect(() => {
		if (Platform.OS === 'android') {
			StatusBar.setTranslucent(true);
			StatusBar.setBackgroundColor('#112233', false);
			StatusBar.setBarStyle('light-content', false);
		}
	}, []);

	return (
		<View style={{ flex: 1, backgroundColor: '#112233', paddingTop: 48 }}>
			<Text style={{ color: '#ffffff' }}>12345</Text>
		</View>
	);
}

На Android фон заходит под полосу, текст начинается ниже с ручным отступом.

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

метод setBackgroundColor,
который красит полосу на Android
компонент SafeAreaView,
который дает отступ без ручного paddingTop
компонент StatusBar,
с параметром translucent в JSX
класс Platform,
чтобы ограничить вызов Android