해당 글은 react native를 expo로 작업한 내용을 기반으로 작성했습니다.
오늘은 리액트 네이티브를 활용하여 모달창을 만들어볼 예정이다.
모달창이란!
여기서 모달창이란, 기존에 존재하는 화면 위에 레이어를 깔아 창을 띄우는 것을 의미한다. 기존 화면과 분리된 화면이 아닌 부모-자식관계를 갖는다.
여기서 비슷한 개념으로는 팝업창이 있고, 팝업창은 모달창과 달리 화면 위해 새로운 화면을 띄운다는 것에서 차이가 있다.
개념을 설명한 이유는 나도 처음에 뭔지 몰라서 찾아보았기 때문이다.
나는 한참을 헤매긴 했지만 모달창을 만드는 방법은 의외로 쉬웠다!
기본 설치
npm install react-native-simple-modal --save
모달창을 편리하게 만들 수 있도록 돕는 모듈을 설치한다.
모달창 컴포넌트 생성
이전에 만들어두었던 screens 파일 안에 모달창 js를 하나 더 만들어준다.
코드 작성(모달창)
- 설치해둔 모듈을 사용하기 위해 import 해준다.
import Modal from 'react-native-simple-modal';- 모달창을 만들어준다. 모달창을 띄우기 위해서 필요한 요소는 우선, 모달창을 띄우기 위해 부모 화면에서 띄울 버튼, 그리고 버튼을 누르면 나오는 모달창, 모달창에서 누르면 모달창을 닫을 버튼. 크게 3가지로 나눌 수 있다.
export default class Modall extends React.Component {
state ={open : false}; //모달창의 열림여부를 판단해주는 상태변수를 만든다.
render() {
return (
<View style={styles.container}> //가장 큰 컨테이너
<TouchableOpacity onPress={() => this.setState({open: true})}> //누르면 모달창을 열어주는 버튼
<Text style={styles.buttontext}>얏호!</Text>
</TouchableOpacity>
<Modal //모달창
offset={this.state.offset}
open={this.state.open} //상태가 오픈이어야함.
modalDidOpen={() => console.log('modal did open')} //모달이 열릴경우 콘솔창에 안내문을 띄운다.
modalDidClose={() => this.setState({open: false})} //모달창을 닫을 경우, 열림 여부를 변경시킨다.
style={{alignItems: 'center'}}>
<View> //모달창에서 보여줄 화면 꾸미기
<Text style={{fontSize: 20}}>모달창이요!</Text>
<Text style={{fontSize: 20}}>너무 어려워요!</Text>
<TouchableOpacity style={{margin: 3}} onPress={() => this.setState({open: false})}> //누르면 모달창을 닫아주는 버튼
<Text style={styles.text}>닫으시요</Text>
</TouchableOpacity>
</View>
</Modal>
</View>
);
}
}- *여기서 주의할 점은, 해당 코드를 작성할 때, 코드를 export하는 맨 윗줄을 주의해야한다. 내가 이전에 작성한 화면 이동 코드처럼 마지막에 export를 처리하는 경우에는, 위처럼 상태나 render()함수 등을 사용할 수 없다. (왜인지는, 모르,,겠다 죄송. 찾아보겠다!)
내가 이놈 때문에 얼마를 헤맨 건지..
- 해당 모달창을 만들면서 넣을 텍스트나 뷰, 모달 등에 넣어줄 스타일을 만들어준다.
const styles = StyleSheet.create({
container: {
zIndex:3,
position:'absolute',
height:'100%',
width:'100%',
justifyContent:"center",
alignContent:"center",
alignItems:"center",
paddingTop: 50
},
buttontext:{
position:'relative',
left:170,
bottom:350,
fontSize:20,
},
text:{
position:'relative',
fontSize:15,
fontWeight:'700',
left:'40%',
}
})
자유롭게 작성해도 좋으나, 주의할 점은, 가장 큰 컨테이너의 스타일에서 크기를 모두 100%로 만들어주는 것이다. 물론 모달창을 작게 띄우려면 원하는 대로 바꾸면 된다.
모달창을 삽입할 창의 코드 작성
모달창에 대한 코드 작성을 완료하였다면, 이를 화면에 적용시켜야 한다.
- 모달창을 띄울 화면의 js로 이동하여 모달 창의 코드를 불러온다.
import Modall from "./Modall";- 가장 큰 컴포넌트 바로 다음에 모달창을 불러준다.
</Text>
</View>
<Modall/>
</View>
);
};
이렇게 말이다!
그럼 끝이 난다!
자기소개 창이라서,, 밑을 보여주긴 뭐하고,, 어쨌든 나는 메인화면에서 보이는 상단의 얏호!를 누르면 모달창이 나오도록 만들어보았다.
이렇게 간단한(?) 간단한가? 모르겠다. 어쨌든 참 오래 많이도 헤맸다. 구글에다 검색하고 한 3페이지까지 하나하나 다 들어가보면서 구글링 했던 것 같다. 사람마다 작성한 코드나 사용하는 모듈, 버전들이 다 다르다보니까 하나만 참고해서 해결되지 않는 부분들이 참 많은 것 같다. 리액트 네이티브를 공부하고 있는 많은 사람들,, 파이팅,,!!!!!!!
