[React Native] React Native Component - 13. Modal

 

---

2022.01.11 - [React Native/Basic] - [React Native] React Native Component - 1. Intro

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 2. View, Text

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 3. Style

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 4. TouchEvent

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 5. Button

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 6. ScrollView

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 7. TextInput

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 8. Button, ScrollView, TextInput 심화

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 9. Picker

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 10. Slider

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 11. ActivityIndicator

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 12. Image

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 13. Modal

---

 

---

13. Modal

모달은 화면 가장 위에 표시될 레이어이다.

유저로 하여금 광고를 꼭 보게끔 광고가 끝날 때까지 뒤로 돌아갈 수 없는 화면을 띄운다던지, 오류가 발생했을 때 다른 작업을 하지 못하게 경고창을 띄운다던지 하는 작업을 할 때 쓰이는 컴포넌트이다.

 

버튼으로 handleModal 실행하고 Modal 내에서도 handleModal 을 실행하는 버튼을 추가하면 Modal 창으로 갔다가 돌아가는 기능을 구현할 수 있다.

 

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, {Component} from 'react';
import {View, Text, StyleSheet, Button, Modal} from 'react-native';

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

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

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

        <Modal
          visible={this.state.modal}
          animationType={'slide'} //slide fade
          onShow={() => alert('Warning!!!')}>
          <View style={{marginTop: 60, backgroundColor: 'red'}}>
            <Text>This is modal content</Text>
          </View>

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

export default ModalComponent;

animationType - Modal 창이 나타나고 사라지는 방식. slide와 fade가 있다.

onShow - Modal 창이 떴을 때 트리거되는 프로퍼티.

 

---

참고 자료

https://www.inflearn.com/course/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C-%EA%B8%B0%EC%B4%88/dashboard

iOS/Android 앱 개발을 위한 실전 React Native - Basic - 인프런 | 강의