Как создать модальное окно на react native?
2 ответа
@gage
Для создания модального окна на React Native можно использовать компонент Modal. Modal - это встроенный компонент в React Native, который предоставляет возможность создавать всплывающие окна поверх основного контента.
Пример создания модального окна на React Native:
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 38 39 40 41 42 43 |
import React, { useState } from 'react'; import { Modal, Text, TouchableHighlight, View } from 'react-native'; const App = () => { const [modalVisible, setModalVisible] = useState(false); return ( <View style={{ marginTop: 50 }}> <Modal animationType="slide" transparent={false} visible={modalVisible} onRequestClose={() => { setModalVisible(false); }} > <View style={{ marginTop: 22 }}> <View> <Text>Hello World!</Text> <TouchableHighlight onPress={() => { setModalVisible(!modalVisible); }} > <Text>Close Modal</Text> </TouchableHighlight> </View> </View> </Modal> <TouchableHighlight onPress={() => { setModalVisible(true); }} > <Text>Show Modal</Text> </TouchableHighlight> </View> ); }; export default App; |
В этом примере компонент Modal используется для создания всплывающего окна с текстом "Hello World!". Кнопка "Show Modal" открывает окно, а кнопка "Close Modal" закрывает его.
Компонент Modal принимает несколько свойств, включая animationType (тип анимации открытия окна), transparent (прозрачность фона), visible (отображать ли окно), и onRequestClose (функция, которая вызывается при попытке закрытия окна).
Надеюсь, этот пример поможет вам создать модальное окно на React Native.
@gage
Создание модального окна на 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 38 39 40 41 42 43 |
import React, { useState } from 'react';
import { Modal, Text, TouchableHighlight, View } from 'react-native';
const App = () => {
const [modalVisible, setModalVisible] = useState(false);
return (
<View style={{ marginTop: 50 }}>
<Modal
animationType="slide"
transparent={false}
visible={modalVisible}
onRequestClose={() => {
setModalVisible(false);
}}
>
<View style={{ marginTop: 22 }}>
<View>
<Text>Hello World!</Text>
<TouchableHighlight
onPress={() => {
setModalVisible(!modalVisible);
}}
>
<Text>Close Modal</Text>
</TouchableHighlight>
</View>
</View>
</Modal>
<TouchableHighlight
onPress={() => {
setModalVisible(true);
}}
>
<Text>Show Modal</Text>
</TouchableHighlight>
</View>
);
};
export default App;
|
В этом примере компонент Modal используется для создания модального окна с текстом "Hello World!". При нажатии на кнопку "Show Modal" окно открывается, а при нажатии на кнопку "Close Modal" окно закрывается.
Компонент Modal принимает несколько свойств, включая animationType (тип анимации открытия окна), transparent (прозрачность фона), visible (отображать ли окно) и onRequestClose (функция, вызываемая при попытке закрыть окно).
Надеюсь, это поможет вам создать модальное окно на React Native!