Alert في React Native

يعرِض مربع حوارِ تنبيهٍ (alert dialog) بالعنوان والرسالة المحددين.

يُمكن اختياريًّا توفير قائمةٍ من الأزرار. يؤدي النقر فوق أي زر إلى إطلاق دالّةِ ردّ نداءِ ‎‎onPress‎‎ الخاصّة بالزر وإبعاد رسالة التنبيه. افتراضيًّا، سيكون زرُّ "OK" الزرَّ الوحيد.

هذه واجهة برمجة تطبيقاتٍ تعمل على كل من Android و iOS ويمكنُ لها إظهار تنبيهات ثابتة. لإظهار تنبيه يطالب المستخدم بإدخال معلومات، انظر ‎‎AlertIOS‎‎؛ إدخال النص في التنبيه أمر شائع على نظام iOS فقط.

مثال

مثال مكون دالة (Function Component):

import React, { useState } from "react";
import { View, StyleSheet, Button, Alert } from "react-native";

const App = () => {
  const createTwoButtonAlert = () =>
    Alert.alert(
      "Alert Title",
      "My Alert Msg",
      [
        {
          text: "Cancel",
          onPress: () => console.log("Cancel Pressed"),
          style: "cancel"
        },
        { text: "OK", onPress: () => console.log("OK Pressed") }
      ]
    );

  const createThreeButtonAlert = () =>
    Alert.alert(
      "Alert Title",
      "My Alert Msg",
      [
        {
          text: "Ask me later",
          onPress: () => console.log("Ask me later pressed")
        },
        {
          text: "Cancel",
          onPress: () => console.log("Cancel Pressed"),
          style: "cancel"
        },
        { text: "OK", onPress: () => console.log("OK Pressed") }
      ]
    );

  return (
    <View style={styles.container}>
      <Button title={"2-Button Alert"} onPress={createTwoButtonAlert} />
      <Button title={"3-Button Alert"} onPress={createThreeButtonAlert} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "space-around",
    alignItems: "center"
  }
});

export default App;

مثال مكون صنف (Class Component):

import React, { Component } from "react";
import { View, StyleSheet, Button, Alert } from "react-native";

class App extends Component {
  createTwoButtonAlert = () =>
    Alert.alert(
      "Alert Title",
      "My Alert Msg",
      [
        {
          text: "Cancel",
          onPress: () => console.log("Cancel Pressed"),
          style: "cancel"
        },
        { text: "OK", onPress: () => console.log("OK Pressed") }
      ]
    );

  createThreeButtonAlert = () =>
    Alert.alert(
      "Alert Title",
      "My Alert Msg",
      [
        {
          text: "Ask me later",
          onPress: () => console.log("Ask me later pressed")
        },
        {
          text: "Cancel",
          onPress: () => console.log("Cancel Pressed"),
          style: "cancel"
        },
        { text: "OK", onPress: () => console.log("OK Pressed") }
      ]
    );

  render() {
    return (
      <View style={styles.container}>
        <Button title={"2-Button Alert"} onPress={this.createTwoButtonAlert} />

        <Button
          title={"3-Button Alert"}
          onPress={this.createThreeButtonAlert}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "space-around",
    alignItems: "center"
  }
});

export default App;

منصة iOS

على نظام iOS يمكنك تحديد أي عددٍ من الأزرار. يمكن تمثيل الخيارات المتاحة عبر المتعدد AlertButtonStyle (انظر النوع في الأسفل).

منصة Android

على Android، يمكن تحديد ثلاثة أزرار على الأكثر. في Android هناك مفهوم الزر المحايد (neutral) والسالب (neutral) والإيجابي (positive):

• إذا حددت زرًا واحدًا، فسيكون الزر "الإيجابي" ("موافق" مثلًا).
• تحديد زرّين يعني "سالب"، و"إيجابي" ("إلغاء" و"موافق" مثلًا).
• ثلاثة أزرار تعني "محايد"، و"سالب"، و"إيجابي" ("لاحقًا"، و"إلغاء"، و"موافق" مثلًا).

يمكن إبعاد التنبيهات على Android من خلال النقر خارج مربع التنبيه، وهي معطلة افتراضيًا ويمكن تفعليها من خلال توفير مُعامل ‎‎options‎‎ اختياريّ مع تعيين القيمة ‎‎true للخاصية ‎‎cancelable‎‎‎‎، على الشكل ‎‎{ cancelable: true }‎‎.

يمكن معالجة حدث الإلغاء بتوفير رد النداء onDIsmiss ضمن المعامل optoins.

إليك المثال التالي (تجربة حية):

import React from "react";
import { View, StyleSheet, Button, Alert } from "react-native";

const showAlert = () =>
  Alert.alert(
    "Alert Title",
    "My Alert Msg",
    [
      {
        text: "Cancel",
        onPress: () => Alert.alert("Cancel Pressed"),
        style: "cancel",
      },
    ],
    {
      cancelable: true,
      onDismiss: () =>
        Alert.alert(
          "This alert was dismissed by tapping outside of the alert dialog."
        ),
    }
  );

const App = () => (
  <View style={styles.container}>
    <Button title="Show alert" onPress={showAlert} />
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  }
});

export default App;

التوابع

‎‎alert()‎‎

static alert(title, message?, buttons?, options? type?)

المعاملات:

الاسم	النوع	مطلوب	الوصف
title	سلسلة نصية	نعم	عنوان المربع المنبثق، استعمل القيمة null لإخفاء ترويسة العنوان.
message	سلسلة نصية	لا	رسالة مخصصة اختيارية تُعرض أسفل العنوان.
buttons	أزرار Button	لا	مصفوفة اختيارية تحوي أزرار الضبط.
options	النوع Options (انظر في الأسفل)	لا	ضبط اختياري لمربع التنبيه لمنصة Android.

‎‎alert()‎‎

static prompt(title, message?, callbackOrButtons?, type?, defaultValue?, keyboardType?)

تنشئ نافذة منبثقة prompt لإدخال بعض النصوص على شكل نافذة تنبيه منبثقة.

المعاملات:

الاسم	النوع	مطلوب	الوصف
title	سلسلة نصية	نعم	عنوان المربع المنبثق، استعمل القيمة null لإخفاء ترويسة العنوان.
message	سلسلة نصية	لا	رسالة مخصصة اختيارية تُعرض أسفل العنوان.
callbackOrButtons	أزرار Button	لا	إن كانت مصفوفة اختيارية، فستُضبط الأزرار بناءً على محتوى المصفوفة المعطى.
	دالة	لا	إن كان دالة، فسيُستدعَى مع القيمة المدخلة بالشكل ‎(text: string) => void عندما يضغط المستخدم على زر OK أو موافق.
type	النوع AlertType (انظر في الأسفل)	لا	يضبط نوع عنصر الإدخال.
defaultValue	سلسلة نصية	لا	قيمة النص الافتراضي في عنصر الإدخال.
keyboardType	سلسلة نصية	لا	نوع لوحة المفاتيح لأول حقل نصي (إن وجد). تأخذ إحدى أنواع keyboardType من المكون TextInput.

مصادر

• صفحة Alert في توثيق React Native الرسمي.