ReactNative에서 경고 대화 상자를 사용하는 방법은 무엇입니까?

Alert 구성 요소는 표시된 메시지를 기반으로 사용자의 확인을 알 수 있는 제목, 메시지, 버튼이 포함된 팝업과 같은 대화 상자를 표시하는 데 도움이 됩니다.

Alert의 기본 구성 요소는 다음과 같습니다. -

Alert.alert('yourtile', 'yourmessage', [yourbuttons], ‘options’)

Alert 구성 요소를 사용하려면 다음과 같이 가져와야 합니다. -

import { Alert } from 'react-native';

팝업을 얻으려면 Alert.alert() 함수를 호출하기만 하면 됩니다. alert()가 취하는 4개의 매개변수가 있으며 제목, 메시지, 버튼 및 옵션입니다. 제목은 필수 매개변수이고 나머지는 선택사항입니다.

다음은 Alert.alert() −

Alert.alert(
   "Hi",
   "Do you want to continue?",
   [
      {
         text: "Later",
         onPress: () => console.log("User pressed Later")
      },
      {
         text: "Cancel",
         onPress: () => console.log("Cancel Pressed"),
         style: "cancel"
      },
      { text: "OK",
         onPress: () => console.log("OK Pressed")
      }
   ],
   { cancelable: false }
);

제목은 '안녕하세요', 메시지는 '계속하시겠습니까', 대화 상자에 표시하고 싶은 버튼은 나중에, 취소 및 확인입니다. 각 버튼에 대해 콘솔 메시지를 표시하는 onPress 이벤트가 추가됩니다. 마지막은 옵션 매개변수입니다. 팝업의 동작을 제어하는 ​​데 사용할 수 있습니다. Android에서는 기본적으로 팝업 경계 외부를 클릭하면 팝업이 닫힙니다. 이를 비활성화하려면 { cancelable:false }를 옵션 매개변수로 사용할 수 있습니다. 팝업 영역 외부를 클릭하면 취소 가능이 false로 설정되어 있으므로 닫히지 않습니다.

iOS의 경우 원하는 수의 버튼을 지정할 수 있지만 Android의 경우 세 개의 버튼을 사용할 수 있습니다. Android의 세 개의 버튼에는 중립, 음수 및 양수 버튼의 개념이 있습니다. 예를 들어 -

• 하나의 버튼이 지정되면 '확인'과 같이 '양수'와 같습니다.

• 두 개의 버튼이 있는 경우 첫 번째는 '음수'이고 두 번째는 '양수'입니다. 예를 들어 '취소' 및 '확인'입니다.

• 세 개의 버튼이 있으면 '중립', '음수', '양수'가 됩니다.예:'나중에', '취소', '확인'

다음은 Alert 구성 요소의 작동을 보여주는 작업 예입니다 -

예시 1:경고 상자 표시

import React from 'react';
import { Button, View, Alert } from 'react-native';
const App = () => {
   const testAlert = () =>
   Alert.alert(
      "Hi",
      "Do you want to continue?",
      [
         {
            text: "Later",
            onPress: () => console.log("User pressed Later")
         },
         {
            text: "Cancel",
            onPress: () => console.log("Cancel Pressed"),
            style: "cancel"
         },
         { text: "OK",
            onPress: () => console.log("OK Pressed")
         }
      ],
      { cancelable: false }
   );
   return (
      <View style={{flex :1, justifyContent: 'center', margin: 15 }}>
         <Button
            title="Click Me"
            color="#9C27B0"
            onPress={testAlert}
         />
      </View>
   );
}
export default App;

출력

예시 2:Android용 { cancelable:true } 사용

아래 예에서 { cancelable:true }는 제목, 메시지 및 버튼과 함께 사용됩니다. 따라서 경고 상자는 다음과 같이 표시됩니다. -

Alert.alert(
   "Hi",
   "Do you want to continue?",
   [
      {
         text: "Later",
         onPress: () => console.log("User pressed Later")
      },
      {
         text: "Cancel",
         onPress: () => console.log("Cancel Pressed"),
         style: "cancel"
      },
      { text: "OK",
         onPress: () => console.log("OK Pressed")
      }
   ],
   { cancelable: true }
);

전체 작업 예는 다음과 같습니다 -

import React from 'react';
import { Button, View, Alert } from 'react-native';
const App = () => {
   const testAlert = () =>
   Alert.alert(
      "Hi",
      "Do you want to continue?",
      [
         {
            text: "Later",
            onPress: () => console.log("User pressed Later")
         },
         {
            text: "Cancel",
            onPress: () => console.log("Cancel Pressed"),
            style: "cancel"
         },
         { text: "OK",
            onPress: () => console.log("OK Pressed")
         }
      ],
      { cancelable: true }
   );
   return (
      <View style={{flex :1, justifyContent: 'center', margin: 15 }}>
         <Button
            title="Click Me"
            color="#9C27B0"
            onPress={testAlert}
         />
      </View>
   );
}
export default App;

팝업 영역 외부를 클릭하면 닫힙니다.

출력