日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

警報組件有助于顯示一個對話框，即向用戶彈出一個帶有標(biāo)題、消息、按鈕的彈出窗口，以便根據(jù)顯示的消息了解用戶的確認。

基本組件警報如下 –

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

登錄后復(fù)制

要使用警報組件，您需要按如下方式導(dǎo)入它 –

import { Alert } from 'react-native';

登錄后復(fù)制

要獲取彈出窗口，您只需調(diào)用 Alert.alert() 函數(shù)。 Alert() 有四個參數(shù)，分別是標(biāo)題、消息、按鈕和選項。標(biāo)題是強制參數(shù)，其余參數(shù)是可選的。

這是一個關(guān)于如何使用 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 }
);

登錄后復(fù)制

這里的標(biāo)題是“嗨”，消息是“你想繼續(xù)嗎”，我想在對話框中顯示的按鈕是“稍后”、“取消”和“確定”。對于添加的每個按鈕 onPress 事件，該事件顯示一條控制臺消息。最后是選項參數(shù)，它可以用來控制彈出窗口的行為。在 Android 上，默認情況下，如果在彈出窗口邊界外單擊，彈出窗口將關(guān)閉。要禁用它，您可以使用 { cancelable: false } 作為選項參數(shù)。當(dāng)您點擊彈出區(qū)域之外時，由于可取消設(shè)置為 false，它不會關(guān)閉。

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

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

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

如果是三個按鈕，則為“中性”、“消極”、“積極”。例如“稍后”、“取消”和“確定”

這是一個顯示警報組件工作原理的工作示例 –

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

登錄后復(fù)制

輸出

示例 2：在 Android 中使用 {cancelable: true }

在下面的示例中，{cancelable: true } 與標(biāo)題、消息和按鈕一起使用。所以警報框?qū)⑷缦滤?–

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 }
);

登錄后復(fù)制

完整的工作示例如下 –

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;

登錄后復(fù)制

當(dāng)您點擊彈出區(qū)域之外時，它將關(guān)閉。

輸出

以上就是如何在 ReactNative 中使用警報對話框？的詳細內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！