آموزش flex در برنامه نویسی react native

0 دیدگاه

در خدمت شما عزیزان هستیم با آموزش flex در برنامه نویسی react native از وب سایت آموزش برنامه نویسی سورس باران. در جلسه هفتم آموزش ریکت نیتیو، یاد میگیرید که چجوری با flex در react native کار کنید .با استفاده از flex ما میتوانیم عرض و ارتفاع رو با توجه با اندازه صفحه نمایش دستگاه به صورت انعطاف پذیر مشخص کنیم. با ما همراه باشید…

آموزش flex در برنامه نویسی react native

برای قرار دادن اندازه های مختلف صفحه نمایش، React Native پشتیبانی از Flexbox را ارائه می دهد. ما از همان کد استفاده می کنیم که در بخش React Native – Styling استفاده کردیم. در این صورت فقط PresentationProject را تغییر خواهیم داد.

آموزش طرح بندی یا Layout در React Native

برای رسیدن به طرح مورد نظر، flexbox سه ویژگی اصلی را ارائه می دهد:

flexDirection
justifyContent
alignItems

جدول زیر گزینه های احتمالی را نشان می دهد.

The following table shows the possible options.

ویژگی	مقادیر	توضیحات
flexDirection	‘column’, ‘row’	مورد استفاده برای تعیین این که آیا عناصر به صورت عمودی یا به صورت افقی تنظیم شوند.
justifyContent	‘center’, ‘flex-start’, ‘flex-end’, ‘space-around’, ‘space-between’	مورد استفاده برای تعیین نحوه قرار دادن عناصر داخل ظرف یا container است.
alignItems	‘center’, ‘flex-start’, ‘flex-end’, ‘stretched’	مورد استفاده برای تعیین اینکه چگونه عناصر باید داخل container در امتداد محور ثانویه توزیع شوند (در مقابل flexDirection)

اگر می خواهید آیتم ها را عمودی تراز کنید و آنها را متمرکز کنید، می توانید از کد زیر استفاده کنید.

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

const Home = (props) => {
   return (
      <View style = {styles.container}>
         <View style = {styles.redbox} />
         <View style = {styles.bluebox} />
         <View style = {styles.blackbox} />
      </View>
   )
}

export default Home

const styles = StyleSheet.create ({
   container: {
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: 'grey',
      height: 600
   },
   redbox: {
      width: 100,
      height: 100,
      backgroundColor: 'red'
   },
   bluebox: {
      width: 100,
      height: 100,
      backgroundColor: 'blue'
   },
   blackbox: {
      width: 100,
      height: 100,
      backgroundColor: 'black'
   },
})

import React, { Component } from 'react'

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

const Home = (props) => {

return (

</View>

)

}

export default Home

const styles = StyleSheet.create ({

container: {

flexDirection: 'column',

justifyContent: 'center',

alignItems: 'center',

backgroundColor: 'grey',

height: 600

redbox: {

width: 100,

height: 100,

backgroundColor: 'red'

bluebox: {

width: 100,

height: 100,

backgroundColor: 'blue'

blackbox: {

width: 100,

height: 100,

backgroundColor: 'black'

})

خروجی به شکل زیر می باشد:

اگر آیتم ها باید به سمت راست منتقل شوند و فاصله ها باید بین آنها اضافه شود، می توانیم از کد زیر استفاده کنیم :

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

const App = (props) => {
   return (
      <View style = {styles.container}>
         <View style = {styles.redbox} />
         <View style = {styles.bluebox} />
         <View style = {styles.blackbox} />
      </View>
   )
}

export default App

const styles = StyleSheet.create ({
   container: {
      flexDirection: 'column',
      justifyContent: 'space-between',
      alignItems: 'flex-end',
      backgroundColor: 'grey',
      height: 600
   },
   redbox: {
      width: 100,
      height: 100,
      backgroundColor: 'red'
   },
   bluebox: {
      width: 100,
      height: 100,
      backgroundColor: 'blue'
   },
   blackbox: {
      width: 100,
      height: 100,
      backgroundColor: 'black'
   },
})

import React, { Component } from 'react'

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

const App = (props) => {

return (

</View>

)

}

export default App

const styles = StyleSheet.create ({

container: {

flexDirection: 'column',

justifyContent: 'space-between',

alignItems: 'flex-end',

backgroundColor: 'grey',

height: 600

redbox: {

width: 100,

height: 100,

backgroundColor: 'red'

bluebox: {

width: 100,

height: 100,

backgroundColor: 'blue'

blackbox: {

width: 100,

height: 100,

backgroundColor: 'black'

})

مثال 2 آموزش flex در برنامه نویسی react native

در این آموزش متنی ما یک View والد با flex:1 اینجاد میکنیم. این استایل تمام عرض و ارتفاع صفحه را در بر میگیرد.سپس سه View فرزند را داخل View اصلی ایجاد میکنیم و با استفاده از flex عرض و ارتفاع را برای این سه View فرزند تقسیم میکنیم.

برای شروع ابتدا یک پروژه جدید ایجاد نمایید، سپس کامپوننت های StyleSheet و View در بلاک import را اضافه کنید

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

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

تگ View در بلاک render return را اضافه کنید

render() {
    return (
 
     <View>
 
       
 
      </View>
 
    );
  }

render() {

return (

<View>

</View>

);

}

استایل flex:1 به View والد دهید

	render() {
    return (
     <View style={{flex :1 }}>
 
        
      </View>
    );
  }

render() {

return (

</View>

);

}

در این قسمت View داخل View والد را اضافه می کنیم:

render() {
    return (
     <View style={{flex :1 }}>
 
        <View />
 
        <View />
 
        <View />
 
      </View>
    );
  }

render() {

return (

</View>

);

}

تنظیم flex برای View های فرزند با استفاده از استایل:

render() {
return (
<View style={{flex :1 }}>
<View style={{flex :1, backgroundColor: '#FF5722'}} />
<View style={{flex :2, backgroundColor: '#673AB7'}} />
<View style={{flex :3, backgroundColor: '#FFEB3B'}} />
</View>
);
}

render() {

return (

</View>

);

}

کد کامل برنامه در فایل index.js به همراه خروجی فایل را در زیر مشاهده می نمایید

import React, { Component } from 'react';
import { AppRegistry, View, StyleSheet } from 'react-native';
class Myproject extends Component {
render() {
return (
<View style={{flex :1 }}>
<View style={{flex :1, backgroundColor: '#FF5722'}} />
<View style={{flex :2, backgroundColor: '#673AB7'}} />
<View style={{flex :3, backgroundColor: '#FFEB3B'}} />
</View>
);
}
}
AppRegistry.registerComponent('Myproject', () => Myproject);

import React, { Component } from 'react';

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

class Myproject extends Component {

render() {

return (

</View>

);

}

AppRegistry.registerComponent('Myproject', () => Myproject);

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

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

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

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

آموزش App در React Native

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

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

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

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

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

نظرات

صابر بوستانی

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

آموزش انیمیشن‌ سازی دو بعدی با موهو – خلق انیمیشن‌ های خلاقانه شبیه دیرین دیرین

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

آموزش flex در برنامه نویسی react native

آموزش flex در برنامه نویسی react native

آموزش طرح بندی یا Layout در React Native

مثال 2 آموزش flex در برنامه نویسی react native

صابر بوستانی

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

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

نظرات

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

لغو پاسخ

مطالب مرتبط