[리액트 네이티브] react native 확인 취소 알림창(Alert) 띄우기

react native를 개발할 때

알림창, 모달창을 가장 많이 띄우게 될 것인데

왜냐하면 사용자에게 현재 어떤 상황인지 알리는 방식도 있으며 사용자가 원하는 것을 수행하기 위해서는 예.아니오 등 여러 선택지를 제공해 줘야한다

 

이럴때 가장 많이 사용하는 게 

Alert창이다

 

흔히 우리가 알고 있는 알림창인데

해당 알림창의 버튼을 클릭할 때마다 이벤트를 발생시키려면 일반 Alert창이면 안된다

 

그래서 알림창 커스텀이라고 생각하면 되는데

 

Alert.alert(
      "산책 끝",
      "산책을 끝내려면 확인을 눌러 카메라를 실행하여 사진찍어주세요(취소 시 적립이 안되고 저장되지 않습니다)",
      [
        // The "Yes" button
        {
          text: "사진찍기",
          onPress: () => {
            setStart(true)
            // 카메라키기


            setPhotoModal(true) // 
            console.log('사진찍기')
          },
        },
        // The "No" button
        // Does nothing but dismiss the dialog when tapped
        {
          text: "취소",
        },
      ]
    );

위 코드를 넣으면 된다

 

최상단 제목

내용 부가 설명

배열 안에 넣은것은 왼쪽 오른쪽 버튼을 생성하기 위해서 일것이다.

text : 원하는 글 내용

onPress : 흔히 알고 있는 클릭했을 때 이벤트 발생 내용

 

 

즉,

Alert.alert( " 상단 제목 ", "중간 부가설명 내용 " ,

  [ 

    { text : 글 내용, onPress: ()=> { 발생 이벤트  }, },

    { text : 글 내용, onPress: ()=> { 발생 이벤트  }, }

]);

 

이렇게 정리할 수 있다.

 

 

다음에 촬영한 사진이 있으면,,, 첨부하겠습니당

 

 

https://www.kindacode.com/article/how-to-create-a-confirm-dialog-in-react-native/

How to Create a Confirm Dialog in React Native - KindaCode