StatusBar في React Native

مكون للتحكم في شريط حالة التطبيق.

الاستخدام مع المكوّن Navigator

من الممكن تركيب العديد من مكونات 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')‎‎	لا

‎‎hidden‎‎

ما إذا كان شريط الحالة مخفيًا.

النوع	مطلوب
قيمة منطقيّة	لا

‎‎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 أو أحدث).

مصادر

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