آموزش flex در برنامه نویسی react nativeReviewed by صابر بوستانی on Feb 21Rating: 5.0
 آموزش flex در برنامه نویسی react native

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

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

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

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

 

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

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

  1. flexDirection
  2. justifyContent
  3. 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)

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

 

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

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

 

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

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

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

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

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

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

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

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

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

 

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

  1. React Native یا ریکت نیتیو چیست؟
  2. آموزش React Native – نصب و تنظیم محیط React Native
  3. آموزش App در React Native
  4. آموزش کار با State در React Native
  5. آموزش کار با کامپوننت Props در React Native
  6. آموزش استایل دهی در برنامه نویسی React Native