Style در react native

در react navie یک پراپ با نام style وجود داره که با استفاده از این پراپ میتونیم ظاهر اپلیکشین خودمونو زیبا و سفارشی کنیم.اما برای style دهی میتونیم از چهار روش استفاده کنیم که در این آموزش قصد داریم این چهار روشو باهم بررسی کنیم و اون هارو یاد بگیریم . البته در ویدئو زیر هم من کاملا این مباحثو توضیح دادم و اگه علاقه داشتید میتونید این ویدئو رو تماشا کنید .

روش اول (استایل درون خطی):

.در این روش ما style خودمون رو درون تگ مورد نظر اعمال میکنیم.

<Text style={{Color: 'black'}}> </Text>

1	<Text style={{Color: 'black'}}> </Text>

روش دوم :

در این روش style , یک متغیر تعریف میکنیم و از اون در تگ های مختلف استفاده میکنیم. از این روش زمانی استفاده میشه که چندین تگ با style های مشابه داشته باشیم.

برای مثال:

ابتدا StyleSheet را به پروژه ایمپورت میکنیم.

import { View, Text ,StyleSheet} from 'react-native';

1	import { View, Text ,StyleSheet} from 'react-native';

سپس یک متغیر با نام دلخواه ایجاد میکنیم(نام متغیر در اینجا styles است) و یک نام دلخواه برای کلاس (نام کلاس در اینجا container است) در نظر میگیریم و استایل های مورد نیازو بهش میدیم:

 const styles = StyleSheet.create({
    container:{
      flex:1,
      backgroundColor: '#12fc52'
    }
  })

const styles = StyleSheet.create({

container:{

flex:1,

backgroundColor: '#12fc52'

}

})

و برای استفاده از اون کلاس در کامپوننت مورد نظر پراپ style مینویسیم و درون اون نام StyleSheet و نام کلاس خودمونو قرار میدیم تا style های که خواستیم به درستی به کامپوننت داده بشه:

<View style={styles.container}></View>

1	<View style={styles.container}></View>

کد کامل App.js

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'
    }
  })

import React, { Component } from 'react';

import { View, StyleSheet} from 'react-native';

export default class App extends Component {

render() {

return (

</View>

);

}

const styles = StyleSheet.create({

container:{

flex:1,

backgroundColor: '#12fc52'

}

})

روش سوم:(ترکیبی از روش اول و دوم)

این روش برای زمانی استفاده میشه که ما چندین تگ با استایل های مشخص داشته باشیم و بخوایم به یکی از تک های خودمون یک style اضافی بدیم .

برای مثال:

در مثال پایین دو باکس با استفاده از کلمپوننت View درست کردیم .این دو باکس هر دو style های مشابه دارن به همین دلیل از کلاس استفاده کردیم اما هر View رنگ پس زمینه متفاوتی داره .برای دادن این style ها تنها کافیه کلاس viewColor و رنگ پس زمینه مختلف برای هر View مانند زیر استفاده کنیم:

style={[styles.viewColor,{backgroundColor:'rgb(192,50,210)'}]}

1	style={[styles.viewColor,{backgroundColor:'rgb(192,50,210)'}]}

کد کامل App.js

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,
    }
  })

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>

);

}

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 میدهیم و در پایان از فایل خودمون خروجی میگیریم:

Scale کردن اپلیکیشن های React Native برای Tablet

نکته: برای اینکه در فایل هایه دیگه پروژمون از این style ها استفاده کنیم از این دستور استفاده میکنیم (نام کلاس export default)

فایل کامل style.js

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;

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

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>
      );
    }
  }

import React, { Component } from 'react';

import { View,} from 'react-native';

import styles from './components/style'

export default class App extends Component {

render() {

return (

</View>

);

}

مطالب زیر را حتما مطالعه کنید

2 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

مجید گفت:

می 17, 2021 در 6:48 ب.ظ

چرا نمیشه کامل از استایل شیت استفاده کرد؟
من خیلی جاها که از استایل شیت استفاده میکنم نرم افزارم گیر میکنه اما وقتی این لاینش میکنم درست میشه.

پاسخ
- مهدی گفت:
  
  می 18, 2021 در 8:48 ق.ظ
  
  سلام
  نباید مشکلی وجود داشته باشه
  یعنی تفاوتی وجود نداره که چه شما inline استایل بدید چه با استفاده از stylesheet
  
  پاسخ

روش اول (استایل درون خطی):

روش دوم :

روش سوم:(ترکیبی از روش اول و دوم)

روش چهارم:(style خارجی)

مطالب زیر را حتما مطالعه کنید

چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟

تفاوت توسعه برنامه های android و ios

آموزش آرایه در جاوا اسکریپت ( JavaScript)

استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)

نمایش PDF در react native

استفاده از Mapbox در react native (ری اکت نیتیو)

2 دیدگاه

دیدگاهتان را بنویسید لغو پاسخ