[react-native] 버튼을 누르면 alert 창을 띄워보자(ios)

기존 하던 프로젝트를

 

이제 앱으로 만들기로 했다

 

react-native 처음 만져봤다

 

react와 똑같이 class형과 functional형이 있는데 난 class형을 사용했다 

 

---

버튼을 누른 후

 

alert창이 뜨게 하고 싶다 우선 버튼을 만들자 (react와 비슷한점이 많다)

<Button title={"학생 체크"} onPress={this.goAlert} />
//title : 표시 될 문자
//onPress가 버튼을 눌렀을 때의 이벤트이다 react와 조끔 다르니까 주의하자

 

아이폰스러운 버튼이다 

 

RN(react-native)에서 제공해주는 api 를 사용해보자 

 

import { View, StyleSheet, Button, Alert } from "react-native";

Alert api를 가져온다

 

 

 

onPress 이벤트 발생 시 실행되는 함수를 만들자

goAlert = () =>
     Alert.alert(                    // 말그대로 Alert를 띄운다
      "햑생인가요?",                    // 첫번째 text: 타이틀 제목
      "ㄹㅇ",                         // 두번째 text: 그 밑에 작은 제목
      [                              // 버튼 배열
        {
          text: "아니요",                              // 버튼 제목
          onPress: () => console.log("아니라는데"),     //onPress 이벤트시 콘솔창에 로그를 찍는다
          style: "cancel"
        },
        { text: "네", onPress: () => console.log("그렇다는데") }, //버튼 제목
                                                               // 이벤트 발생시 로그를 찍는다
      ],
      { cancelable: false }
    );

첫 text가 제목이고 두번째 text가 작은 글씨다

 

배열에 두개의 버튼을 만들어 주면 다음과 같이 나오며, onPress시 그에 맞는 함수가 호출 된다

 

 

 

"네"를 눌러보자 

 

그렇단다 

 

" 이벤트 발생 -> alert창 -> 버튼 클릭시 함수실행 "을 알아 봤다

 

 

 

버튼을 넣는 배열에 더 추가하면 어째 될까

createTwoButtonAlert = () =>
    Alert.alert(
      "햑생인가요?",
      "ㄹㅇ",
      [
        {
          text: "아니요",
          onPress: () => console.log("아니라는데"),
        },
        { text: "네", onPress: () => console.log("그렇다는데") },
        { text: "교수입니다", onPress: () => console.log("Professor") },
        
        // 한개의 선택지를 더 추가해 줬다
        
        
      ],
      { cancelable: false }
    );

 

위와같이 정렬 된다 

 

신기하다

 

 

아참 style은 다음과 같이 줬다

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "space-around",
    alignItems: "center"
  }
});

---

reactnative.dev/docs/alert

 

여기가 더 잘 돼있다.

 

RN도 재밌겠다