الفرق بين المراجعتين ل"ReactNative/alert"
جميل-بيلوني (نقاش | مساهمات) ط (←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
|
دالة | دالة رد نداء تستدعى عند إغلاق مربع التنبيه ورفضه. |