الفرق بين المراجعتين لصفحة: «ReactNative/statusbar»
| سطر 102: | سطر 102: | ||
!الوصف | !الوصف | ||
|- | |- | ||
|entry | |<code>entry</code> | ||
|أي نوع | |أي نوع | ||
|نعم | |نعم | ||
| سطر 119: | سطر 119: | ||
!الوصف | !الوصف | ||
|- | |- | ||
|props | |<code>props</code> | ||
|أي نوع | |أي نوع | ||
|نعم | |نعم | ||
| سطر 136: | سطر 136: | ||
!الوصف | !الوصف | ||
|- | |- | ||
|entry | |<code>entry</code> | ||
|أي نوع | |أي نوع | ||
|نعم | |نعم | ||
|الإدخال المعاد من طرف <code>pushStackEntry</code> لاستبداله. | |الإدخال المعاد من طرف <code>pushStackEntry</code> لاستبداله. | ||
|- | |- | ||
|props | |<code>props</code> | ||
|أي نوع | |أي نوع | ||
|نعم | |نعم | ||
| سطر 158: | سطر 158: | ||
!الوصف | !الوصف | ||
|- | |- | ||
|color | |<code>color</code> | ||
|سلسلة نصيّة | |سلسلة نصيّة | ||
|نعم | |نعم | ||
|لون الخلفيّة. | |لون الخلفيّة. | ||
|- | |- | ||
|animated | |<code>animated</code> | ||
|قيمة منطقيّة | |قيمة منطقيّة | ||
|لا | |لا | ||
| سطر 180: | سطر 180: | ||
!الوصف | !الوصف | ||
|- | |- | ||
|style | |<code>style</code> | ||
|StatusBarStyle | |<code>StatusBarStyle</code> | ||
|نعم | |نعم | ||
|نمط شريط الحالة المرغوب تعيينه. | |نمط شريط الحالة المرغوب تعيينه. | ||
|- | |- | ||
|animated | |<code>animated</code> | ||
|قيمة منطقيّة | |قيمة منطقيّة | ||
|لا | |لا | ||
| سطر 203: | سطر 203: | ||
!الوصف | !الوصف | ||
|- | |- | ||
|hidden | |<code>hidden</code> | ||
|قيمة منطقيّة | |قيمة منطقيّة | ||
|نعم | |نعم | ||
|إخفاء شريط الحالة. | |إخفاء شريط الحالة. | ||
|- | |- | ||
|animation | |<code>animation</code> | ||
|StatusBarAnimation | |<code>StatusBarAnimation</code> | ||
|لا | |لا | ||
|تحريكٌ اختياريّ عند تغيير خاصيّة إخفاء شريط الحالة. | |تحريكٌ اختياريّ عند تغيير خاصيّة إخفاء شريط الحالة. | ||
| سطر 249: | سطر 249: | ||
|} | |} | ||
==تعريفات الأنواع (Type Definitions)== | ==تعريفات الأنواع (Type Definitions)== | ||
===StatusBarAnimation=== | ===<code>StatusBarAnimation</code>=== | ||
تحريك شريط الحالة. | تحريك شريط الحالة. | ||
النوع: <code>$Enum</code> | النوع: <code>$Enum</code> | ||
====الثوابت==== | ====الثوابت==== | ||
| سطر 257: | سطر 258: | ||
!الوصف | !الوصف | ||
|- | |- | ||
|none | |<code>none</code> | ||
|لا تحريك | |لا تحريك | ||
|- | |- | ||
|fade | |<code>fade</code> | ||
|تحريك تلاشي | |تحريك تلاشي | ||
|- | |- | ||
|slide | |<code>slide</code> | ||
|تحريك انزلاق | |تحريك انزلاق | ||
|} | |} | ||
===StatusBarStyle=== | ===<code>StatusBarStyle</code>=== | ||
نمط شريط الحالة. | نمط شريط الحالة. | ||
النوع: <code>$Enum</code> | النوع: <code>$Enum</code> | ||
====الثوابت==== | ====الثوابت==== | ||
| سطر 274: | سطر 276: | ||
!الوصف | !الوصف | ||
|- | |- | ||
|default | |<code>default</code> | ||
|نمط شريط الحالة الافتراضي (داكن في نظام التشغيل iOS، فاتح في نظام Android) | |نمط شريط الحالة الافتراضي (داكن في نظام التشغيل iOS، فاتح في نظام Android) | ||
|- | |- | ||
|light-content | |<code>light-content</code> | ||
|خلفيّة داكنة ونصوص بيضاء. | |خلفيّة داكنة ونصوص بيضاء. | ||
|- | |- | ||
|dark-content | |<code>dark-content</code> | ||
|خلفيّة فاتحة ونصوص داكنة (يتطلّب Android API 23 أو أحدث). | |خلفيّة فاتحة ونصوص داكنة (يتطلّب Android API 23 أو أحدث). | ||
|} | |} | ||
== مصادر == | == مصادر == | ||
* [https://facebook.github.io/react-native/docs/statusbar صفحة StatusBar | * [https://facebook.github.io/react-native/docs/statusbar صفحة StatusBar] [[تصنيف:ReactNative]] [https://facebook.github.io/react-native/docs/statusbar في توثيق React Native الرسمي.] | ||
[[تصنيف:ReactNative]] | |||
مراجعة 19:35، 15 نوفمبر 2019
مكون للتحكم في شريط حالة التطبيق.
من الممكن تركيب العديد من مكونات StatusBar في نفس الوقت. سيتم دمج الخاصيّات بالترتيب الذي رُكّبت به مكونات StatusBar:
<View>
<StatusBar backgroundColor="blue" barStyle="light-content" />
<View>
<StatusBar hidden={route.statusBarHidden} />
...
</View>
</View>
واجهة برمجة تطبيقات أمرية (Imperative API)
في الحالات التي لا يكون فيها استخدام مكوّنٍ أمرًا مناسبًا، هناك أيضًا واجهة برمجة تطبيقات أمريّة متاحة كدوال ساكنة (static functions) على المكون. ومع ذلك، لا يوصى باستخدام واجهة برمجة التطبيقات الساكنة والمكون لنفس الخاصيّة لأن أي قيمة تحددها واجهة برمجة التطبيقات الساكنة ستُتَجاوز (override) بواسطة تلك التي حددها المكوّن في التصيير القادم.
الثوابت
currentHeight (Android فقط): ارتفاع شريط الحالة.
الخاصيّات
animated
ما إذا وجب تحريك الانتقال بين تغييرات خاصيّات شريط الحالة. مدعوم لكل من الخاصيّات backgroundColor، وbarStyle، وhidden.
| النوع | مطلوب |
|---|---|
| قيمة منطقيّة | لا |
backgroundColor
لون خلفيّة شريط الحالة.
| النوع | مطلوب | المنصة |
|---|---|---|
| لون | لا | Android |
barStyle
تضبط لون نص شريط الحالة.
| النوع | مطلوب |
|---|---|
enum('default', 'light-content', 'dark-content')
|
لا |
ما إذا كان شريط الحالة مخفيًا.
| النوع | مطلوب |
|---|---|
| قيمة منطقيّة | لا |
networkActivityIndicatorVisible
ما إذا وجب أن يكون مؤشر نشاط الشبكة مرئيًا.
| النوع | مطلوب | المنصة |
|---|---|---|
| قيمة منطقيّة | لا | iOS |
showHideTransition
تأثير الانتقال عند إظهار وإخفاء شريط الحالة باستخدام الخاصيّة hidden. القيمة الافتراضيّة هي 'fade'.
| النوع | مطلوب | المنصة |
|---|---|---|
enum('fade', 'slide')
|
لا | iOS |
translucent
ما إذا كان شريط الحالة نصف شفاف. إذا كانت قيمتها القيمةَ true، سيُرسَم التطبيق أسفل شريط الحالة. هذا مفيد عند استخدام لونٍ شبه شفاف لشريط الحالة.
| النوع | مطلوب | المنصة |
|---|---|---|
| قيمة منطقيّة | لا | Android |
التوابع
popStackEntry()
static popStackEntry(entry: any)
الحصول على آخر إِدخالٍ من إدخالات StatusBar من المكدس (stack) وإزالته.
المعاملات
| الاسم | النوع | مطلوب | الوصف |
|---|---|---|---|
entry
|
أي نوع | نعم | الإدخال المعاد من طرف pushStackEntry
|
pushStackEntry()
static pushStackEntry(props: any)
دفع إدخال StatusBar إلى المكدس. يجب تمرير القيمة المُعادة إلى التابع popStackEntry عند الاكتمال.
المعاملات
| الاسم | النوع | مطلوب | الوصف |
|---|---|---|---|
props
|
أي نوع | نعم | كائن يحتوي على خاصيّات StatusBar لاستخدامها في إدخال المكدس (stack entry). |
replaceStackEntry()
static replaceStackEntry(entry: any, props: any)
استبدال إدخال مكدس StatusBar موجودٍ بخاصيّاتٍ جديدة.
المعاملات
| الاسم | النوع | مطلوب | الوصف |
|---|---|---|---|
entry
|
أي نوع | نعم | الإدخال المعاد من طرف pushStackEntry لاستبداله.
|
props
|
أي نوع | نعم | كائن يحتوي على خاصيّات StatusBar لاستخدامها في إدخال المكدس البديل. |
setBackgroundColor()
static setBackgroundColor(color: string, [animated]: boolean)
ضبط لون خلفية شريط الحالة. نظام Android فقط.
المعاملات
| الاسم | النوع | مطلوب | الوصف |
|---|---|---|---|
color
|
سلسلة نصيّة | نعم | لون الخلفيّة. |
animated
|
قيمة منطقيّة | لا | تحريك تغيُّر النمط. |
setBarStyle()
static setBarStyle(style: StatusBarStyle, [animated]: boolean)
تعيين نمط شريط الحالة.
المعاملات
| الاسم | النوع | مطلوب | الوصف |
|---|---|---|---|
style
|
StatusBarStyle
|
نعم | نمط شريط الحالة المرغوب تعيينه. |
animated
|
قيمة منطقيّة | لا | تحريك تغيُّر النمط. |
setHidden()
static setHidden(hidden: boolean, [animation]: StatusBarAnimation)
إظهار أو إخفاء شريط الحالة.
المعاملات
| الاسم | النوع | مطلوب | الوصف |
|---|---|---|---|
hidden
|
قيمة منطقيّة | نعم | إخفاء شريط الحالة. |
animation
|
StatusBarAnimation
|
لا | تحريكٌ اختياريّ عند تغيير خاصيّة إخفاء شريط الحالة. |
setNetworkActivityIndicatorVisible()
static setNetworkActivityIndicatorVisible(visible: boolean)
التحكم في إظهار مؤشر نشاط الشبكة. نظام iOS فقط.
المعاملات
| الاسم | النوع | مطلوب | الوصف |
|---|---|---|---|
| visible | قيمة منطقيّة | نعم | إظهار المؤشّر. |
setTranslucent()
static setTranslucent(translucent: boolean)
التحكّم في شفافية شريط الحالة. نظام Android فقط.
المعاملات
| الاسم | النوع | مطلوب | الوصف |
|---|---|---|---|
| translucent | قيمة منطقية | نعم | جعل الشريط شفّافًا. |
تعريفات الأنواع (Type Definitions)
StatusBarAnimation
تحريك شريط الحالة.
النوع: $Enum
الثوابت
| القيمة | الوصف |
|---|---|
none
|
لا تحريك |
fade
|
تحريك تلاشي |
slide
|
تحريك انزلاق |
StatusBarStyle
نمط شريط الحالة.
النوع: $Enum
الثوابت
| القيمة | الوصف |
|---|---|
default
|
نمط شريط الحالة الافتراضي (داكن في نظام التشغيل iOS، فاتح في نظام Android) |
light-content
|
خلفيّة داكنة ونصوص بيضاء. |
dark-content
|
خلفيّة فاتحة ونصوص داكنة (يتطلّب Android API 23 أو أحدث). |