안녕하세요 코더입니다..!!

모바일 앱 개발에서는 매력적인 UI만 있으면 됩니다. 사용자의 관심을 끌며 모두에게 사랑받는 UI. 이 블로그에서는 React Native의 이러한 기능에 대해 이야기할 것입니다. 버튼을 클릭할 때 화면 상단에 메시지 상자가 어떻게 표시되는지 궁금합니다. 이것이 React Native의 Modal 기능입니다. React Native를 사용하여 Modal View를 만드는 방법을 알아보겠습니다. 자리를 잡고 커피를 마시며 해킹을 시작합니다.

설정 및 설치

1. 디렉토리를 만들고 탐색합니다.
2. 이 디렉토리에서 명령 프롬프트 또는 터미널을 열고 다음 명령을 실행합니다. expo init Modal
3. 빈 템플릿을 선택하고 다운로드를 진행합니다.

React Native Expo의 모달 코드

앱.js

import React, { useState } from 'react';
import { Alert, Modal, StyleSheet, Text, TouchableHighlight, View } from 'react-native';
export default function App() {
  const [modalVisible, setModalVisible] = useState(false);
  return (
    <View style={styles.centeredView}>
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          Alert.alert('Modal has been closed.');
        }}>
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text style={styles.modalText}>Hello Coders..!!</Text>
<TouchableHighlight
              style={{ ...styles.openButton, backgroundColor: '#2196F3' }}
              onPress={() => {
                setModalVisible(!modalVisible);
              }}>
              <Text style={styles.textStyle}>Hide Modal</Text>
            </TouchableHighlight>
          </View>
        </View>
      </Modal>
<TouchableHighlight
        style={styles.openButton}
        onPress={() => {
          setModalVisible(true);
        }}>
        <Text style={styles.textStyle}>Show My Modal</Text>
      </TouchableHighlight>
    </View>
  );
}

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 22,
  },
  modalView: {
    margin: 20,
    backgroundColor: 'white',
    borderRadius: 20,
    padding: 35,
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  openButton: {
    backgroundColor: '#F194FF',
    borderRadius: 20,
    padding: 10,
    elevation: 2,
  },
  textStyle: {
    color: 'white',
    fontWeight: 'bold',
    textAlign: 'center',
  },
  modalText: {
    marginBottom: 15,
    textAlign: 'center',
  },
});

멋지죠? 이제 animationType을 "slide"에서 "fade"로 변경합니다. 애니메이션 동작에 변화가 있는 것을 볼 수 있습니다. 여기에서 코드 부분을 완료했습니다. 어떤 종류의 어려움에 직면하면 댓글 섹션에 알려주십시오.

감사합니다.