如何在 ReactNative 中使用警報對話框？

警報元件有助於顯示一個對話框，即向使用者彈出一個帶有標題、訊息、按鈕的彈出窗口，以便根據顯示的訊息了解使用者的確認。

基本元件警報如下-

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

要使用警報元件，您需要如下匯入它-

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 事件，該事件顯示一條控制台訊息。最後是選項參數，它可以用來控制彈出視窗的行為。在 Android 上，預設情況下，如果在彈出視窗邊界外單擊，彈出視窗將關閉。要停用它，您可以使用 { cancelable: false } 作為選項參數。當您點擊彈出區域之外時，由於可取消設定為 false，它不會關閉。

在 iOS 中，您可以指定任意數量的按鈕，但在 Android 中，您可以使用三個按鈕。 Android 中的三個按鈕具有中性、消極和積極按鈕的概念 -

• 如果指定一個按鈕，它將類似於“積極” ' 例如“確定”。

• 如果有兩個按鈕，第一個為“負”，第二個為“正”。例如“取消”和“確定”。 < /p>

• 如果是三個按鈕，則為「中性」、「消極」、「積極」。例如「稍後」、「取消」和「確定」

  < /li>

這是一個顯示警報元件工作原理的工作範例-

範例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;

輸出

範例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中文網其他相關文章！