반응형
해당 글에서는 react-native 환경에서 Modal 팝업에서 팝업 외에 화면을 반투명 처리를 하여 뒤에 화면이 보이도록 하는 방법에 대해 알아봅니다.
1) Modal 태그 뒷 배경 불투명 처리 방법
💡Modal 태그 뒷 배경 투명 처리 방법
- Modal 팝업이 띄어지고 화면상에 출력이 될 때, 뒤에 배경을 반투명 처리를 하여서 팝업임을 나타내기 위해서 사용이 되는 방법입니다.
Modal · React Native
The Modal component is a basic way to present content above an enclosing view.
reactnative.dev
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
The Modal component is a basic way to present content above an enclosing view.
reactnative.dev
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. 결과화면
💡 결과화면 : 모달 팝업 출력되기 이전
💡 결과화면 : 모달 팝업 출력
- 팝업이 출력되고 뒤에 내용은 불투명 형태로 출력이 됨을 확인하였습니다.
오늘도 감사합니다. 😀
반응형