크로스 플랫폼 - Alert dialog

앱 개발을 하면서 가장 많이 쓰이는 기능 중 하나인 alert dialog를 띄워 봅니다.

 

Alert component를 react-native에서 import합니다. 

 

showMessage: false //Alert dialog의 유무를 확인하는 state를 정의

 

showAlert() 함수를 정의하여 Alert.alert로 dialog를 띄울 수 있도록 합니다. 

 

요번 예제에서는 Alert.alert(제목, 메세지, dialog button) 형식으로 기본적인 dialog 모양을 갖추도록 합니다. 

 

static alert(title, message?, buttons?, options? type?)

공식 가이드에 따르면 위와 같이 추가적인 옵션({cancelable:false})을 파라미터로 전달할 수 있습니다. 

 

코드에서 정의한 Show Message 버튼을 누르면 showMessage state를 true로 변경하여 render가 호출 되고 true인 경우 Showing message -success 텍스트가 나타나도록 합니다. 

 

iOS용 alert dialog와 android용 alert dialog