الفرق بين المراجعتين ل"ReactNative/alertios"
اذهب إلى التنقل
اذهب إلى البحث
رقية-بورية (نقاش | مساهمات) (رفع المحتوى) |
رقية-بورية (نقاش | مساهمات) ط (مراجعة) |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:المكون AlertIOS في ReactNative}}</noinclude> | <noinclude>{{DISPLAYTITLE:المكون AlertIOS في ReactNative}}</noinclude> | ||
| − | '''مكون مهمل'''، | + | '''مكون مهمل'''، يمكنك استخدام المكون <code>[[ReactNative/alert|Alert]]</code> بدلًا عنه. |
| − | + | يمكّنك المكون <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),[ | + | | ?(() => 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> |
| − | تظهر صندوق إدخال لاستقبال بيانات نصية من | + | تظهر صندوق إدخال لاستقبال بيانات نصية من المستخدِم. |
'''المعاملات''' | '''المعاملات''' | ||
| سطر 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 === | === 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] | ||
| − | | [ | + | | [[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
|
نمط الزر. |