react-native 0.66.4 Modal 다이얼로그 구현

엡에서 Modal  다이얼로그를 구현하는 방법입니다.

단순한 메세지 전달의 경우는 Alert을 사용하시면 되고, 좀 더 복잡한 다이얼로그를 구현 시 Modal을 사용해야 합니다.

이 포스트의 구현은 함수 컴포넌트(Function Component)로 구현한 예입니다.

모듈

"react": "17.0.2",  "react-native": "0.66.4"

 

임포트

import { Modal } from 'react-native';

 

Modal 컴포넌트

<Modal animationType="slide|fade|none"
	transparent={true|false}
	visible={true|false}>
	<View style={{
	  flex: 1,
	  flexDirection: 'row',
	  justifyContent: 'center',
	  alignItems: 'center'}}>
	  ...
	</View>
</Modal>

• animationType : slide(밑에서 중앙으로 이동하면서 표시), fase(중앙에서 페이드로 표시), none(중앙에 표시)
• transparent : Modal의 배경을 투명하게
• visible : Modal을 표시하거나 숨기기

 

Modal 컴포넌트 예제

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

const App: () => Node = () => {

  // Modal을 표시하거나 숨기기 위한 변수
  const [visibleMoal, setVisibleModal] = useState(false);

  return (
    <SafeAreaView style={{flex:1}}>
      {/* Modal 구현 */}
      <Modal animationType="slide"
        transparent={true}
        visible={visibleMoal}>
        <View style={{
          flex: 1,
          flexDirection: 'row',
          justifyContent: 'center',
          alignItems: 'center'}}>
          <View style={{
            flex: 0.5,
            borderRadius : 5,
            borderColor : '#cccccc',
            borderWidth : 1,
            backgroundColor : '#ffffff',
            padding: 5,
          }}>
            <Text style={{fontSize:20}}>Modal 화면입니다.</Text>
            {/* Modal 다이얼로그 숨기기 */}
            <Button title='닫기' onPress={() => setVisibleModal(false)}/>
          </View>
        </View>
      </Modal>

      <View style={{justifyContent: 'flex-end', flex:1,  alignItems: 'center'}}>
        <View style={{width : 150, marginBottom : 200}}>
          <Text style={{fontSize:15, marginBottom:5}}>Modal 화면 예제입니다.</Text>
          {/* Modal 다이얼그 표시 */}
          <Button onPress={() => setVisibleModal(true)} title='Modal 열기'/>
        </View>
      </View>

    </SafeAreaView>
  );
};

 

Modal 화면