الفرق بين المراجعتين ل"ReactNative/alert"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
ط
 
سطر 352: سطر 352:
 
== مصادر ==
 
== مصادر ==
 
* [https://facebook.github.io/react-native/docs/alert صفحة Alert في توثيق React Native الرسمي.]
 
* [https://facebook.github.io/react-native/docs/alert صفحة Alert في توثيق React Native الرسمي.]
 +
[[تصنيف:ReactNative]]
 +
[[تصنيف:React Native API]]

المراجعة الحالية بتاريخ 14:12، 9 أكتوبر 2021

يعرِض مربع حوارِ تنبيهٍ (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.

‎‎prompt()‎‎

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

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

المعاملات:

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

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

AlertButtonStyle

تنسيق زر مربع التنبيه على منصة iOS.

النوع
قيمة متعددة enum

الثوابت:

القيمة الوصف
'default' تنسيق الزر الافتراضي
'cancel' تنسيق زر الإلغاء cancel
'destructive' تنسيق زر إغلاق مربع الحوار وتدميره destructive

AlertType

نوع مربع نافذة التنبيه على منصة iOS.

النوع
قيمة متعددة enum

الثوابت:

القيمة الوصف
'default' مربع تنبيه افتراضي دون أي عناصر إدخال.
'plain-text' مربع تنبيه مع عنصر إدخال نصي عادي.
'secure-text' مربع تنبيه مع عنصر إدخال نصي آمن.
'login-password' مربع تنبيه مع حقلي تسجيل دخول وكلمة مرور.

Buttons

مصفوفة من الكائنات تحوي ضبط أزرار مربع التنبيه Alert.

النوع
مصفوفة من الكائنات

خاصيات الكائنات:

القيمة النوع الوصف
text سلسلة نصية عنوان الزر.
onPress دالة دالة رد نداء تستدعى عند الضغط على الزر.
style النوع AlertButtonStyle (منصة iOS فقط) تنسيق الزر، وستهمل هذه الخاصية على منصة Android.

Options

النوع
كائن

الخاصيات:

القيمة النوع الوصف
cancelable قيمة منطقية تحدد إن كان بإمكان إغلاق مربع التنبيه ورفضه عند الضغط خارج حدوده.
onDismiss دالة دالة رد نداء تستدعى عند إغلاق مربع التنبيه ورفضه.

مصادر