استفاده از Flexbox در React Native

ری اکت نیتو خیلی شبیه ری اکت هست، ولی خب تفاوت هایی هم داره. یکی از تفاوت های عمده اش در مورد استایل دادن به کامپوننت هاست. برای استایل دادنی که ما استفاده می کنیم Flexbox Layout نامیده میشه (مشابه CSS). اصولا هدف Flexbox فراهم کردن یک چهارچوب ثابت (Fixed Layout) در سایز های مختلف اسکرین هست.

در ادامه می خوام به بررسی خصوصیاتی که در Flexbox استفاده می شوند همراه با مثال بپردازم:

1 - خصوصیت flecDirection :

خب اول یک کامپوننت می سازیم و سه تا المان توش می سازیم. بیاین فرض کنین که کامپوننت ما یک والد هستش و سه المان ما هم فرزندان اون هستند. خب اولین چیزی که ما باید در موردش تصمیم بگیریم این هست که توی کدوم جهت در المان والد ما می خواهیم این باکس ها را بچینیم. خب این موضوع با خصوصیت flexbox زیر تعریف میشه :

flexDirection: 'row' | 'column'

خب همونطور که پیداست flexDirection دو مقدار 'row' و 'column' اصلی داره. (می گم اصلی چون معکوس هر کدوم از اون دو تا رو هم داره ولی فعلا شما همین ها رو در نظر بگیرید.). خب اگه ما مقدار 'row' را انتخاب کنیم به این معنی هستش که ما محور اصلی ما سطری خواهد بود، بنابراین فرزندان المان ما (همون سه تا باکس) بصورت افقی کنار هم چیده می شوند. و یا اگه ما مقدار 'column' را انتخاب کنیم فرزندان ما بصورت عمودی کنار هم چیده می شوند.

نکته : بصورت پیش فرض برای المان ها flexDirection مقدار 'column' را دارد.

برای مثال:

بصورت کلی آرایش المان برای flexDirection بصورت زیر هست:

این خصوصیت فرزندان را می تونه در طول محور اصلی مرتب کنه و می تونه مقادیر زیر را بپذیره :

justifyContent: 'flex-start' | 'center' | 'flex-end' | 'space-around' | 'space-between'

خب فرض کنین که جهت اصلی ما 'column' هست نحوه چیدمان هر کدوم از مقادیر فوق بصورت زیر هست:

خب همونطور که پیداست با استفاده از مقادیر 'flex-start' و 'flex-end' و 'center' ما می تونیم فرزندان در جهت 'column' مرتب کنیم و همچنین با استفاده از مقادیر 'space-between' و 'space-around' می تونیم بین فرزندان فاصله بندازیم. (راحت، نه ؟ )

3 - خصوصیت alignItems:

این خصوصیت می تونه مقادیر زیر را بپذیره :

alignItems: 'flex-start' | 'center' | 'flex-end' | 'stretch'

خب هر کدوم ازین مقادیر رو ه توضیح مختصر در موردش می دم :

• مقدار 'flex-start' : این مقدار فرزندان رو از ابتدا (سمت چپ در چهارچوب های چپ چین) و یا بالای (بسته به جهت اصلی) المان والد می چینه.
• مقدار 'flex-end' : این مقدار فرزندان رو از انتها (سمت راست در چهارچوب های چپ چین) و یا پایین (بسته به جهت اصلی) المان والد می چینه.
• مقدار 'center' : این مقدار فرزندان رو در وسط المان والد می چینه.
• مقدار 'stretch' : این مقدار فرزندان رو در جهت مخالف محور اصلی می کشه تا به انتهای والد برسند و فقط زمانی اعمال میشه که فرزند اندازه ثابت شده ای نداشه باشه.

4 - خصوصیت alignSelf :

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

alignSelf: 'flex-start' | 'center' | 'flex-end' | 'stretch'

نکته: این خصوصیت اثر خصوصیت alignItems که در المان والد استایل دهی شده را از بین می بره و مقدار خودش را اعمال می کنه.

این خصوصیت فرزندان را می تونه در طول محور مخالف اصلی مرتب کنه و می تونه مقادیر زیر را بپذیره :

alignContent: 'flex-start' | 'center' | 'flex-end' | 'space-around' | 'space-between'

خب فرض کنین که جهت اصلی ما 'row' هست نحوه چیدمان هر کدوم از مقادیر فوق بصورت زیر هست:

5 - خصوصیت flexWrap:

خصوصیت مثل خصوصیت flex-wrap در CSS کار می کنه. مثلا اگه ما فرزندان زیادی داشته باشیم همه فرزندان در جهت اصلی کنار هم قرار می گیرند در یک خط، البته وقتی که ما از این خصوصیت با مقدار 'wrap' استفاده نکینم.

این خصوصیت می تونه مقدار زیر را بپذیرد:

flexWrap: 'wrap' | 'nowrap'

خب بیاین عملکرد این دو تا مقدار رو با هم مقایسه کنیم. فرض کنید جهت اصلی ما 'column' هست.