عرض مصدر ReactNative/alert

<noinclude>{{DISPLAYTITLE:الواجهة Alert في React Native}}</noinclude>
يعرِض مربع حوارِ تنبيهٍ (alert dialog) بالعنوان والرسالة المحددين.

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

هذه واجهة برمجة تطبيقاتٍ تعمل على كل من Android و iOS ويمكنُ لها إظهار تنبيهات ثابتة. لإظهار تنبيه يطالب المستخدم بإدخال معلومات، انظر ‎‎<code>AlertIOS</code>‎‎؛ إدخال النص في التنبيه أمر شائع على نظام iOS فقط.
==مثال==
[https://snack.expo.dev/@hsoubwiki/alert-function-component-example مثال مكون دالة (Function Component)]:<syntaxhighlight lang="javascript">
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;
</syntaxhighlight>[https://snack.expo.dev/@hsoubwiki/alert-class-component-example مثال مكون صنف (Class Component)]:<syntaxhighlight lang="javascript">
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;
</syntaxhighlight>
==منصة iOS==
على نظام iOS يمكنك تحديد أي عددٍ من الأزرار. يمكن تمثيل الخيارات المتاحة عبر المتعدد <code>AlertButtonStyle</code> (انظر النوع في الأسفل).
==منصة Android==
على Android، يمكن تحديد ثلاثة أزرار على الأكثر. في Android هناك مفهوم الزر المحايد (neutral) والسالب (neutral) والإيجابي (positive):
* إذا حددت زرًا واحدًا، فسيكون الزر "الإيجابي" ("موافق" مثلًا).
* تحديد زرّين يعني "سالب"، و"إيجابي" ("إلغاء" و"موافق" مثلًا).
* ثلاثة أزرار تعني "محايد"، و"سالب"، و"إيجابي" ("لاحقًا"، و"إلغاء"، و"موافق" مثلًا).
[[تصنيف:ReactNative]]
يمكن إبعاد التنبيهات على Android من خلال النقر خارج مربع التنبيه، وهي معطلة افتراضيًا ويمكن تفعليها من خلال توفير مُعامل ‎‎<code>options</code>‎‎ اختياريّ مع تعيين القيمة ‎‎<code>true</code> للخاصية ‎‎<code>cancelable</code>‎‎‎‎، على الشكل ‎‎<code>{ cancelable: true }</code>‎‎.

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

إليك المثال التالي ([https://snack.expo.dev/@hsoubwiki/alert-android-dissmissable-example تجربة حية]):<syntaxhighlight lang="javascript">
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;
</syntaxhighlight>

==التوابع==
===‎‎<code>alert()</code>‎‎===
<syntaxhighlight lang="javascript">
static alert(title, message?, buttons?, options? type?)
</syntaxhighlight>المعاملات:
{| class="wikitable"
!الاسم
!النوع
!مطلوب
!الوصف
|-
|<code>title</code>
|سلسلة نصية
|نعم
|عنوان المربع المنبثق، استعمل القيمة null لإخفاء ترويسة العنوان.
|-
|<code>message</code>
|سلسلة نصية
|لا
|رسالة مخصصة اختيارية تُعرض أسفل العنوان.
|-
|<code>buttons</code>
|أزرار <code>[[ReactNative/button|Button]]</code>
|لا
|مصفوفة اختيارية تحوي أزرار الضبط.
|-
|<code>options</code>
|النوع <code>Options</code> (انظر في الأسفل)
|لا
|ضبط اختياري لمربع التنبيه لمنصة Android.
|}

=== ‎‎<code>prompt()</code>‎‎ ===
<syntaxhighlight lang="js">
static prompt(title, message?, callbackOrButtons?, type?, defaultValue?, keyboardType?)

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

المعاملات:
{| class="wikitable"
!الاسم
!النوع
!مطلوب
!الوصف
|-
|<code>title</code>
|سلسلة نصية
|نعم
|عنوان المربع المنبثق، استعمل القيمة null لإخفاء ترويسة العنوان.
|-
|<code>message</code>
|سلسلة نصية
|لا
|رسالة مخصصة اختيارية تُعرض أسفل العنوان.
|-
| rowspan="2" |<code>callbackOrButtons</code>
|أزرار <code>[[ReactNative/button|Button]]</code>
|لا
|إن كانت مصفوفة اختيارية، فستُضبط الأزرار بناءً على محتوى المصفوفة المعطى.
|-
|دالة
|لا
|إن كان دالة، فسيُستدعَى مع القيمة المدخلة بالشكل ‎(text: string) => void عندما يضغط المستخدم على زر OK أو موافق.
|-
|<code>type</code>
|النوع AlertType (انظر في الأسفل)
|لا
|يضبط نوع عنصر الإدخال.
|-
|defaultValue
|سلسلة نصية
|لا
|قيمة النص الافتراضي في عنصر الإدخال.
|-
|keyboardType
|سلسلة نصية
|لا
|نوع لوحة المفاتيح لأول حقل نصي (إن وجد). تأخذ إحدى أنواع [[ReactNative/textinput#keyboardType|keyboardType]] من المكون TextInput.
|}

== تعريفات النوع ==

=== <code>AlertButtonStyle</code> ===
تنسيق زر مربع التنبيه على منصة iOS.
{| class="wikitable"
!النوع
|-
|قيمة متعددة enum
|}
الثوابت:
{| class="wikitable"
!القيمة
!الوصف
|-
|<code>'default'</code>
|تنسيق الزر الافتراضي
|-
|<code>'cancel'</code>
|تنسيق زر الإلغاء cancel
|-
|<code>'destructive'</code>
|تنسيق زر إغلاق مربع الحوار وتدميره destructive
|}

=== <code>AlertType</code> ===
نوع مربع نافذة التنبيه على منصة iOS.
{| class="wikitable"
!النوع
|-
|قيمة متعددة enum
|}
الثوابت:
{| class="wikitable"
!القيمة
!الوصف
|-
|<code>'default'</code>
|مربع تنبيه افتراضي دون أي عناصر إدخال.
|-
|<code>'plain-text'</code>
|مربع تنبيه مع عنصر إدخال نصي عادي.
|-
|<code>'secure-text'</code>
|مربع تنبيه مع عنصر إدخال نصي آمن.
|-
|<code>'login-password'</code>
|مربع تنبيه مع حقلي تسجيل دخول وكلمة مرور.
|}

=== <code>Buttons</code> ===
مصفوفة من الكائنات تحوي ضبط أزرار مربع التنبيه Alert.
{| class="wikitable"
!النوع
|-
|مصفوفة من الكائنات
|}
خاصيات الكائنات:
{| class="wikitable"
!القيمة
!النوع
!الوصف
|-
|<code>text</code>
|سلسلة نصية
|عنوان الزر.
|-
|<code>onPress</code>
|دالة
|دالة رد نداء تستدعى عند الضغط على الزر.
|-
|<code>style</code>
|النوع <code>AlertButtonStyle</code>
|(منصة iOS فقط) تنسيق الزر، وستهمل هذه الخاصية على منصة Android. 
|}

=== <code>Options</code> ===
{| class="wikitable"
!النوع
|-
|كائن
|}
الخاصيات:
{| class="wikitable"
!القيمة
!النوع
!الوصف
|-
|<code>cancelable</code>
|قيمة منطقية
|تحدد إن كان بإمكان إغلاق مربع التنبيه ورفضه عند الضغط خارج حدوده.
|-
|<code>onDismiss</code>
|دالة
|دالة رد نداء تستدعى عند إغلاق مربع التنبيه ورفضه.
|}

== مصادر ==
* [https://facebook.github.io/react-native/docs/alert صفحة Alert في توثيق React Native الرسمي.]