Home > Web Front-end > JS Tutorial > How to use alert dialog in ReactNative?

How to use alert dialog in ReactNative?

王林
Release: 2023-09-08 19:29:01
forward
1361 people have browsed it

The alert component helps to display a dialog box, that is, a pop-up window with a title, message, and buttons to the user to understand the user's confirmation based on the displayed message.

The basic component alert is as follows-

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

To use the alert component you need to import it as follows-

import { Alert } from 'react-native';
Copy after login

To get the popup you just call Alert.alert () function. Alert() has four parameters, namely title, message, button and option. The title is a mandatory parameter, the rest of the parameters are optional.

Here is a simple example on how to use 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 }
);
Copy after login

Here the title is "Hi" and the message is "Do you want to continue" and I want to add a message in the dialog box The buttons shown are Later, Cancel, and OK. For each button onPress event added, the event displays a console message. Finally, there is the options parameter, which can be used to control the behavior of the pop-up window. On Android, by default, a popup will close if clicked outside its boundaries. To disable it you can use { cancelable: false } as the options parameter. When you click outside the popup area, it won't close since Cancelable is set to false.

In iOS, you can specify any number of buttons, but in Android, you can use three buttons. Three buttons in Android have the concept of Neutral, Negative and Positive buttons -

  • If you specify a button, it will be something like "Positive" 'eg "OK".

  • If there are two buttons, the first one is "negative" and the second one is "positive". For example "Cancel" and "OK". < /p>

  • If there are three buttons, they are "Neutral", "Negative" and "Positive". For example "Later", "Cancel" and "OK"

    < /li>

This is a working example showing how the alert component works -

Example 1: Display of alert box

import React from &#39;react&#39;;
import { Button, View, Alert } from &#39;react-native&#39;;
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;
Copy after login

Output

如何在 ReactNative 中使用警报对话框?

##Example 2: Using {cancelable: true} in Android

In the following example, {cancelable: true } Used with titles, messages and buttons. So the alert box will look like this -

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 }
);
Copy after login

The complete working example is as follows -

import React from &#39;react&#39;;
import { Button, View, Alert } from &#39;react-native&#39;;
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;
Copy after login
When you click outside the popup area it will close.

Output

如何在 ReactNative 中使用警报对话框?

The above is the detailed content of How to use alert dialog in ReactNative?. For more information, please follow other related articles on the PHP Chinese website!

source:tutorialspoint.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template