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

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

기본 컴포넌트인 Alert는 다음과 같습니다. -

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

Alert 컴포넌트를 사용하려면 다음과 같이 import해야 합니다. -

import { Alert } from 'react-native';

팝업 창을 가져오려면 Alert.alert() 함수를 호출하면 됩니다. Alert()에는 제목, 메시지, 버튼, 옵션이라는 네 가지 매개변수가 있습니다. 제목은 필수 매개변수이고 나머지 매개변수는 선택사항입니다.

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 이벤트에 대해 이벤트는 콘솔 메시지를 표시합니다. 마지막으로 팝업 창의 동작을 제어하는 ​​데 사용할 수 있는 options 매개변수가 있습니다. Android에서는 기본적으로 팝업 경계 외부를 클릭하면 팝업이 닫힙니다. 이를 비활성화하려면 옵션 인수로 { cancelable: false }를 사용할 수 있습니다. 팝업 영역 외부를 클릭하면 취소 가능이 false로 설정되어 있으므로 닫히지 않습니다.

iOS에서는 버튼을 원하는 만큼 지정할 수 있지만 Android에서는 세 개의 버튼을 사용할 수 있습니다. Android의 세 가지 버튼에는 중립, 부정 및 긍정적 버튼이라는 개념이 있습니다. -

• 버튼을 지정하면 '긍정' '예: '확인'과 같은 형태가 됩니다.

• 버튼이 2개라면 첫 번째는 '부정', 두 번째는 '긍정'입니다. 예를 들어 "취소" 및 "확인"입니다.

• 버튼이 3개 있으면 '중립', '부정', '긍정'입니다. 예: "나중에", "취소" 및 "확인"

다음은 경고 구성 요소의 작동 방식을 보여주는 작업 예입니다. -

예 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: &#39;center&#39;, margin: 15 }}>
         <Button
            title="Click Me"
            color="#9C27B0"
            onPress={testAlert}
         />
      </View>
   );
}
export default App;

Output

예 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: &#39;center&#39;, margin: 15 }}>
         <Button
            title="Click Me"
            color="#9C27B0"
            onPress={testAlert}
         />
      </View>
   );
}
export default App;

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

출력

위 내용은 ReactNative에서 경고 대화 상자를 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!