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

Перечисление PresentationStyle работает только на iOS. Значение пишут в параметре presentationStyle у Modal. На Android этот параметр не используют.

Синтаксис

<Modal presentationStyle="pageSheet" />

Значения

Значение	Описание
`'fullScreen'`	Окно на весь экран, как отдельный экран приложения.
`'pageSheet'`	Лист с закруглёнными углами, часть экрана сзади видна.
`'formSheet'`	Компактное окно по центру, типично для форм на iPad.
`'overFullScreen'`	На весь экран поверх текущего, удобно с `transparent`.

Пример

Давайте откроем лист pageSheet на iOS:

import { useState } from 'react';
import { View, Text, Modal, Button, Platform } from 'react-native';

export default function App() {
	const [visible, setVisible] = useState(false);

	return (
		<View>
			<Button title="abcde" onPress={() => setVisible(true)} />
			<Modal
				visible={visible}
				presentationStyle={
					Platform.OS === 'ios' ? 'pageSheet' : 'fullScreen'
				}
				onRequestClose={() => setVisible(false)}
			>
				<Text>12345</Text>
			</Modal>
		</View>
	);
}

На экране кнопка. На iOS слой выезжает листом с текстом '12345'.

Пример

Давайте покажем форму formSheet на iPad:

import { useState } from 'react';
import { View, Text, Modal, Button } from 'react-native';

export default function App() {
	const [visible, setVisible] = useState(false);

	return (
		<View>
			<Button title="12345" onPress={() => setVisible(true)} />
			<Modal
				visible={visible}
				presentationStyle="formSheet"
				onRequestClose={() => setVisible(false)}
			>
				<Text>abcde</Text>
			</Modal>
		</View>
	);
}

На экране кнопка. На iOS окно открывается компактным листом с текстом 'abcde'.

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

компонент Modal,
которому передают presentationStyle
перечисление AnimationType,
которое задаёт анимацию появления
перечисление PlatformOS,
которым проверяют iOS перед параметром
класс Alert,
когда нужно системное окно вместо своего слоя