۲۹
فروردین

جلسه ۰۶ : استایل دهی در React Native

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزشی

فهرست

مقدمه

سلام و وقت بخیر خدمت کاربران محترم پی وی لرن و دوستان عزیزی که با آموزش فریم ورک React Native همراه مون هستند. تا این جا وضعیت یا State و تفاوت بین State و props و کامپوننت Container همچنین کامپوننت Presentational در React Native رو با هم بررسی نمودیم. در ادامه استایل دهی در فریم ورک React Native و انواع استایل دهی مانند کامپوننت Container و Presentational کامپوننت در فریم ورک React Native رو خواهیم داشت.

استایل دهی در فریم ورک React Native

چند راه برای استایل دهی عناصر در React Native وجود دارد.
شما می توانید از ویژگی style برای اضافه کردن styles inline استفاده کنید. با این حال، این بهترین روش نیست، زیرا این روش کد را سخت می تواند بخواند.
در این فصل، از Stylesheet برای یک طراحی استفاده خواهیم کرد.

کامپوننت Container

در این بخش، فرم کامپوننت Container را از فصل قبلی ما ساده تر می کنیم.

App.js

مثال :

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import PresentationalComponent from './PresentationalComponent'

export default class App extends React.Component {
   state = {
      myState: 'This is my state'
   }
   render() {
      return (
         <View>
            <PresentationalComponent myState = {this.state.myState}/>
         </View>
      );
   }
}

import React from 'react';

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

import PresentationalComponent from './PresentationalComponent'

export default class App extends React.Component {

state = {

myState: 'This is my state'

}

render() {

return (

<View>

</View>

);

}

کامپوننت Presentational در فریم ورک React Native

در مثال زیر ما StyleSheet را وارد می کنیم. در پایین فایل، ما StyleSheet را ایجاد می کنیم و آن را به styles ثابت اختصاص می دهیم. توجه داشته باشید که سبک های ما در camelCase هستند و ما از px یا٪ برای یک استایل طراحی استفاده نمی کنیم.
برای اعمال سبک به متن ما باید ویژگی style = {styles.myText} را به عنصر Text اضافه کنیم.

مثال :

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

const PresentationalComponent = (props) => {
   return (
      <View>
         <Text style = {styles.myState}>
            {props.myState}
         </Text>
      </View>
   )
}
export default PresentationalComponent

const styles = StyleSheet.create ({
   myState: {
      marginTop: 20,
      textAlign: 'center',
      color: 'blue',
      fontWeight: 'bold',
      fontSize: 20
   }
})

import React, { Component } from 'react'

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

const PresentationalComponent = (props) => {

return (

<View>

{props.myState}

</Text>

</View>

)

}

export default PresentationalComponent

const styles = StyleSheet.create ({

myState: {

marginTop: 20,

textAlign: 'center',

color: 'blue',

fontWeight: 'bold',

fontSize: 20

}

})

وقتی برنامه را اجرا می کنیم، خروجی زیر را دریافت می کنیم.

Presentational کامپوننت – استایل دهی در فریم ورک React Native

کلام پایانی

به این ترتیب استایل دهی در فریم ورک React Native و انواع استایل دهی مانند کامپوننت Container و Presentational کامپوننت در فریم ورک React Native رو هم بیان نمودیم. امیدوارم لذت برده باشین. در ادامه جلسات آموزشی به Flexbox خواهیم پرداخت. موفق باشین.

QR: جلسه ۰۶ : استایل دهی در React Native

به اشتراک بگذارید

آموزش React Native ,استایل دهی عناصر در React Native ,کامپوننت Container در فریم ورک React Native

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۰۶ : استایل دهی در React Native

مقدمه

استایل دهی در فریم ورک React Native

کامپوننت Container

App.js

کامپوننت Presentational در فریم ورک React Native

کلام پایانی

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ