الفرق بين المراجعتين لصفحة: «ReactNative/alertios»

من موسوعة حسوب
التعديل اللاحق ←
مرئينص الويكي
رفع المحتوى
 
ط مراجعة
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:المكون AlertIOS في ReactNative}}</noinclude>
<noinclude>{{DISPLAYTITLE:المكون AlertIOS في ReactNative}}</noinclude>
'''مكون مهمل'''، استخدم المكون [https://wiki.hsoub.com/ReactNative/alert <code>Alert</code>] بدلًا عنه.
'''مكون مهمل'''، يمكنك استخدام المكون <code>[[ReactNative/alert|Alert]]</code> بدلًا عنه.


يمكنك المكون <code>AlertIOS</code> من إنشاء صناديق تنبيهات أو صناديق إدخال لاستقبال بيانات من المستخدم على أنظمة iOS.
يمكّنك المكون <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>
سطر 25: سطر 24:
=== <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: سطر 46:
|-
|-
| callbackOrButtons
| callbackOrButtons
| ?(() => void),[https://reactnative.dev/docs/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>.
|-
|-
| type
| type
| [https://reactnative.dev/docs/alertios#alerttype AlertType]
| [[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>
تظهر صندوق إدخال لاستقبال بيانات نصية من المستخدم.
تظهر صندوق إدخال لاستقبال بيانات نصية من المستخدِم.


'''المعاملات'''
'''المعاملات'''
سطر 102: سطر 95:
|-
|-
| callbackOrButtons
| callbackOrButtons
| ?(() => void),[https://reactnative.dev/docs/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>.
|-
|-
| type
| type
| [https://reactnative.dev/docs/alertios#alerttype AlertType]
| [[ReactNative/alertios#AlertType|AlertType]]
| لا
| لا
| يُحدد نوع النص الذي يجب إدخاله، ويأخذ القيم <code>plain-text</code> أو <code>secure-text</code> أو <code>login-password</code>.
| يُحدّد نوع النصّ الذي يجب إدخاله، ويأخذ القيم <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>.
| يُحدّد نوع لوحة المفاتيح. ويأخذ القيم <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 ===
=== AlertType ===


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


* النوع: <code>\$Enum</code>
* النوع: <code>\$Enum</code>
سطر 166: سطر 157:
! الوصف
! الوصف
|-
|-
| default
| <code>default</code>
| التنبية الإفتراضي، لا يوجد حقل إدخال.
| التنبية الإفتراضي، لا يوجد حقل إدخال.
|-
|-
| plain-text
| <code>plain-text</code>
| تنبه مع حقل إدخال سلسلة نصية عادية.
| تنبه مع حقل إدخال سلسلة نصية عادية.
|-
|-
| secure-text
| <code>secure-text</code>
| تنبيه مع حقل إدخال نص آمن.
| تنبيه مع حقل إدخال نص آمن.
|-
|-
| login-password
| <code>login-password</code>
| تنبيه كلمة المرور أو تسجيل الدخول.
| تنبيه كلمة المرور أو تسجيل الدخول.
|}
|}
=== AlertButtonStyle ===
=== AlertButtonStyle ===


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


<ul>
<ul>
سطر 193: سطر 181:
! الوصف
! الوصف
|-
|-
| default
| <code>default</code>
| زر التنبيه الإفتراضي.
| زرّ التنبيه الإفتراضي.
|-
|-
| cancel
| <code>cancel</code>
| زر الإلغاء.
| زرّ الإلغاء.
|-
|-
| destructive
| <code>destructive</code>
| زر الهدم.
| زرّ الهدم.
|}
|}
=== ButtonsArray ===
=== ButtonsArray ===


سطر 212: سطر 197:


'''الخاصيات'''
'''الخاصيات'''
{| class="wikitable"
{| class="wikitable"
! الاسم
! الاسم
سطر 229: سطر 211:
|-
|-
| [style]
| [style]
| [https://reactnative.dev/docs/alertios#alertbuttonstyle AlertButtonStyle]
| [[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 الرسمي].
[[تصنيف: ReactNaive]]
[[تصنيف: ReactNaive]]

مراجعة 07:48، 5 مارس 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 نمط الزر.

المصادر

صفحة AlertIOS في توثيق React Native الرسمي.

مجلوبة من «https://wiki.hsoub.com/index.php?title=ReactNative/alertios&oldid=30364»