React Native: 모달(Modal), 이미지(Image)

💡 모달(Modal)

• 내장된 모달 컴포넌트 사용
  • visible 속성: boolean 값에 따라 모달이 나타날지 말지 (props.visible은 boolean 값)
  • animationType 속성: none, fade, slide로, 모달창이 나타나는 애니메이션 정의

      import { Modal } from "react-native";

      <Modal visible={props.visible} animationType="slide">

• 모달 열고 닫는 함수를 이용하여 모달 제어

  const [modalIsVisible, setModalIsVisible] = useState(false); // 모달이 안 보이게끔 초기 상태 설정

  function startAddGoalHandler() {
    setModalIsVisible(true); // 함수 실행 시, 모달이 열림
  }

  function endAddGoalHandler() {
    setModalIsVisible(false); // 함수 실행 시, 모달이 닫힘
  }

💡 이미지(Image)

• 내장된 이미지 컴포넌트 사용 (셀프 클로징 컴포넌트의 형태)
  • source: 이미지 경로로, require('상대경로')과 함께 사용 (require 안에 들어가는 경로는, require가 존재하는 파일 기준에서의 상대 경로 -> 만약 폴더 안에 있다면 ..를 이용하여 상위 폴더로 이동해야 함)

      import { Image } from "react-native";
      
      <Image
          style={styles.image}
          source={require("../assets/image/goal.png")}
        />