React Native의 Modal 창 작동 설명

<시간/>

Modal 구성 요소는 UI 콘텐츠 위에 콘텐츠 보기를 표시하는 데 도움이 됩니다.

기본 모달 구성 요소는 다음과 같습니다 -

<Modal animationType="slide" transparent={true} visible={modalVisible} onRequestClose={() => { Alert.alert("Modal has been closed."); }}> Your Content Here</Modal>

Modal 구성 요소를 사용하려면 먼저 다음과 같이 가져와야 합니다. -

import { Modal } from "react-native";

Modal Window의 기본 속성은 다음과 같습니다. -

Sr.No	소품 및 설명
1	애니메이션 유형 이 속성은 모달 창을 표시하기 위한 애니메이션을 처리합니다. 이것은 세 가지 값(slide, fade 및 없음)을 가진 열거형입니다.
2	닫기 이 속성은 모달 창이 닫힐 때 호출될 함수를 받습니다.
3	onOrientationChange 모달 창이 표시될 때 장치 방향이 변경될 때 호출되는 콜백 함수입니다.
4	onShow 함수는 모달 창이 표시될 때 호출되는 prop 값으로 전달됩니다.
5	프레젠테이션 스타일 이 속성은 모달 창의 표시를 처리합니다. 사용 가능한 값은 fullScreen, pageSheet, formSheet 및 overFullScreen입니다.
6	투명 이 소품은 투명한 보기를 제공하거나 모달 창에 대한 전체 보기를 채우도록 결정합니다.
7	가시성 이 속성은 모달 창이 표시되는지 여부를 결정합니다.

예제 1:모달 창 표시 표시

Modal 구성 요소를 사용하려면 먼저 다음과 같이 가져와야 합니다. -

import { Modal } from "react-native";

모달 창을 표시하기 위해 원하는 애니메이션을 결정할 수 있습니다. 옵션은 슬라이드, 페이드 및 없음입니다. 아래 예에서는 아래와 같이 텍스트와 버튼이 있는 간단한 모달 창을 표시하려고 합니다. -

<Modal
      animationType="slide"
      transparent={true}
      visible={isVisible}
   >
   <View style={styles.centeredView}>
      <View style={styles.myModal}>
         <Text style={styles.modalText}>Modal Window Testing!</Text>
            <Button style={styles.modalButton} title="Close" onPress={() => {setModalVisiblility(false); }}/>
      </View>
   </View>
</Modal>

isVisible 변수는 visible 속성에 할당됩니다. 기본적으로 false입니다. 즉, 모달 창이 기본적으로 표시되지 않습니다. isVisible 속성은 아래와 같이 초기화됩니다 -

const [isVisible, setModalVisiblility] = useState(false);

setModalVisiblility는 isVisible 변수를 false에서 true로 또는 그 반대로 업데이트합니다.

컴포넌트 내부에 정의된 닫기 버튼은 setModalVisiblility(false)를 호출합니다. 이렇게 하면 isVisible이 false로 바뀌고 모달 창이 사라집니다.

모달 창을 표시하기 위해 아래와 같이 setModalVisiblility(true)를 호출하는 구성 요소 외부에 버튼이 있습니다. -

<View style={styles.centeredView}>
   <Modal
      animationType="slide"
      transparent={true}
      visible={isVisible}
   >
   <View style={styles.centeredView}>
      <View style={styles.myModal}>
         <Text style={styles.modalText}>Modal Window Testing!</Text>
            <Button style={styles.modalButton} title="Close" onPress={() =>{setModalVisiblility(false); }}/>
            </View>
         </View>
      </Modal>
      <Button title="Click Me" onPress={() => {
         setModalVisiblility(true);
      }}
   />
</View>

다음은 모달 창을 표시하거나 숨기는 작업 코드입니다.

import React, { useState } from "react";
import { Button, Alert, Modal, StyleSheet, Text, View } from "react-native";
const App = () => {
   const [isVisible, setModalVisiblility] = useState(false);
   return (
      <View style={styles.centeredView}>
         <Modal
            animationType="slide"
            transparent={true}
            visible={isVisible}
         >
         <View style={styles.centeredView}>
            <View style={styles.myModal}>
               <Text style={styles.modalText}>Modal Window Testing!</Text>
                  <Button style={styles.modalButton} title="Close" onPress={() =>{setModalVisiblility(false); }}/>
                  </View>
               </View>
            </Modal>
            <Button title="Click Me" onPress={() => {
               setModalVisiblility(true);
            }}
         />
      </View>
   );
};
const styles = StyleSheet.create({
   centeredView: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center",
      marginTop: 22
   },
   myModal: {
      width:200,
      height:200,
      margin: 20,
      backgroundColor: "white",
      borderRadius: 20,
      padding: 35,
      alignItems: "center",
      shadowColor: "#000",
      shadowOffset: {
         width: 0,
         height: 2
      },
      shadowOpacity: 0.30,
      shadowRadius: 4,
      elevation: 5
   },
   modalText: {
      marginBottom: 20,
      textAlign: "center"
   },
   modalButton: {
      marginBottom: 50,
   }
});
export default App;

출력

React Native의 Modal 창 작동 설명