سلام و وقت بخیر خدمت کاربران محترم پی وی لرن و دوستان عزیزی که با آموزش فریم ورک React Native همراه مون هستند. در قسمت قبل به مبحث Picker در React Native یا نحوه استفاده از Picker در فریم ورک React Native رسیدیم و حالا نوبت آن رسیده تا در مورد status bar یا نوار وضعیت در React Native صحبت نماییم. پس بدون اتلاف وقت مبحث status bar یا نوار وضعیت در React Native رو آغاز می نماییم. همراه ما باشید.
در این فصل ما به شما نحوه کنترل ظاهر نوار وضعیت در React Native را نشان خواهیم داد.
استفاده از نوار وضعیت آسان است و همه شما برای تغییرات در آن نیاز است که properties را تنظیم کنید.
خصوصیات hidden را می توان برای مخفی کردن نوار وضعیت استفاده کرد. در مثال ما آن را به false تنظیم کرده ایم .این مقدار پیش فرض است.
barstyle می تواند سه مقدار – dark-content, light-content و default، را داشته باشد.
این کامپوننت دارای چند ویژگی دیگر است که می تواند مورد استفاده قرار گیرد. برخی از آن ها مخصوص آندروید یا IOS هستند. شما می توانید آن را در اسناد رسمی یا official documentation بررسی کنید.
1 2 3 4 5 6 7 8 9 | import React, { Component } from 'react'; import { StatusBar } from 'react-native' const App = () => { return ( <StatusBar barStyle = "dark-content" hidden = {false} backgroundColor = "#00BCD4" translucent = {true}/> ) } export default App |
اگر برنامه را اجرا کنیم، نوار وضعیت نمایش داده خواهد شد و محتوا رنگ تیره خواهد داشت.
خب دوستان عزیز، در این بخش در مورد status bar یا نوار وضعیت در فریم ورک React Native صحبت نمودیم. امیدوارم از مباحث نهایت استفاده رو برده باشین. در قسمت بعد به Switch یا سوییچ در فریم ورک راکت نیتیو خواهیم پرداخت. موفق باشید.