리액트 네이티브 팝업 만들기

Written on August 7, 2019

리액트 네이티브의 Modal 컴포넌트를 사용하면 간단한 팝업창을 만들 수 있다.

먼저, Modal 컴포넌트의 주요 props에 대해 알아보자.

  • visible : boolean 값으로, true일 때 Modal창이 렌더 된다.
  • animationType : Modal창이 나타나고 사라질 때 효과로, slide, fade, none으로 설정할 수 있으며, 디폴트 값은 none이다.
  • transparent : boolean 값으로, true일 때 Modal이 투명한 배경에 렌더된다.

Modal 컴포넌트의 transparent를 true 주고, Modal 컴포넌트 내부에 backgroundColor: rgba(0,0,0,0.3)를 가지는 View 컴포넌트를 만들어 주면, 반투명한 그림자를 가지는 모달을 만들 수 있다.

import React from "react";
import {
  Text,
  View,
  Modal,
  TouchableHighlight,
  StyleSheet,
  Dimensions
} from "react-native";
const Popup = props => {
  return (
    <Modal animationType="slide" transparent={true} visible={props.visible}>
      <View style={styles.modalBackground}>
        <View style={styles.modal}>
          <Text>This is Popup!</Text>
          <TouchableHighlight onPress={props.setModalVisible(false)}>
            <Text>Close</Text>
          </TouchableHighlight>
        </View>
      </View>
    </Modal>
  );
};
export default Popup;
const styles = StyleSheet.create({
  modalBackground: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "rgba(0,0,0,0.3)",
    width: Dimensions.get("window").width,
    height: Dimensions.get("window").height
  },
  modal: {
    width: "80%",
    height: "20%"
  }
});

부모 컴포넌트 만들기

import React from "react";
import {
  View,
  TouchableHighlight,
  Text
} from "react-native";
import Popup from './Popup';

class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            modalVisible: false
        };
    }
    setModalVisible = value => {
        this.setState({
            modalVisible: value
        })
    }
    render(){
        return (
            <View>
                <Popup visible={this.state.modalVisible} setModalVisible={this.setModalVisible} />
                <TouchableHighlight onPress={this.setModalVisible(true)}>
                    <Text>Open Popup</Text>
                </TouchableHighlight>
            </View>
        )
    }
};

export default Home;

👩🏻‍💻 배우는 것을 즐기는 프론트엔드 개발자 입니다
부족한 블로그에 방문해 주셔서 감사합니다 🙇🏻‍♀️

in the process of becoming the best version of myself