الفرق بين المراجعتين لصفحة: «ReactNative/alertios»
رقية-بورية (نقاش | مساهمات) رفع المحتوى |
جميل-بيلوني (نقاش | مساهمات) طلا ملخص تعديل |
||
| (4 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE: | <noinclude>{{DISPLAYTITLE:الواجهة AlertIOS في ReactNative}}</noinclude><blockquote> | ||
''' | '''مهملة:''' يمكنك استخدام الواجهة <code>[[ReactNative/alert|Alert]]</code> بدلًا عنها. | ||
</blockquote>تمكنك الواجهة <code>AlertIOS</code> من إنشاء صناديق تنبيهات أو صناديق إدخال لاستقبال بيانات من المستخدم على أنظمة iOS. | |||
'''مثال''': إنشاء تنبيهات | '''مثال''': إنشاء تنبيهات | ||
<syntaxhighlight class="react">AlertIOS.alert( | <syntaxhighlight class="react" lang="javascript">AlertIOS.alert( | ||
'Sync Complete', | 'Sync Complete', | ||
'All your data belongs to us.' | 'All your data belongs to us.' | ||
);</syntaxhighlight> | );</syntaxhighlight> | ||
'''مثال''': إنشاء صناديق إدخال | '''مثال''': إنشاء صناديق إدخال | ||
<syntaxhighlight class="react">AlertIOS.prompt('Enter a value', null, (text) => | <syntaxhighlight class="react" lang="javascript">AlertIOS.prompt('Enter a value', null, (text) => | ||
console.log('You entered ' + text) | console.log('You entered ' + text) | ||
);</syntaxhighlight> | );</syntaxhighlight> | ||
يستحسن استخدام الدالة <code>Alert.alert</code> إذا كنت تريد الحصول على نفس السلوك على نظام أندرويد. | يستحسن استخدام الدالة <code>[[ReactNative/alert#alert.28.29|Alert.alert]]</code> إذا كنت تريد الحصول على نفس السلوك على نظام أندرويد. | ||
__toc__ | __toc__ | ||
| سطر 25: | سطر 23: | ||
=== <code>alert()</code> === | === <code>alert()</code> === | ||
<syntaxhighlight class="react">static alert(title: string, [message]: string, [callbackOrButtons]: ?(() => void), ButtonsArray, [type]: AlertType): [object Object]</syntaxhighlight> | <syntaxhighlight class="react" lang="javascript">static alert(title: string, [message]: string, [callbackOrButtons]: ?(() => void), ButtonsArray, [type]: AlertType): [object Object]</syntaxhighlight> | ||
تُظهر تنبيهًا منبثقًا. | تُظهر تنبيهًا منبثقًا. | ||
| سطر 47: | سطر 45: | ||
|- | |- | ||
| callbackOrButtons | | callbackOrButtons | ||
| ?(() => void) | | دالة ?(() => void)، | ||
أو النوع [[ReactNative/alertios#ButtonsArray|ButtonsArray]] | |||
| لا | | لا | ||
| يجب أن تكون هذه المعاملات الاختيارية | | يجب أن تكون هذه المعاملات الاختيارية إمّا دالة أو مجموعة من الأزرار، ففي حال كانت دالة واحدة، تُستدعى عندما ينقر المستخدم على زرّ "موافق" (OK)؛ أمّا إذا كانت مجموعة أزار فيجب أن يشتمل كلّ زرّ على مفتاح <code>text</code> ودالة <code>onPress</code>، و<code>style</code> والتي يجب أن تكون قيمتها إحدى القيم <code>default</code> أو<code>cancel</code> أو <code>destructive</code>. | ||
|- | |- | ||
| type | | type | ||
| [ | | [[ReactNative/alertios#AlertType|AlertType]] | ||
| لا | | لا | ||
| '''معامل مهمل يجب | | '''معامل مهمل يجب ألّا يُستخدم''' | ||
|} | |}إليك مثال مع أزرار مخصصة: | ||
<syntaxhighlight class="react" lang="javascript">AlertIOS.alert( | |||
<syntaxhighlight class="react">AlertIOS.alert( | |||
'Update available', | 'Update available', | ||
'Keep your app up to date to enjoy the latest features', | 'Keep your app up to date to enjoy the latest features', | ||
| سطر 76: | سطر 71: | ||
] | ] | ||
);</syntaxhighlight> | );</syntaxhighlight> | ||
=== <code>prompt()</code> === | === <code>prompt()</code> === | ||
<syntaxhighlight class="react">static prompt(title: string, [message]: string, [callbackOrButtons]: ?((text: string) => void), ButtonsArray, [type]: AlertType, [defaultValue]: string, [keyboardType]: string): [object Object]</syntaxhighlight> | <syntaxhighlight class="react" lang="javascript">static prompt(title: string, [message]: string, [callbackOrButtons]: ?((text: string) => void), ButtonsArray, [type]: AlertType, [defaultValue]: string, [keyboardType]: string): [object Object]</syntaxhighlight> | ||
تظهر صندوق إدخال لاستقبال بيانات نصية من | تظهر صندوق إدخال لاستقبال بيانات نصية من المستخدِم. | ||
المعاملات: | |||
{| class="wikitable" | {| class="wikitable" | ||
| سطر 102: | سطر 95: | ||
|- | |- | ||
| callbackOrButtons | | callbackOrButtons | ||
| ?(() => void) | | دالة ?(() => void)، أو النوع [[ReactNative/alertios#ButtonsArray|ButtonsArray]] | ||
| لا | | لا | ||
| يجب أن تكون هذه المعاملات الاختيارية | | يجب أن تكون هذه المعاملات الاختيارية إمّا دالة أو مجموعة من الأزرار، ففي حال كانت دالة واحدة، فستُستدعى عندما ينقر المستخدم على زرّ "موافق" (OK)، أمّا إذا كانت مجموعة أزار فيجب أن يشتمل كلّ زرّ على مفتاح <code>text</code> ودالة <code>onPress</code>، و<code>style</code> والتي يجب أن تكون قيمتها إحدى القيم <code>default</code> أو<code>cancel</code> أو <code>destructive</code>. | ||
|- | |- | ||
| type | | type | ||
| [ | | [[ReactNative/alertios#AlertType|AlertType]] | ||
| لا | | لا | ||
| | | يُحدّد نوع النصّ الذي يجب إدخاله، ويأخذ القيم <code>plain-text</code> أو <code>secure-text</code> أو <code>login-password</code>. | ||
|- | |- | ||
| defaultValue | | defaultValue | ||
| سلسلة نصية (string) | | سلسلة نصية (string) | ||
| لا | | لا | ||
| | | يُحدّد القيمة الإفتراضية لحقل الإدخال. | ||
|- | |- | ||
| keyboardType | | keyboardType | ||
| سلسلة نصية (string) | | سلسلة نصية (string) | ||
| لا | | لا | ||
| | | يُحدّد نوع لوحة المفاتيح. ويأخذ القيم <code>default</code> أو <code>email-address</code> أو <code>numeric</code> أو <code>phone-pad</code> أو <code>ascii-capable</code> أو <code>numbers-and-punctuation</code> أو <code>url</code> أو <code>number-pad</code> أو <code>name-phone-pad</code> أو <code>decimal-pad</code> أو <code>twitter</code> أو <code>web-search</code>. | ||
|} | |} | ||
إليك مثال مع أزرار مخصصة: | |||
<syntaxhighlight class="react">AlertIOS.prompt( | <syntaxhighlight class="react" lang="javascript">AlertIOS.prompt( | ||
'Enter password', | 'Enter password', | ||
'Enter your password to claim your $1.5B in lottery winnings', | 'Enter your password to claim your $1.5B in lottery winnings', | ||
| سطر 141: | سطر 134: | ||
'secure-text' | 'secure-text' | ||
);</syntaxhighlight> | );</syntaxhighlight> | ||
أيضًا مثال مع الأزرار الافتراضية و ردّ نِداء مُخصّص: | |||
<syntaxhighlight class="react">AlertIOS.prompt( | <syntaxhighlight class="react" lang="javascript">AlertIOS.prompt( | ||
'Update username', | 'Update username', | ||
null, | null, | ||
| سطر 150: | سطر 143: | ||
'default' | 'default' | ||
);</syntaxhighlight> | );</syntaxhighlight> | ||
== تعريفات الأنواع == | == تعريفات الأنواع == | ||
=== AlertType === | === <code>AlertType</code> === | ||
يُحدّد نوع زرّ التنبيه. | |||
* النوع: <code>\$Enum</code> | * النوع: <code>\$Enum</code> | ||
الثوابت: | |||
{| class="wikitable" | {| class="wikitable" | ||
| سطر 166: | سطر 157: | ||
! الوصف | ! الوصف | ||
|- | |- | ||
| default | | <code>default</code> | ||
| التنبية الإفتراضي، لا يوجد حقل إدخال. | | التنبية الإفتراضي، لا يوجد حقل إدخال. | ||
|- | |- | ||
| plain-text | | <code>plain-text</code> | ||
| تنبه مع حقل إدخال سلسلة نصية عادية. | | تنبه مع حقل إدخال سلسلة نصية عادية. | ||
|- | |- | ||
| secure-text | | <code>secure-text</code> | ||
| تنبيه مع حقل إدخال نص آمن. | | تنبيه مع حقل إدخال نص آمن. | ||
|- | |- | ||
| login-password | | <code>login-password</code> | ||
| تنبيه | | تنبيه تسجيل الدخول وكلمة مرور. | ||
|} | |} | ||
=== <code>AlertButtonStyle</code> === | |||
تُحدد أنماط زرّ التنبيه. | |||
تُحدد أنماط | |||
<ul> | <ul> | ||
| سطر 193: | سطر 181: | ||
! الوصف | ! الوصف | ||
|- | |- | ||
| default | | <code>default</code> | ||
| | | زرّ التنبيه الإفتراضي. | ||
|- | |- | ||
| cancel | | <code>cancel</code> | ||
| | | زرّ الإلغاء. | ||
|- | |- | ||
| destructive | | <code>destructive</code> | ||
| | | زرّ الهدم. | ||
|} | |} | ||
=== <code>ButtonsArray</code> === | |||
=== ButtonsArray === | |||
مصفوفة يمثل كل عنصر فيها زرًا من الأزرار التي ستُعرض أسفل رسالة التنبيه. | مصفوفة يمثل كل عنصر فيها زرًا من الأزرار التي ستُعرض أسفل رسالة التنبيه. | ||
| سطر 212: | سطر 197: | ||
'''الخاصيات''' | '''الخاصيات''' | ||
{| class="wikitable" | {| class="wikitable" | ||
! الاسم | ! الاسم | ||
| سطر 222: | سطر 204: | ||
| [text] | | [text] | ||
| سلسلة نصية (string) | | سلسلة نصية (string) | ||
| | | عنوان الزر. | ||
|- | |- | ||
| [onPress] | | [onPress] | ||
| سطر 229: | سطر 211: | ||
|- | |- | ||
| [style] | | [style] | ||
| [ | | [[ReactNative/alertios#AlertButtonStyle|AlertButtonStyle]] | ||
| نمط الزر. | | نمط الزر. | ||
|} | |}الثوابت: | ||
{| class="wikitable" | {| class="wikitable" | ||
| سطر 241: | سطر 219: | ||
! الوصف | ! الوصف | ||
|- | |- | ||
| text | | <code>text</code> | ||
| | | عنوان الزر. | ||
|- | |- | ||
| onPress | | <code>onPress</code> | ||
| دالة تُستدعَى عند الضغط على الزر. | | دالة تُستدعَى عند الضغط على الزر. | ||
|- | |- | ||
| style | | <code>style</code> | ||
| نمط الزر. | | نمط الزر. | ||
|} | |} | ||
== المصادر == | == المصادر == | ||
[https://reactnative.dev/docs/alertios صفحة AlertIOS في توثيق React Native الرسمي]. | * [https://reactnative.dev/docs/alertios صفحة AlertIOS في توثيق React Native الرسمي]. | ||
[[تصنيف: | [[تصنيف: ReactNative]] | ||
[[تصنيف:React Native API]] | |||
المراجعة الحالية بتاريخ 12:21، 12 أكتوبر 2021
مهملة: يمكنك استخدام الواجهة
Alertبدلًا عنها.
تمكنك الواجهة AlertIOS من إنشاء صناديق تنبيهات أو صناديق إدخال لاستقبال بيانات من المستخدم على أنظمة iOS.
مثال: إنشاء تنبيهات
AlertIOS.alert(
'Sync Complete',
'All your data belongs to us.'
);
مثال: إنشاء صناديق إدخال
AlertIOS.prompt('Enter a value', null, (text) =>
console.log('You entered ' + text)
);
يستحسن استخدام الدالة Alert.alert إذا كنت تريد الحصول على نفس السلوك على نظام أندرويد.
التوابع
alert()
static alert(title: string, [message]: string, [callbackOrButtons]: ?(() => void), ButtonsArray, [type]: AlertType): [object Object]
تُظهر تنبيهًا منبثقًا.
المعاملات
| الاسم | النوع | مطلوب | الوصف |
|---|---|---|---|
| title | سلسلة نصية (string) | نعم | عنوان التنبيه، إعطاء القيمة null أو "" سيُخفي التنبيه.
|
| message | سلسلة نصية (string) | لا | رسالة إختيارية تظهر تحت العنوان. |
| callbackOrButtons | دالة ?(() => void)،
أو النوع ButtonsArray |
لا | يجب أن تكون هذه المعاملات الاختيارية إمّا دالة أو مجموعة من الأزرار، ففي حال كانت دالة واحدة، تُستدعى عندما ينقر المستخدم على زرّ "موافق" (OK)؛ أمّا إذا كانت مجموعة أزار فيجب أن يشتمل كلّ زرّ على مفتاح text ودالة onPress، وstyle والتي يجب أن تكون قيمتها إحدى القيم default أوcancel أو destructive.
|
| type | AlertType | لا | معامل مهمل يجب ألّا يُستخدم |
إليك مثال مع أزرار مخصصة:
AlertIOS.alert(
'Update available',
'Keep your app up to date to enjoy the latest features',
[
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
style: 'cancel'
},
{
text: 'Install',
onPress: () => console.log('Install Pressed')
}
]
);
prompt()
static prompt(title: string, [message]: string, [callbackOrButtons]: ?((text: string) => void), ButtonsArray, [type]: AlertType, [defaultValue]: string, [keyboardType]: string): [object Object]
تظهر صندوق إدخال لاستقبال بيانات نصية من المستخدِم.
المعاملات:
| الاسم | النوع | مطلوب | الوصف |
|---|---|---|---|
| title | سلسلة نصية (string) | نعم | عنوان التنبيه، إعطاء القيمة null أو "" سيُخفي التنبيه.
|
| message | سلسلة نصية (string) | لا | رسالة إختيارية تظهر تحت العنوان. |
| callbackOrButtons | دالة ?(() => void)، أو النوع ButtonsArray | لا | يجب أن تكون هذه المعاملات الاختيارية إمّا دالة أو مجموعة من الأزرار، ففي حال كانت دالة واحدة، فستُستدعى عندما ينقر المستخدم على زرّ "موافق" (OK)، أمّا إذا كانت مجموعة أزار فيجب أن يشتمل كلّ زرّ على مفتاح text ودالة onPress، وstyle والتي يجب أن تكون قيمتها إحدى القيم default أوcancel أو destructive.
|
| type | AlertType | لا | يُحدّد نوع النصّ الذي يجب إدخاله، ويأخذ القيم plain-text أو secure-text أو login-password.
|
| defaultValue | سلسلة نصية (string) | لا | يُحدّد القيمة الإفتراضية لحقل الإدخال. |
| keyboardType | سلسلة نصية (string) | لا | يُحدّد نوع لوحة المفاتيح. ويأخذ القيم default أو email-address أو numeric أو phone-pad أو ascii-capable أو numbers-and-punctuation أو url أو number-pad أو name-phone-pad أو decimal-pad أو twitter أو web-search.
|
إليك مثال مع أزرار مخصصة:
AlertIOS.prompt(
'Enter password',
'Enter your password to claim your $1.5B in lottery winnings',
[
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
style: 'cancel'
},
{
text: 'OK',
onPress: (password) =>
console.log('OK Pressed, password: ' + password)
}
],
'secure-text'
);
أيضًا مثال مع الأزرار الافتراضية و ردّ نِداء مُخصّص:
AlertIOS.prompt(
'Update username',
null,
(text) => console.log('Your username is ' + text),
null,
'default'
);
تعريفات الأنواع
AlertType
يُحدّد نوع زرّ التنبيه.
- النوع:
\$Enum
الثوابت:
| القيمة | الوصف |
|---|---|
default
|
التنبية الإفتراضي، لا يوجد حقل إدخال. |
plain-text
|
تنبه مع حقل إدخال سلسلة نصية عادية. |
secure-text
|
تنبيه مع حقل إدخال نص آمن. |
login-password
|
تنبيه تسجيل الدخول وكلمة مرور. |
AlertButtonStyle
تُحدد أنماط زرّ التنبيه.
النوع:
\$Enumالثوابت
| القيمة | الوصف |
|---|---|
default
|
زرّ التنبيه الإفتراضي. |
cancel
|
زرّ الإلغاء. |
destructive
|
زرّ الهدم. |
ButtonsArray
مصفوفة يمثل كل عنصر فيها زرًا من الأزرار التي ستُعرض أسفل رسالة التنبيه.
- النوع: مصفوفة.
الخاصيات
| الاسم | النوع | الوصف |
|---|---|---|
| [text] | سلسلة نصية (string) | عنوان الزر. |
| [onPress] | دالة (function) | دالة تُستدعَى عند الضغط على الزر. |
| [style] | AlertButtonStyle | نمط الزر. |
الثوابت:
| القيمة | الوصف |
|---|---|
text
|
عنوان الزر. |
onPress
|
دالة تُستدعَى عند الضغط على الزر. |
style
|
نمط الزر. |