[ReactNative] 리액트 네이티브 공통 모달 팝업 Alert 만들기

 

 

리액트 네이티브 환경에서 어플리케이션을 개발할 때, 

모든 컴포넌트에서 공통으로 사용할 수 있는 공통 모달 창을 생성해보자

 

공통 팝업에는 버튼이 2개 존재하고, 버튼의 문구도 컴포넌트의 컨셉에 맞게 구성할 수 있도록 

개발할 예정이다.

 

 

 

 

먼저 공통 컴포넌트를 생성한다.

 

components.js

 

파라미터 목록

 

show : 모달창을 보여줄 지 결정

message : 모달창 문구

openText : 두 개의 버튼 중 한 버튼의 문구

closeText : 두 개의 버튼 중 한 버튼의 문구

width : 길이

 

import Dialog from 'react-native-dialog';
import { StyleSheet, Image, View, Text, TouchableOpacity} from 'react-native';

export function Alert(props){
    return (
        <Dialog.Container
            visible={props.show}
            contentStyle={{width: props.width, alignItems:'center', justifyContent: 'center'}}
            onBackdropPress={()=>{console.log("back press!")}}
        >
            <View style={{justifyContent: 'center', alignItems: 'center'}}>
                <Text
                    Style={{fontSize: 17, color: '#233152', lineHeight: 22,}}
                >
                    {props.message}
                </Text>
            </View>
            <View style={{flexDirection: 'row',padding:20}}>
                <TouchableOpacity
                    style={{flex: 1, width: '100%',borderWidth:1,borderColor:'#0070e0', marginTop: 10,marginRight:20}}
                    onPress={()=> console.log("open")}
                >
                    <Text style={{fontSize: 16, lineHeight: 18, color: '#0070e0',textAlign:'center'}}>
                        {props.openText}
                    </Text>
                </TouchableOpacity>
                <TouchableOpacity
                    style={{flex: 1, width: '100%',borderWidth:1,borderColor:'#D20D4F', marginTop: 10}}
                    onPress={()=> console.log("close")}
                >
                    <Text style={{fontSize: 16, lineHeight: 18, color: '#D20D4F',textAlign:'center'}}>
                        {props.closeText}
                    </Text>
                </TouchableOpacity>
            </View>
        </Dialog.Container>
    )
}

 

 

 

 

 

MainComponent.js

모달창을 사용할 화면

import React, { useState } from 'react';
import { Alert } from '../common/components';

const MainComponent = () => {
	const [showConfirmDialog,setShowConfirmDialog] = useState();

	return (
		<View>
			<Text>메인 컨텐츠 화면</Text>
			<Alert 
                         show={showConfirmDialog}
                         message={"공통 팝업 메세지 문구"}
                         openText={"열기 문구"}
                         closeText={"닫기 문구"}
                         width={300}
     		 />
		</View>
	)
	
}

 

위와 같이 공통 컴포넌트의 Alert을 호출하면 MainComponent 내부에서 공통 모달을 호출한다.

 

해당 기능은 예제로 대충 만들었기에, Alert 컴포넌트가 가지는 파라미터를 최소화했다.

 

 

 

결과 화면

 

 

 

버튼 탭 및 외부 화면 탭 시 로그 출력