[React-Native 기초 강의] Modal

Modal

- 화면 가장 위에 표시될 Layer

ex) 유저가 광고를 꼭 보게끔 광고가 끝날 때까지 뒤로 돌아갈 수 없는 화면 생성,

      오류가 발생했을 때 다른 작업 하지 못하게 경고창 띄우기

 

 

---

 

- 일단 이전과 똑같이 ... App.js에서 해당 js 파일 불러오고, 아래에 <Modal> 태그를 집어 넣고 시작

 

 

• handleModal : Modal의 상태가 true인지 false인지, 즉 화면 가장 위에 있는 layer을 만들지 안 만들지 결정

class ModalComponent extends Component {
    state = {
        modal: false
    }

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

- 초기 modal 값을 false로 두고,

- handleModal 함수에서 modal 값이 true이면 false로, false이면 true로 바꾸는 작업을 한다.

 

    render() {
        return (
            <View stlye={{width: '100%'}}>
                <Button
                    title="Open Modal"
                    onPress={this.handleModal}
                />

                <Modal>
                    <View style={{
                        marginTop: 60,
                        backgroundColor: 'red'
                    }}>
                        <Text>This is modal content</Text>
                    </View>
                </Modal>
            </View>

        )
    }

 

- <View> 태그 안에 <Button>을 생성하였지만 버튼은 보이지 않고, <Modal> 안에 만든 View만 보인다.

  -> 아무 것도 하지 않았는데 Modal 화면은 보이네 ..? -> 우리가 state 함수를 안 썼기 때문!!!

 

 

<Modal
    	visible={this.state.modal}
>

- visible이 ture여야지만 Modal이 보인다.

- state.modal 초기값이 false이므로, 버튼을 한 번 눌러야 true로 바뀌어 Modal 화면이 보일 것이다.

 

- but, 아직 뒤로 돌아갈 방법이 없다.

 

<Button
		title="Go Back"
		onPress={this.handleModal}
/>
</Modal>

- 아래에 <Button> 하나 더 만들기

- handleModal 함수를 통해 false -> true -> false -> ture ... 가 반복된다.

 

 

 

---

 

 

• animationType

- slider : 모달 창이 아래에서 위로 나옴

- fade : fade 효과로 모달 창이 뜸

- none : default 값

<Modal
      visible={this.state.modal}
      animationType={'slider'} // slider, fade
>

 

 

• onShow : 모달 창이 떴을 때 trigger되는 property

<Modal
      visible={this.state.modal}
      animationType={'slider'} // slider, fade
      onShow={()=>alert('Warning!!!')}
>

- 간단히 alert 창으로 확인해보기