Компонент Modal

Компонент Modal рисует отдельный слой над приложением. Параметр visible включает и выключает показ. Дочерние элементы задают содержимое окна. Анимацию появления задаёт animationType из перечисления AnimationType. На iOS вид окна задаёт presentationStyle из PresentationStyle. На Android onRequestClose обязателен: его вызывают по кнопке назад.

Синтаксис

<Modal visible={true} onRequestClose={() => {}}>
	<Text>abcde</Text>
</Modal>

Параметры

Параметр	Описание
`visible`	`true` показывает слой, `false` прячет его.
`children`	Содержимое модального окна.
`animationType`	Как окно появляется и исчезает. Строка из перечисления `AnimationType`.
`presentationStyle`	На iOS задаёт, на весь экран окно или лист снизу. Строка из перечисления `PresentationStyle`.
`transparent`	`true` оставляет фон прозрачным, виден экран под слоем.
`onRequestClose`	Вызов при закрытии с Android по кнопке назад. На Android параметр обязателен.

Пример

Давайте откроем простое окно по кнопке:

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="abcde" onPress={() => setVisible(true)} />
			<Modal
				visible={visible}
				animationType="slide"
				onRequestClose={() => setVisible(false)}
			>
				<View>
					<Text>12345</Text>
					<Button title="abcde" onPress={() => setVisible(false)} />
				</View>
			</Modal>
		</View>
	);
}

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

Пример

Давайте сделаем полупрозрачный фон и лист на 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="12345" onPress={() => setVisible(true)} />
			<Modal
				visible={visible}
				transparent={true}
				animationType="fade"
				presentationStyle={
					Platform.OS === 'ios' ? 'pageSheet' : undefined
				}
				onRequestClose={() => setVisible(false)}
			>
				<View style={{ flex: 1, justifyContent: 'center' }}>
					<Text>abcde</Text>
				</View>
			</Modal>
		</View>
	);
}

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

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

перечисление AnimationType,
которое задаёт анимацию появления
перечисление PresentationStyle,
которое задаёт вид окна на iOS
класс Alert,
который показывает системное окно с кнопками
компонент View,
которым оформляют содержимое внутри слоя