[ReactNative] Modal

Modal : 화면 가장 위에 표시될 레이어

광고를 띄워 뒤로 돌아가지 못하게하기 , 오류가 났을때 경고창을 띄워 작업을 일시 중단시키기 등등에 사용된다 

 

 

modal.js를 일단 생성합니다. 그 후 App.js에 modal.js를 임포트 해줍니다. 

여기까지는 항상하던거니까 생략!

 

modal IMPORT

import { Modal} from 'react-native';

마찬가지로 modal을 import해줍니다.

 

Modal tag

Modal Tag  를 사용하여 내부에 텍스트를 넣어두고 테스트해봅시다.

모달에는 거의 필수적인 property가 있는데 바로 visible입니다 

여기에 해당하는 값이 true일 때만 modal이 띄워집니다. 

일단 true로 설정하고 해보겠습니다.

class ModalComponent extends Component {
render() {
    return (
      <View style={{width: '100%'}}>
        <Modal visible={true}>
          <View style={{marginTop: 50, backgroundColor: 'green'}}>
            <Text> This is modal content</Text>
          </View>
        </Modal>
      </View>
    );
  }
}

 

결과)

 

모달을 제대로 사용하기 위해서는 visible의 true false값을 주어 모달을 띄우는 것을 조절해야합니다.

이를 위해 state와 state값을 true <-> false로 변경하는 기능을 하는 함수 와 함수를 실행하기위한 버튼을 만들어보도록 하겠습니다.

modal.js

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

import React, {Component} from 'react';
import {View, Text, StyleSheet, Modal, Button} 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={'show modal'} onPress={this.handleModal} />

        <Modal visible={this.state.modal}>
          <View style={{marginTop: 50, backgroundColor: 'green'}}>
            <Text> This is modal content</Text>
          </View>
        </Modal>
      </View>
    );
  }
}

const styles = StyleSheet.create({});

export default ModalComponent;

 

modal의 visible값을 state로 변경해주고,

버튼을 생성한 후 누르면 handleModal(true<->false)가 되도록 합니다. 

 

 

 app.js에서 불러와 실행하는 부분은 생략!

버튼 누르기전	버튼 누른 이후

버튼을 누르면 모달이 보이는 것을 확인할 수 있습니다!

(참고로 모달은 위에서 언급했듯 가장 상위에 보여지는 레이어 이므로 당연히 버튼이 가려지게 됩니다)

 

이번엔 아직 이제 이전으로 돌아가는/끄는버튼이 존재하지 않습니다. 

 

 

 

modal close

그것을 만들어 보도록 하겠습니다.

그냥 모달 태그안에 버튼을 복사해 넣으면됩니다. title은 조금 바꾸어줬습니다(close modal).

부르는 함수는 같기 때문에 기능 자체는 동일합니다. true<->false

<View style={{width: '100%'}}>
        <Button title={'show modal'} onPress={this.handleModal} />

        <Modal visible={this.state.modal}>
          <View style={{marginTop: 50, backgroundColor: 'green'}}>
            <Text> This is modal content</Text>
          </View>
          <Button title={'close modal'} onPress={this.handleModal} />
        </Modal>
</View>
      

 

버튼을 누르면 원래 창으로 돌아갑니다

 

 

Property 

animationType : none / slide / fade 를 가지며, 모달이 뜨는 방법을 정의함 (슬라이드해서 올라오는지, 점점 선명해지며 뜨게되는지)

onShow : 모달 창이 뜨면 트리거되는 property

 

 

여기까지 리액트 네이티브의 컴포넌트를 다루어보았습니다.

컴포넌트는 정말 많고, 프로퍼티도 정말 많으니 공식사이트를 참고하시는게 좋을 것 같습니다!