StatusBar در react native
![آموزش برنامه نویسی reactnative](https://reactapp.ir/wp-content/uploads/photo_2017-10-21_19-46-51-1.png)
![آموزش برنامه نویسی reactnative](https://reactapp.ir/wp-content/uploads/photo_2017-10-21_19-46-51-1.png)
سلام دوستان.در این تله آموزش متنی قصد داریم یادبگیریم چجوری StatusBar رو در اپلیکیشن های React Native استفاده کنیم.StatusBar در واقع نگهدارنده آیکون های اصلی در گوشی های Andriod وIos است.Status Bar برای نمایش آیکون های شبکه 2G, 3G, 4G ،wifi،ساعت و باطری در گوشی های Andriod وIos استفاده میشه.بنابراین در این آموزش قصد داریم یک اپلیکیشن با استفاده از کامپوننت StatusBar ایجاد کنیم.
1.ایمپورت کردن کامپوننت های StyleSheet, View, StatusBar, Text و Platform در پروژه.
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, View, StatusBar, Text, Platform } from 'react-native'; |
2.ایجاد یک کامپوننت View در بلاک render’s return.
1 2 3 4 5 6 7 8 9 10 11 |
render() { return ( <View style={styles.MainContainer}> </View> ); } |
3.اضافه کردن کامپوننت StatusBar در View اصلی.
barStyle :این prop به ما کمک میکنه تا رنگ StatusBar درون Text و Icons رو مشخص کنیم.این Prop از سه نوع مقدار پشتیبانی میکنه:
- light-content
- dark-content
- default
hidden : این prop کامپوننت statusBar رو پنهان میکنه و اپلیکیشن رو full screen میکنه.این prop دو مقدار true و false رو میگیره.
backgroundColor : برای مشخص کردن backgroundColor کامپوننت statusBar مورد استفاده قرار میگیره.
نکنه: در اپلیکیشن های اندورید فقط backgroundColor پشتیبانی میشه و در Ios این prop پشتیبانی نمیشه.
translucent : این prop فقط در گوشی های اندروید پشتیبانی میشه.این prop به ما اجازه میده تا اپلیکیشن زیر statusBar قرار بگیره.
networkActivityIndicatorVisible: جهت نشان دادنNetwork Activity Indicator در گوشی های Ios استفاده میشه.این prop در گوشی های اندرویدی پشتیبانی نمیشه.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
render() { return ( <View style={styles.MainContainer}> <StatusBar barStyle = "light-content" hidden = {false} backgroundColor = "#00BCD4" translucent = {true} networkActivityIndicatorVisible = {true} /> </View> ); } |
4.اضافه کردن کامپوننت Text بعد از Status Bar.
1 |
<Text style={{textAlign : 'center', fontSize: 25}}> React Native Status Bar Example Tutorial </Text> |
5.ایجاد استایل سفارشی
1 2 3 4 5 6 7 8 9 10 11 |
const styles = StyleSheet.create({ MainContainer :{ justifyContent: 'center', flex:1, marginTop: (Platform.OS == 'ios') ? 20 : } }); |
6.کد کامل برنامه در فایل App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
import React, { Component } from 'react'; import { StyleSheet, View, StatusBar, Text, Platform } from 'react-native'; export default class Myproject extends Component { render() { return ( <View style={styles.MainContainer}> <StatusBar barStyle = "light-content" hidden = {false} backgroundColor = "#00BCD4" translucent = {true} networkActivityIndicatorVisible = {true} /> <Text style={{textAlign : 'center', fontSize: 25}}> React Native Status Bar Example Tutorial </Text> </View> ); } } const styles = StyleSheet.create({ MainContainer :{ justifyContent: 'center', flex:1, marginTop: (Platform.OS == 'ios') ? 20 : } }); |
اسکرین شات در اپلیکیشن Android:
اسکرین شات در اپلیکیشن Ios:
دیدگاهتان را بنویسید