[React-native CLI] Modal 구현하기, 모달 커스텀

모달화면을 구현하는 방법에 대해 설명하겠습니다.

 

구현 방법

---

모달 화면을 열고 닫을 수 있게 state를 설정해 주어야 됩니다.

  const [modalVisible, setModalVisible] = useState(false);

 

버튼을 클릭하면 모달 화면이 나오게 버튼을 생성해 줍니다.

클릭 시 modalVisible을 true로 바꾸어주면, 클릭시 모달 화면이 나오게 됩니다.

<Button onPress={()=>setModalVisible(true)} title={'모달 열기'} />

 

클릭시 모달화면이 나오기 위해 모달 컴포넌트를 만들어줘야 됩니다.

visible prop을 사용하여 모달이 열리거나 닫히도록 상태를 조절합니다.

onRequestClose prop은 모달이 닫힐 때 호출될 콜백 함수를 정의합니다.

 

그래서 visible에다가는 modalVisible을 넣어주고,

onRequestClose는 setModalVisible(false)를 콜백 함수로 넣어주면 됩니다.

<Modal
  visible={modalVisible}
  onRequestClose={() => {
    setModalVisible(false);
  }}>
  <View>
      <View>
        <Button onPress={()=>setModalVisible(false)} title={'모달 닫기'} />
      </View>
  </View>
</Modal>

이렇게만 작성하면 모달 열기 버튼 클릭 시 아래와 같은 화면이 나옵니다.

 

---

 

저희가 알고 있는 일반적인 모달화면은 아래와 같은 화면입니다.

 

이런 화면을 구현하기 위해서는 Modal을 커스텀해주어야 됩니다.

먼저 Modal이 가지고 있는 옵션에 대해 알아보도록 합시다.

 

Modal 옵션

---

animationType을 통해 애니메이션 타입을 설정할 수 있습니다.

1. none: 모달이 나타날 때 애니메이션이 없습니다. (기본값)
2. slide: 모달이 슬라이딩 애니메이션으로 나타납니다. 기본적으로 모달이 하단에서 위로 올라옵니다.
3. fade: 모달이 페이드 인/아웃 애니메이션으로 나타납니다. 배경은 투명하게 되며, 모달이 나타날 때부터 배경이 서서히 어두워집니다.

transparent를 true로 설정하면 배경이 투명해집니다.  (기본값은 false)

 

Modal 커스텀

---

 

Modal옵션까지 추가해서  화면을 구현해 보면 아래와 같이 코드를 수정하시면 됩니다.

  {/* 검정 배경 */}
  <View
    style={{
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: 'rgba(0, 0, 0, 0.7)',
    }}>
    {/* 콘텐츠 */}
    <View style={{padding: 20, width: 320, backgroundColor: '#fff'}}>
      <Text>내용을 클릭해주세요</Text>
      {/* 닫기 버튼 */}
      <Button onPress={() => setModalVisible(false)} title={'모달 닫기'} />
    </View>
  </View>