عرض مصدر ReactNative/alertios

<noinclude>{{DISPLAYTITLE:المكون AlertIOS في ReactNative}}</noinclude>
'''مكون مهمل'''، استخدم المكون [https://wiki.hsoub.com/ReactNative/alert <code>Alert</code>] بدلًا عنه.

يمكنك المكون <code>AlertIOS</code> من إنشاء صناديق تنبيهات أو صناديق إدخال لاستقبال بيانات من المستخدم على أنظمة iOS.

'''مثال''': إنشاء تنبيهات

<syntaxhighlight class="react">AlertIOS.alert(
  'Sync Complete',
  'All your data belongs to us.'
);</syntaxhighlight>


'''مثال''': إنشاء صناديق إدخال

<syntaxhighlight class="react">AlertIOS.prompt('Enter a value', null, (text) =>
  console.log('You entered ' + text)
);</syntaxhighlight>
يستحسن استخدام الدالة <code>Alert.alert</code> إذا كنت تريد الحصول على نفس السلوك على نظام أندرويد.

__toc__

== التوابع ==

=== <code>‎alert()‎</code> ===

<syntaxhighlight class="react">static alert(title: string, [message]: string, [callbackOrButtons]: ?(() => void), ButtonsArray, [type]: AlertType): [object Object]</syntaxhighlight>
تُظهر تنبيهًا منبثقًا.

'''المعاملات'''

{| class="wikitable"
! الاسم
! النوع
! مطلوب
! الوصف
|-
| title
| سلسلة نصية (string)
| نعم
| عنوان التنبيه، إعطاء القيمة <code>null</code> أو <code>""</code> سيُخفي التنبيه.
|-
| message
| سلسلة نصية (string)
| لا
| رسالة إختيارية تظهر تحت العنوان.
|-
| callbackOrButtons
| ?(() => void),[https://reactnative.dev/docs/alertios#buttonsarray ButtonsArray]
| لا
| يجب أن تكون هذه المعاملات الاختيارية إما دالة أو مجموعة من الأزرار. في حال كانت دالة واحدة، تُستدعى عندما ينقر المستخدم على زر "موافق" (OK)، أما إذا كانت مجموعة أزار فيجب أن يشتمل كل زر على مفتاح <code>text</code> و دالة <code>onPress</code>، و<code>style</code> والتي يجب أن تكون قيمتها إحدى القيم <code>default</code> أو<code>cancel</code> أو <code>destructive</code>.
|-
| type
| [https://reactnative.dev/docs/alertios#alerttype AlertType]
| لا
| '''معامل مهمل يجب عدم استخدامه'''
|}



'''مثال مع أزرار مخصصة'''

<syntaxhighlight class="react">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')
    }
  ]
);</syntaxhighlight>
 

=== <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>
تظهر صندوق إدخال لاستقبال بيانات نصية من المستخدم.

'''المعاملات'''

{| class="wikitable"
! الاسم
! النوع
! مطلوب
! الوصف
|-
| title
| سلسلة نصية (string)
| نعم
| عنوان التنبيه، إعطاء القيمة <code>null</code> أو <code>""</code> سيُخفي التنبيه.
|-
| message
| سلسلة نصية (string)
| لا
| رسالة إختيارية تظهر تحت العنوان.
|-
| callbackOrButtons
| ?(() => void),[https://reactnative.dev/docs/alertios#buttonsarray ButtonsArray]
| لا
| يجب أن تكون هذه المعاملات الاختيارية إما دالة أو مجموعة من الأزرار. في حال كانت دالة واحدة، تُستدعى عندما ينقر المستخدم على زر "موافق" (OK)، أما إذا كانت مجموعة أزار فيجب أن يشتمل كل زر على مفتاح <code>text</code> و دالة <code>onPress</code>، و<code>style</code> والتي يجب أن تكون قيمتها إحدى القيم <code>default</code> أو<code>cancel</code> أو <code>destructive</code>.
|-
| type
| [https://reactnative.dev/docs/alertios#alerttype AlertType]
| لا
| يُحدد نوع النص الذي يجب إدخاله، ويأخذ القيم <code>plain-text</code> أو <code>secure-text</code> أو <code>login-password</code>.
|-
| defaultValue
| سلسلة نصية (string)
| لا
| يُحدد القيمة الإفتراضية لحقل الإدخال.
|-
| keyboardType
| سلسلة نصية (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(
  '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'
);</syntaxhighlight>
'''مثال مع الأزرار الافتراضية و رد نِداء مُخصص'''

<syntaxhighlight class="react">AlertIOS.prompt(
  'Update username',
  null,
  (text) => console.log('Your username is ' + text),
  null,
  'default'
);</syntaxhighlight>


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

=== AlertType ===

يُحدد نوع زر التنبيه.

* النوع: <code>\$Enum</code>

'''الثوابت'''

{| class="wikitable"
! القيمة
! الوصف
|-
| default
| التنبية الإفتراضي، لا يوجد حقل إدخال.
|-
| plain-text
| تنبه مع حقل إدخال سلسلة نصية عادية.
|-
| secure-text
| تنبيه مع حقل إدخال نص آمن.
|-
| login-password
| تنبيه كلمة المرور أو تسجيل الدخول.
|}



=== AlertButtonStyle ===

تُحدد أنماط زر التنبيه.

<ul>
<li><p>النوع: <code>\$Enum</code></p>
<p>'''الثوابت'''</p></li></ul>

{| class="wikitable"
! القيمة
! الوصف
|-
| default
| زر التنبيه الإفتراضي.
|-
| cancel
| زر الإلغاء.
|-
| destructive
| زر الهدم.
|}



=== ButtonsArray ===

مصفوفة يمثل كل عنصر فيها زرًا من الأزرار التي ستُعرض أسفل رسالة التنبيه.

* النوع: مصفوفة.

'''الخاصيات'''

 

{| class="wikitable"
! الاسم
! النوع
! الوصف
|-
| [text]
| سلسلة نصية (string)
| إسم الزر.
|-
| [onPress]
| دالة (function)
| دالة تُستدعَى عند الضغط على الزر.
|-
| [style]
| [https://reactnative.dev/docs/alertios#alertbuttonstyle AlertButtonStyle]
| نمط الزر.
|}



'''الثوابت'''

{| class="wikitable"
! القيمة
! الوصف
|-
| text
| إسم الزر.
|-
| onPress
| دالة تُستدعَى عند الضغط على الزر.
|-
| style
| نمط الزر.
|}



== المصادر ==

[https://reactnative.dev/docs/alertios صفحة AlertIOS في توثيق React Native الرسمي].
[[تصنيف: ReactNaive]]