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

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
ط (مراجعة)
ط (مراجعة)
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:المكون AlertIOS في ReactNative}}</noinclude>
+
<noinclude>{{DISPLAYTITLE:الواجهة AlertIOS في ReactNative}}</noinclude><blockquote>
'''مكون مهمل'''، يمكنك استخدام المكون <code>[[ReactNative/alert|Alert]]</code> بدلًا عنه.
+
'''مهملة:''' يمكنك استخدام الواجهة <code>[[ReactNative/alert|Alert]]</code> بدلًا عنها.
 
+
</blockquote>يمكّنك المكون <code>AlertIOS</code> من إنشاء صناديق تنبيهات أو صناديق إدخال لاستقبال بيانات من المستخدم على أنظمة iOS.
يمكّنك المكون <code>AlertIOS</code> من إنشاء صناديق تنبيهات أو صناديق إدخال لاستقبال بيانات من المستخدم على أنظمة iOS.
 
  
 
'''مثال''': إنشاء تنبيهات
 
'''مثال''': إنشاء تنبيهات
سطر 16: سطر 15:
 
   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__
سطر 46: سطر 45:
 
|-
 
|-
 
| callbackOrButtons
 
| callbackOrButtons
| ?(() => void),[[ReactNative/alertios#ButtonsArray|ButtonsArray]]
+
| دالة ‎?(() => void)،
 +
أو النوع [[ReactNative/alertios#ButtonsArray|ButtonsArray]]
 
| لا
 
| لا
 
| يجب أن تكون هذه المعاملات الاختيارية إمّا دالة أو مجموعة من الأزرار، ففي حال كانت دالة واحدة، تُستدعى عندما ينقر المستخدم على زرّ "موافق" (OK)؛ أمّا إذا كانت مجموعة أزار فيجب أن يشتمل كلّ زرّ على مفتاح <code>text</code> ودالة <code>onPress</code>، و<code>style</code> والتي يجب أن تكون قيمتها إحدى القيم <code>default</code> أو<code>cancel</code> أو <code>destructive</code>.
 
| يجب أن تكون هذه المعاملات الاختيارية إمّا دالة أو مجموعة من الأزرار، ففي حال كانت دالة واحدة، تُستدعى عندما ينقر المستخدم على زرّ "موافق" (OK)؛ أمّا إذا كانت مجموعة أزار فيجب أن يشتمل كلّ زرّ على مفتاح <code>text</code> ودالة <code>onPress</code>، و<code>style</code> والتي يجب أن تكون قيمتها إحدى القيم <code>default</code> أو<code>cancel</code> أو <code>destructive</code>.
سطر 54: سطر 54:
 
| لا
 
| لا
 
| '''معامل مهمل يجب ألّا يُستخدم'''
 
| '''معامل مهمل يجب ألّا يُستخدم'''
|}'''مثال مع أزرار مخصصة'''
+
|}إليك مثال مع أزرار مخصصة:
  
 
<syntaxhighlight class="react" lang="javascript">AlertIOS.alert(
 
<syntaxhighlight class="react" lang="javascript">AlertIOS.alert(
سطر 76: سطر 76:
 
تظهر صندوق إدخال لاستقبال بيانات نصية من المستخدِم.
 
تظهر صندوق إدخال لاستقبال بيانات نصية من المستخدِم.
  
'''المعاملات'''
+
المعاملات:
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 95: سطر 95:
 
|-
 
|-
 
| callbackOrButtons
 
| callbackOrButtons
| ?(() => void),[[ReactNative/alertios#ButtonsArray|ButtonsArray]]
+
| دالة ‎?(() => void)، أو النوع [[ReactNative/alertios#ButtonsArray|ButtonsArray]]
 
| لا
 
| لا
 
| يجب أن تكون هذه المعاملات الاختيارية إمّا دالة أو مجموعة من الأزرار، ففي حال كانت دالة واحدة، فستُستدعى عندما ينقر المستخدم على زرّ "موافق" (OK)، أمّا إذا كانت مجموعة أزار فيجب أن يشتمل كلّ زرّ على مفتاح <code>text</code> ودالة <code>onPress</code>، و<code>style</code> والتي يجب أن تكون قيمتها إحدى القيم <code>default</code> أو<code>cancel</code> أو <code>destructive</code>.
 
| يجب أن تكون هذه المعاملات الاختيارية إمّا دالة أو مجموعة من الأزرار، ففي حال كانت دالة واحدة، فستُستدعى عندما ينقر المستخدم على زرّ "موافق" (OK)، أمّا إذا كانت مجموعة أزار فيجب أن يشتمل كلّ زرّ على مفتاح <code>text</code> ودالة <code>onPress</code>، و<code>style</code> والتي يجب أن تكون قيمتها إحدى القيم <code>default</code> أو<code>cancel</code> أو <code>destructive</code>.
سطر 115: سطر 115:
 
|}
 
|}
  
'''مثال'''
+
إليك مثال مع أزرار مخصصة:
  
 
<syntaxhighlight class="react" lang="javascript">AlertIOS.prompt(
 
<syntaxhighlight class="react" lang="javascript">AlertIOS.prompt(
سطر 134: سطر 134:
 
   'secure-text'
 
   'secure-text'
 
);</syntaxhighlight>
 
);</syntaxhighlight>
'''مثال مع الأزرار الافتراضية و ردّ نِداء مُخصّص'''
+
أيضًا مثال مع الأزرار الافتراضية و ردّ نِداء مُخصّص:
  
 
<syntaxhighlight class="react" lang="javascript">AlertIOS.prompt(
 
<syntaxhighlight class="react" lang="javascript">AlertIOS.prompt(
سطر 145: سطر 145:
 
== تعريفات الأنواع ==
 
== تعريفات الأنواع ==
  
=== AlertType ===
+
=== <code>AlertType</code> ===
  
 
يُحدّد نوع زرّ التنبيه.
 
يُحدّد نوع زرّ التنبيه.
سطر 151: سطر 151:
 
* النوع: <code>\$Enum</code>
 
* النوع: <code>\$Enum</code>
  
'''الثوابت'''
+
الثوابت:
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 167: سطر 167:
 
|-
 
|-
 
| <code>login-password</code>
 
| <code>login-password</code>
| تنبيه كلمة المرور أو تسجيل الدخول.
+
| تنبيه تسجيل الدخول وكلمة مرور.
 
|}
 
|}
=== AlertButtonStyle ===
+
=== <code>AlertButtonStyle</code> ===
  
 
تُحدد أنماط زرّ التنبيه.
 
تُحدد أنماط زرّ التنبيه.
سطر 190: سطر 190:
 
| زرّ الهدم.
 
| زرّ الهدم.
 
|}
 
|}
=== ButtonsArray ===
+
=== <code>ButtonsArray</code> ===
  
 
مصفوفة يمثل كل عنصر فيها زرًا من الأزرار التي ستُعرض أسفل رسالة التنبيه.
 
مصفوفة يمثل كل عنصر فيها زرًا من الأزرار التي ستُعرض أسفل رسالة التنبيه.
سطر 204: سطر 204:
 
| [text]
 
| [text]
 
| سلسلة نصية (string)
 
| سلسلة نصية (string)
| إسم الزر.
+
| عنوان الزر.
 
|-
 
|-
 
| [onPress]
 
| [onPress]
سطر 213: سطر 213:
 
| [[ReactNative/alertios#AlertButtonStyle|AlertButtonStyle]]
 
| [[ReactNative/alertios#AlertButtonStyle|AlertButtonStyle]]
 
| نمط الزر.
 
| نمط الزر.
|}'''الثوابت'''
+
|}الثوابت:
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 220: سطر 220:
 
|-
 
|-
 
| <code>text</code>
 
| <code>text</code>
| إسم الزر.
+
| عنوان الزر.
 
|-
 
|-
 
| <code>onPress</code>
 
| <code>onPress</code>
سطر 230: سطر 230:
 
== المصادر ==
 
== المصادر ==
  
[https://reactnative.dev/docs/alertios صفحة AlertIOS في توثيق React Native الرسمي].
+
* [https://reactnative.dev/docs/alertios صفحة AlertIOS في توثيق React Native الرسمي].
 
[[تصنيف: ReactNaive]]
 
[[تصنيف: ReactNaive]]

مراجعة 09:42، 4 أكتوبر 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 نمط الزر.

المصادر