Style در react native


در react navie یک پراپ با نام style وجود داره که با استفاده از این پراپ میتونیم ظاهر اپلیکشین خودمونو زیبا و سفارشی کنیم.اما برای style دهی میتونیم از چهار روش استفاده کنیم که در این آموزش قصد داریم این چهار روشو باهم بررسی کنیم و اون هارو یاد بگیریم . البته در ویدئو زیر هم من کاملا این مباحثو توضیح دادم و اگه علاقه داشتید میتونید این ویدئو رو تماشا کنید .
روش اول (استایل درون خطی):
.در این روش ما style خودمون رو درون تگ مورد نظر اعمال میکنیم.
1 |
<Text style={{Color: 'black'}}> </Text> |
روش دوم :
در این روش style , یک متغیر تعریف میکنیم و از اون در تگ های مختلف استفاده میکنیم. از این روش زمانی استفاده میشه که چندین تگ با style های مشابه داشته باشیم.
برای مثال:
ابتدا StyleSheet را به پروژه ایمپورت میکنیم.
1 |
import { View, Text ,StyleSheet} from 'react-native'; |
سپس یک متغیر با نام دلخواه ایجاد میکنیم(نام متغیر در اینجا styles است) و یک نام دلخواه برای کلاس (نام کلاس در اینجا container است) در نظر میگیریم و استایل های مورد نیازو بهش میدیم:
1 2 3 4 5 6 |
const styles = StyleSheet.create({ container:{ flex:1, backgroundColor: '#12fc52' } }) |
و برای استفاده از اون کلاس در کامپوننت مورد نظر پراپ style مینویسیم و درون اون نام StyleSheet و نام کلاس خودمونو قرار میدیم تا style های که خواستیم به درستی به کامپوننت داده بشه:
1 |
<View style={styles.container}></View> |
کد کامل App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import React, { Component } from 'react'; import { View, StyleSheet} from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.container}> </View> ); } } const styles = StyleSheet.create({ container:{ flex:1, backgroundColor: '#12fc52' } }) |
روش سوم:(ترکیبی از روش اول و دوم)
این روش برای زمانی استفاده میشه که ما چندین تگ با استایل های مشخص داشته باشیم و بخوایم به یکی از تک های خودمون یک style اضافی بدیم .
برای مثال:
در مثال پایین دو باکس با استفاده از کلمپوننت View درست کردیم .این دو باکس هر دو style های مشابه دارن به همین دلیل از کلاس استفاده کردیم اما هر View رنگ پس زمینه متفاوتی داره .برای دادن این style ها تنها کافیه کلاس viewColor و رنگ پس زمینه مختلف برای هر View مانند زیر استفاده کنیم:
1 |
style={[styles.viewColor,{backgroundColor:'rgb(192,50,210)'}]} |
کد کامل 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 |
import React, { Component } from 'react'; import { View, Text ,Button ,StyleSheet} from 'react-native'; export default class App extends Component { constructor(props){ super(props); this.state={ title:'Home page' } } render() { return ( <View style={styles.container}> <View style={[styles.viewColor,{backgroundColor:'rgba(50,60,248,0.6)'}]}></View> <View style={[styles.viewColor,{backgroundColor:'rgb(192,50,210)'}]}></View> </View> ); } } const styles = StyleSheet.create({ container:{ flex:1, backgroundColor: '#12fc52', justifyContent: 'center', alignItems: 'center', }, viewColor:{ width:220, height: 220, borderRadius: 5, } }) |
روش چهارم:(style خارجی)
در این روش از استایل خارجی استفاده میکنیم برای این کار یک فایل جدید با نام دلخواه ایجاد میکنیم (در اینجا نام فایل Style.js هست) و مثل روش اول برای style دادن style میدهیم و در پایان از فایل خودمون خروجی میگیریم:
نکته: برای اینکه در فایل هایه دیگه پروژمون از این style ها استفاده کنیم از این دستور استفاده میکنیم (نام کلاس export default)
فایل کامل style.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import {StyleSheet} from 'react-native'; const styles = StyleSheet.create({ container:{ flex:1, backgroundColor: '#12fc52', justifyContent: 'center', alignItems: 'center', }, viewColor:{ width:220, height: 220, borderRadius: 5, backgroundColor: 'hsl(310,100%,20%)', marginTop: 10 } }) export default styles; |
حالا نوبت استفاده از این style ها در در پروژه رسیده.
برای این کار در ابتدایه صفحه مورد نظر فایل style.js رو import و استفاده از اون استفاده میکنیم:
فایل کامل App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import React, { Component } from 'react'; import { View,} from 'react-native'; import styles from './components/style' export default class App extends Component { render() { return ( <View style={styles.container}> <View style={styles.viewColor}></View> <View style={styles.viewColor}></View> </View> ); } } |
مطالب زیر را حتما مطالعه کنید
چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟
تفاوت توسعه برنامه های android و ios
آموزش آرایه در جاوا اسکریپت ( JavaScript)
استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)
نمایش PDF در react native
استفاده از Mapbox در react native (ری اکت نیتیو)
2 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
چرا نمیشه کامل از استایل شیت استفاده کرد؟
من خیلی جاها که از استایل شیت استفاده میکنم نرم افزارم گیر میکنه اما وقتی این لاینش میکنم درست میشه.
سلام
نباید مشکلی وجود داشته باشه
یعنی تفاوتی وجود نداره که چه شما inline استایل بدید چه با استفاده از stylesheet