Компонент SafeAreaView

Компонент SafeAreaView из пакета 'react-native' оборачивает дочерние элементы и добавляет безопасный отступ по краям экрана. Контент не залезает под статус-бар, вырез камеры и домашний индикатор. Раскладку внутри задает параметр style так же, как у View.

Синтаксис

<SafeAreaView>
	child1
</SafeAreaView>

Параметры

Параметр	Описание
`children`	Дочерние элементы, которые нужно держать в безопасной зоне экрана.
`style`	Объект стиля контейнера: фон, отступы и flex-раскладка. Объект собирают через класс `StyleSheet`.

Пример

Давайте выведем текст с учетом безопасной зоны:

import { SafeAreaView, Text } from 'react-native';

export default function App() {
	return (
		<SafeAreaView>
			<Text>abcde</Text>
		</SafeAreaView>
	);
}

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

Пример

Давайте растянем фон на весь экран и оставим контент в безопасной зоне:

import { SafeAreaView, Text, StyleSheet } from 'react-native';

export default function App() {
	return (
		<SafeAreaView style={styles.root}>
			<Text>12345</Text>
		</SafeAreaView>
	);
}

const styles = StyleSheet.create({
	root: {
		flex: 1,
		padding: 16,
	},
});

На экране контейнер займет доступную высоту, а текст получит внутренний отступ от краев безопасной области.

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

компонент View,
который держит дочерние элементы
класс StyleSheet,
который собирает объект стиля
компонент StatusBar,
который задает вид системной полосы
перечисление FlexDirection,
которое задает направление ряда