[React-Native] 간단한 Modal 구현

안녕하세요 세히이 입니다 이번에는 아이콘 클릭 시 Modal 을 띄워보았어요 :)

종 아이콘을 누르면 

 

모달 창으로 넘어가는 형태입니다 !

 

modal의 초기값은 false

 this.state = {
          modal: false
          }

 

 

아이콘을 눌렀을 때 호출 될 함수

handleModal = () => {
        this.setState({
          modal: this.state.modal ? false : true,
        });
      };

 

 

엠카즈 로고 옆의 종 아이콘을 눌렀을 때 TouchableOpacity 버튼기능을 사용하여 onpress 되었을 때 handleModal 호출

 <Text style={styles.textStyle}>엠카즈 로고                           <TouchableOpacity onPress={this.handleModal}>
                <Icon name="notifications" size={20} color="white" />
              </TouchableOpacity></Text>

 

 

• React-Native에서 Button 보다 TouchableOpacity 를 사용하는 이유는                                                                    Button 컴포넌트는 안드로이드와 ios에서 다르게 보이기 때문에 관리하는데에 어려움이 있어서라고 합니다

 

Modal 창 코드로 뒤로가기는 아이콘을 통해 만들었습니다

<Modal visible={this.state.modal}>
                    <TouchableOpacity onPress={this.handleModal} style={{backgroundColor:'#fff',}}>
                        <Icon name={"chevron-left"} size={30} color="black" />
                    </TouchableOpacity>
                    <Text>모달 창입니다 </Text>
                </Modal>

 

결과화면

 

Modal 구현을 해보고 싶어서 간단하게 만들어보았는데

navigation 요소 중 stack을 이용하여 아이콘을 눌렀을 때 새 창으로 가도록 만들어주는 것이 더 좋을 것 같다고 생각했습니다. 굳이 이렇게 만들 필요성을 못 느꼈달까...? 다음엔 Modal 을 꼭 사용하여야 부분에 사용해보려구 합니다 !!