[RN/Short] React Native Modal 뒷 배경 반투명 처리 방법 : centeredView

해당 글에서는 react-native 환경에서 Modal 팝업에서 팝업 외에 화면을 반투명 처리를 하여 뒤에 화면이 보이도록 하는 방법에 대해 알아봅니다.

 

1) Modal 태그 뒷 배경 불투명 처리 방법

---

💡Modal 태그 뒷 배경 투명 처리 방법

- Modal 팝업이 띄어지고 화면상에 출력이 될 때, 뒤에 배경을 반투명 처리를 하여서 팝업임을 나타내기 위해서 사용이 되는 방법입니다.

Modal · React Native

 

1. centeredView 스타일 적용

---

💡centeredView 스타일 적용

- Modal 컴포넌트에서 사용되는 스타일 객체입니다. 이 스타일은 Modal의 내용을 화면 중앙에 배치하고 배경을 반투명하게 만드는 역할을 합니다.

 

💡 적용 스타일 설명

1. flex : 1
- Modal이 화면 전체를 차지하도록 합니다.

2. justifyContent: 'center', alignItems: 'center':
- Modal의 내용을 수직, 수평 중앙에 배치합니다.

3. backgroundColor: "rgba(0, 0, 0, 0.6)"
- 배경을 반투명한 검은색으로 설정하여 뒷배경을 어둡게 처리합니다.

centeredView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    alignContent: "center",
    backgroundColor: "rgba(0, 0, 0, 0.6)",
},

 
 
 

2. Modal 속성 지정

---

💡Modal 속성 지정

- Modal 속성 중에 반투명 처리를 하기 위해서는 transparent 속성을 true로 지정해야 뒤에 내용이 반투명 상태로 보입니다.

<Modal
    animationType="fade"
    visible={isOpenModal}
    transparent={true}
    onRequestClose={handleModal.close}
>

// 내용

</Modal>

 

💡[참고] Modal 속성

속성	설명	타입	기본값
visible	Modal의 표시 여부를 결정합니다.	boolean	false
transparent	Modal의 배경을 투명하게 만듭니다.	boolean	false
animationType	Modal이 나타나고 사라질 때의 애니메이션 유형을 지정합니다.	'none'	'slide'
onRequestClose	사용자가 Modal을 닫으려고 할 때 호출되는 함수입니다.	function	-
onShow	Modal이 표시된 직후에 호출되는 함수입니다.	function	-
hardwareAccelerated	Modal의 하드웨어 가속을 활성화합니다. (Android 전용)	boolean	false
presentationStyle	Modal의 표시 스타일을 지정합니다. (iOS 전용)	'fullScreen'	'pageSheet'
statusBarTranslucent	Modal이 상태 바 영역을 차지할지 여부를 결정합니다. (Android 전용)	boolean	false

 

Modal · React Native

 

3. 코드 확인

---

💡코드 확인

- 아래의 코드에서는 화면 영역과 Modal 영역으로 두 개로 화면이 나뉘어 있습니다.

1. Modal 태그 내에서는 transparent={true}를 통해서 투명여부를 설정하였습니다.

2. Modal 태그 내용인 View 태그 내에서는 styles.centeredView 스타일을 적용하고 있습니다.
- 이를 통해서 Modal 팝업을 정중앙에 오게 만들어주며 반투명 형태로 적용합니다.

3. centeredView 하위에 View에 styles.modalContainer 스타일을 적용하고 있습니다.
- 이는 실제 Modal의 background를 #ffffff로 지정을 하여서 Modal 팝업이 보이도록 합니다.

import React, { useState } from "react"
import { Modal, StyleSheet, Text, TouchableHighlight, View } from "react-native"
const TestScreen = ({ navigation, route }) => {

    const [isOpenModal, setIsOpenModal] = useState(false);

    const handleModal = (() => {
        return {
            open: () => setIsOpenModal(true),
            close: () => setIsOpenModal(false)
        }
    })();

    return (
        <>
            <View style={styles.container}>
                {/* ================ 화면 영역 ================ */}
                <View style={{
                    flex: 1,
                    alignContent: "center",
                    justifyContent: 'center',
                    alignItems: 'center',
                }}>
                    <TouchableHighlight
                        style={{ borderWidth: 1, width: 100, height: 30 }}
                        onPress={handleModal.open}>
                        <Text style={{ textAlign: "center" }}>Modal 팝업 열기</Text>
                    </TouchableHighlight>
                </View>

                {/*================  Modal 영역 ================*/}
                <Modal
                    animationType="fade"
                    visible={isOpenModal}
                    transparent={true}
                    onRequestClose={handleModal.close}>
                    {/* ⭐️ centeredView 적용 ⭐️  */}
                    <View style={styles.centeredView}>
                        <View style={styles.modalContainer}>
                            <Text style={{ textAlign: "center" }}> Modal 팝업 내용 </Text>
                            <TouchableHighlight
                                style={styles.modalCloseBtn}
                                onPress={handleModal.close}>
                                <Text style={{ textAlign: "center" }}>닫기</Text>
                            </TouchableHighlight>
                        </View>
                    </View>
                </Modal>
            </View >
        </>
    )
}
const styles = StyleSheet.create({
    container: {
        backgroundColor: "skyblue",
        height: "100%"
    },
    centeredView: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        alignContent: "center",
        textAlignVertical: 'center',
        backgroundColor: "rgba(0, 0, 0, 0.6)",
    },
    modalContainer: {
        width: 256,
        height: 106,
        justifyContent: "center",
        alignItems: "center",
        flexDirection: "column",
        backgroundColor: "#ffffff",
    },
    modalCloseBtn: {
        borderWidth: 1,
        width: 50,
        height: 30,
        marginTop: 20,
    }

});
export default TestScreen

 
 

4. 결과화면

---

💡 결과화면 : 모달 팝업 출력되기 이전

 
 

💡 결과화면 : 모달 팝업 출력 

- 팝업이 출력되고 뒤에 내용은 불투명 형태로 출력이 됨을 확인하였습니다.

 

 
 
 
 
오늘도 감사합니다. 😀