آموزش استایل دهی در برنامه نویسی React Native

0 دیدگاه

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

استایل دهی در React Native

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

کامپوننت Container در ریکت نیتیو

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

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 در ریکت نیتیو

در مثال زیر ما 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

}

})

پس از اجرا برنامه خروجی زیر را مشاهده می کنیم

امیدواریم این جلسه از آموزش React Native مورد توجه دوستان و کاربران عزیز قرار گرفته باشد…

لیست جلسات قبل آموزش React Native

React Native یا ریکت نیتیو چیست؟

آموزش React Native – نصب و تنظیم محیط React Native

آموزش App در React Native

آموزش کار با State در React Native

آموزش کار با کامپوننت Props در React Native

5/5 - (1 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

برچسب ها: آموزش React Native, آموزش برنامه نویسی, آموزش ریکت نیتیو, آموزش کامل ریکت نیتیو

صابر بوستانی

داستان من با دنیای برنامه‌ نویسی آغاز شد، و در ادامه به عنوان یک توسعه‌ دهنده نرم‌ افزار، طراح وب سایت و متخصص سئو، مهارت ‌های تکنیکی و تحلیلی خودم رو پرورش دادم. علاقه م به دنیای مالی منو به سمت یادگیری ترید و معامله‌گری سوق داد. و در حال حاضر در برنامه نویسی و معامله گری ارز دیجیتال انجام میدم. از سال 96 سعی کردم معامله گری در کریپتو رو یاد بگیرم. ترید و معامله گری برام پر از چالش و شکست‌ های متعدد بود. اما هر شکست، درسی ارزشمند برام داشت و من رو به یک تریدر و معامله گر قوی‌ تر و هوشمندتر تبدیل کرد. با پشتکار و یادگیری مداوم، تونستم به موفقیت‌های قابل توجهی دست یابم و به معامله گری موفق تبدیل بشم. در اینجا بزرگترین تجربیات و مهمترین دانش خودم رو در اختیار شما قرار میدم تا در مدت زمان کوتاه تر و شکست های کمتر در این مسیر به موفقیت برسید.

آموزش گام به گام برنامه نویسی اندروید با B4A (پروژه محور)

منبع : سورس باران
رمز فايل : www.sourcebaran.com
انتشار: ۲۳ دی ۱۳۹۸

آموزش استایل دهی در برنامه نویسی React Native

استایل دهی در React Native

کامپوننت Container در ریکت نیتیو

کامپوننت Presentational در ریکت نیتیو

صابر بوستانی

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط