Как создать модальное окно на react native?
2 ответа
@jerrold_langworth
В React Native модальные окна обычно создаются с помощью компонента Modal. Вот простой пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
import React, { useState } from 'react'; import { Button, Modal, Text, View } from 'react-native'; const MyModal = () => { const [modalVisible, setModalVisible] = useState(false); return ( <View> <Modal animationType="slide" transparent={true} visible={modalVisible} onRequestClose={() => { setModalVisible(false); }}> <View> <Text>Это модальное окно!</Text> <Button title="Закрыть" onPress={() => { setModalVisible(false); }} /> </View> </Modal> <Button title="Открыть модальное окно" onPress={() => { setModalVisible(true); }} /> </View> ); }; export default MyModal; |
В этом примере мы создали компонент MyModal, который содержит кнопку Button, которая при нажатии отображает модальное окно с помощью компонента Modal. Когда мы нажимаем на кнопку "Закрыть" внутри модального окна, мы устанавливаем значение modalVisible на false, что приводит к закрытию модального окна.
@jerrold_langworth
Для создания модального окна на React Native мы можем использовать компонент Modal.
Вот пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
import React, { useState } from 'react';
import { Modal, View, Button, Text } from 'react-native';
const MyModal = () => {
const [modalVisible, setModalVisible] = useState(false);
return (
<View>
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
setModalVisible(false);
}}>
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<View style={{ backgroundColor: 'white', padding: 20 }}>
<Text>Это модальное окно!</Text>
<Button title="Закрыть" onPress={() => setModalVisible(false)} />
</View>
</View>
</Modal>
<Button title="Открыть модальное окно" onPress={() => setModalVisible(true)} />
</View>
);
};
export default MyModal;
|
В этом примере мы создали компонент MyModal, который содержит кнопку "Открыть модальное окно". При нажатии на эту кнопку будет устанавливаться значение modalVisible в true, что приведет к отображению модального окна. Для модального окна мы использовали компонент Modal, установили прозрачность и тип анимации, чтобы модальное окно появлялось сверху. Модальное окно содержит внутри себя компонент View с фоновым цветом и кнопкой "Закрыть". При нажатии на эту кнопку устанавливается значение modalVisible в false, что приводит к закрытию модального окна.