مشخصات مقاله
-
0
-
0.0
-
2415
-
0
-
0
آموزش Layout در React Native با استفاده از flexbox-آموزش React Native
Layout در React Native با استفاده از flexbox
یک component می تواند چیدمان component های child خود را با استفاده از algorithm Flexbox تعیین کند. Flexbox برای ایجاد یک Layout پایدار روی صفحات با سایزهای مختلف طراحی شده است.
با استفاده از ترکیبی از flexDirection، alignItems، و justifyContent می توان Layout مناسب طراحی کرد.
Flexbox در React Native شبیه CSS عمل می کند. با این تفاوت که مقادیر پیش فرض متفاوتند. flexDirection به جای row، مقدار پیش فرض column دارد، و flex فقط یک عدد می گیرد.
آموزش پروژه محور React Native
Flex
Flex تعیین می کند آیتم ها چگونه در عرض محور اصلی، فضای موجود را پر کنند. فضا برحسب مقدار flex مربوط به هر المان، تقسیم بندی می شود.
در مثال زیر، view های قرمز، زرد و سبز هر سه childهای View با flex:1 هستند. view قرمز از flex: 1 استفاده می کند، view زرد flex: 2 و view سبز flex: 3. جمع مقادیر flex این سه 6 است که به این معناست که view قرمز 6/1 فضا، view زرد 6/2 و view سبز 6/3 فضا را می گیرد.
Flex Direction
Direction: جهت چیدمان childهای یک node را تعیین می کند. به آن محور اصلی نیز می گویند. محور دیگر، محور متقاطع، محور عمود به محور اصلی است، یا همان محوری است که خطوط wrapping را دربرمیگیرد.
Row: کامپوننت های child را از چپ به راست میچیند. اگر wrapping فعال باشد، خط بعد دقیقا از زیر اولین آیتم از چپ شروع می شود.
Column (مقدار پیش فرض): component های child را از بالا به پایین می چیند. اگر wrapping فعال باشد، خط بعد از اولین آیتم سمت چپ از بالا شروع می شود.
reverse: کامپوننت های child را از راست به چپ میچیند. اگر wrapping فعال باشد، خط بعد از زیر اولین آیتم از راست شروع می شود.
column-reverse: کامپوننت های child را از پایین به بالا می چیند. اگر wrapping فعال باشد، خط بعدی اولین آیتم سمت چپ از پایین شروع می شود.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | import React, { Component } from 'react';import { View } from 'react-native';export default class FlexDirectionBasics extends Component {render() {return ( // Try setting `flexDirection` to `column`. < View style={ {flex: 1, flexDirection: 'row'} } > < View style={ {width: 50, height: 50, backgroundColor: 'powderblue'} } / > < View style={ {width: 50, height: 50, backgroundColor: 'skyblue'} } / > < View style={ {width: 50, height: 50, backgroundColor: 'steelblue'} } / > < /View >);}};<button></button> |
آموزش react
Layout Direction
Layout Direction تعیین کننده ی جهتی است که در آن childها و متن در یک سلسله مراتب باید چیده شوند. Layout Direction تعیین کننده این هستند که start و end به کدام لبه ها اشاره می کنند. به طور پیش فرض چیدمان صفحات در React Native بصورت LTR است. در این حالت start به چپ و end به راست اشاره می کند.
LTR: (مقدار پیش فرض) متن ها و child ها از چپ به راست چیده می شوند. Margin و padding که برای start یک المان تعیین می شوند به سمت چپ اعمال می شوند.
RTL: متن ها و child ها از راست به چپ چیده می شوند. Margin و padding که برای start یک المان تعیین می شوند به سمت راست اعمال می شوند.
تراز کردن محتوا (justify Content)
justifyContent نحوه قرار گرفتن childها در راستای محور اصلی container شان را تعیین می کند. برای مثال، می توانید با استفاده از این ویژگی یک المان child را وسط یک container قرار دهید؛ به این صورت که برای افقی وسط بودن، flexDirection را مساوی row قرار دهید، برای عمودی وسط بودن، flexDirection را مساوی column قرار دهید.
flex-start (مقدار پیش فرض): child های یک container را از ابتدای محور اصلی آن، مرتب می کند.
flex-end:المان های child های یک container را از انتهای محور اصلی آن، مرتب می کند.
Center:المان های child های یک container را در راستای محور اصلی، وسط قرار می دهد.
space-between: المان های child را در راستای محور اصلی container قرار می دهد و فضای اضافه را بین آن ها توزیع می کند.
space-around: المان های child را در راستای محور اصلی container قرار می دهد و فضای اضافه را اطراف آن ها توزیع می کند. در مقایسه با space-between، فضای اضافه به ابتدا و انتهای اولین و آخرین child افزوده می شود.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | import React, { Component } from 'react';import { View } from 'react-native';export default class JustifyContentBasics extends Component { render() { return ( // Try setting `justifyContent` to `center`. // Try setting `flexDirection` to `row`.< View style={ { flex: 1, flexDirection: 'column', justifyContent: 'space-between', } } >< View style={ {width: 50, height: 50, backgroundColor: 'powderblue'} } / >< View style={ {width: 50, height: 50, backgroundColor: 'skyblue'} } / >< View style={ {width: 50, height: 50, backgroundColor: 'steelblue'} } / > < /View > ); }};<button></button> |
کلاس آموزش React Native
تراز کردن آیتم ها (align Items)
alignItems تعیین کننده نحوه قرار گرفتن childها در راستای محور متقاطع container است. بسیار شبیه justifyContent عمل می کند، اما به جای اعمال شدن به محور اصلی، روی محور متقاطع اعمال می شود.
Stretch (مقدار پیش فرض): المان های child های یک container را امتداد می دهد تا کامل محور متقاطع را بگیرند و height معادل محور متقاطع داشته باشند.
flex-start: المان های child های یک container را از ابتدای محور متقاطع آن، مرتب می کند.
flex-end: المان child های یک container را از انتهای محور متقاطع آن، مرتب می کند.
Child: Center های یک container را در راستای محور متقاطع ، وسط قرار می دهد.
Baseline: المان های child را نسبت به یک نقطه مشترک مرتب می کند. المان های child می توانند طوری تنظیم شوند که نقطه ارجاعی برای parentشان باشند.
برای اینکه استفاده از Stretch موثر باشد، المان child نباید در راستای محور دیگر بعد ثابت داشته باشد. در مثال زیر، مقداردهی به صورت alignItems: stretch اثری ندارد، مگر زمانی که width: 50 از المان child حذف شود.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | import React, { Component } from 'react';import { View } from 'react-native';export default class AlignItemsBasics extends Component { render() { return ( // Try setting `alignItems` to 'flex-start' // Try setting `justifyContent` to `flex-end`. // Try setting `flexDirection` to `row`.< View style={ { flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'stretch', }} >< View style={ {width: 50, height: 50, backgroundColor: 'powderblue'}} / >< View style={ {height: 50, backgroundColor: 'skyblue'}} / >< View style={ {height: 100, backgroundColor: 'steelblue'}} / > < /View > ); }};<button></button> |
AlignSelf
alignSelf موارد مشابهی دارد و مثل alignItems عمل می کند اما به جای اثر روی child درون container، می توان آن را روی یک المان اعمال کرد ومستقل از parent، آن را تغییر داد. alignSelf هرچیزی که توسط aligItems و از طریق parent اعمال شده را، بی اثر می کند.
Align Content
alignContent توزیع خطوط در راستای محور عرضی را تعیین می کند. فقط زمانی اثر آن اعمال می شود که آیتم ها با استفاده از flexWrap در چندین خط شکسته (wrapped) شوند.
start (مقدار پیش فرض) خطوط شکسته (wrapped شده) را از ابتدای محور متقاطع container مرتب می کند.
flex-start (مقدار پیش فرض) خطوط شکسته (wrapped شده) را از ابتدای محور متقاطع container مرتب می کند.
flex-end خطوط شکسته را از انتهای محور متقاطع container مرتب می کند.
Stretch خطوط شکسته را امتداد می دهد تا کامل محور متقاطع container را پر کنند.
center خطوط شکسته را در راستای محور متقاطع container ، وسط قرار می دهد.
space-between خطوط شکسته را در راستای محور اصلی container قرار می دهد و فضای اضافه را بین آن ها توزیع می کند.
space-around خطوط شکسته را در راستای محور اصلی container قرار می دهد و فضای اضافه را اطراف آن ها توزیع میکند. در مقایسه با space-between، فضای اضافه به ابتدا و انتهای اولین و آخرین خط افزوده میشود.
Flex Wrap
ویژگی flexWrap روی container ها مقداردهی می شود و به کمک آن می توان تعیین کرد هنگامی که المان های child در راستای محور اصلی از container بیرون میزنند، چه اتفاقی بیوفتد. به طور پیش فرض المان های child باید در یک خط قرار بگیرند ( که ممکن است باعث جمع شدن غیرعادی المان ها شود). اگر شکستن خطوط (wrapping) ممکن باشد، آیتم ها در راستای محور اصلی در چند خط شکسته می شوند.
آموزش پروژه محور React Native
موقع شکستن خطوط می توان از alignContent برای تعیین چگونگی قرارگیری خطوط در container، استفاده کرد.
Flex Basis، Grow و Shrink
flexGrow تعیین می کند چگونه فضای درون container بین المان های child در راستای محور اصلی، توزیع شود. پس از قرارگرفتن المان های child درون container ، فضای باقی مانده با توجه به مقدار این متغیر در المان های child، توزیع می شود.
flexGrow هر مقدار اعشاری بزرگ تر 0 را می پذیرد و صفر مقدار پیش فرض آن است. یک container براساس مقدار flexGrow المان های child خود، فضای باقی مانده را بین آن ها توزیع می کند.
flexShrink تعیین می کند چگونه المان های child در راستای محور اصلی کوچک شوند، در صورتی که اندازه آن ها از اندازه container شان درراستای محور اصلی، بیشتر شود. FlexShrink بسیار شبیه flexGrow عمل می کند و استفاده هم زمان از هر دو کمک می کند المان های child براساس نیاز بزرگ یا کوچک شوند.
flexShrink هر مقدار اعشاری بزرگ تر 0 را می پذیرد و مقدار پیش فرض آن یک است. یک container براساس مقدار flexShrink المان های child خود، آن ها را کوچک می کند.
FlexBasis یک روش مستقل از محور برای تعیین اندازه پیش فرض یک آیتم در راستای محور اصلی است. مقداردهی به flexBasis برای یک المان child شبیه مقداردهی به width آن المان است، درصورتی که parent آن flexDirection: row داشته باشد، و یا مقداردهی hight به آن المان درصورتی که parent آن flexDirection: column داشته باشد. مقدار FlexBasis یک آیتم، سایز آن آیتم است؛ سایز پیش فرضی که قبل از هرگونه بزرگ و کوچک شدن المان به آن اختصاص می یابد.
Width و Height
مقدار Width یک المان نشان دهنده ی Width محتوای آن المان است. به طور مشابه، Height یک المان Height محتوای آن است.
می توان به هردو مقادیر زیر را نسبت داد:
Auto مقدار پیش فرض است. React Native مقادیر width/height را برای المان بر اساس محتوایش محاسبه می کند.
Pixels تعیین کننده width/height براساس pixel به صورت absolute می باشد. با توجه به استایل های دیگر component ، این مقادیر ممکن است اندازه نهایی ابعاد component باشند یا نباشند.
Percentage تعیین کننده width یا height یک component به صورت درصدی از width یا height المان parent آن می باشد.
Layout های relative و absolute
نوع position یک المان تعیین کننده نحوه قرار گرفتن آن نسبت به المان parent اش می باشد.
Relative (مقدار پیش فرض) به طور پیش فرض یک المان مکانی نسبی دارد. به این معنا که یک المان، اول با توجه به جایگیری نرمال آیتم ها، و سپس براساس مقادیر top، right، bottom و left نسبت به مکان مورد انتظار، قرار می گیرد. این انحراف، بر مکان sibling element ها، و یا جای المان parent تاثیری ندارد.
absolute اگر المانی به طور مطلق جایی قرار گرفته باشد، در جایگیری نرمال آیتم ها شرکت نمی کند، مستقل از المان های sibling خود قرار می گیرد و مکان دقیقش به کمک مقادیر top ، right، bottom و left تعیین میشود.
نگاهی عمیق تر
میتوانید برای فهم بهتر flexbox از این لینک استفاده کنید.
ما در اینجا به مفاهیم پایه پرداختیم، اما style های زیادی هستند که برای layout های خود به آن نیاز خواهید داشت. لیست کامل prop هایی که برای کار با layout لازم است در اینجا قابل مشاهده است.
گام به گام به ساخت یک application واقعی نزدیک می شویم. یکی از مواردی که هنوز به آن نپرداخته ایم نحوه دریافت ورودی از کاربر است که در بخش بعد به آن می پردازیم.