آموزش React Native - بخش چهارم
سلام در بخش سوم آموزش React Native مفاهیم component , Props, State, Style, Widthو Height در React Native را یاد گرفتیم . حال با بخش چهارم با ما همراه باشید:
آموزش Layout با استفاده از Flexbox
یک component می تواند چیدمان component های childخودرا با استفاده از algorithm Flexbox تعیین کند. Flexbox برای ایجاد یک Layout پایدار روی صفحات با سایزهای مختلف طراحی شده است.
با استفاده از ترکیبی از flexDirection، alignItems، و justifyContent می توان Layout مناسب طراحی کرد.
فلکس باکس Flexbox در React Nativeشبیه CSS عمل می کند. با این تفاوت که مقادیر پیش فرض متفاوتند. flexDirection به جای row، مقدار پیش فرض column دارد، و flexفقط یک عدد می گیرد.
فلکس 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
فلکس Flex Direction جهت چیدمان childهای یک nodeرا تعیین می کند. به آن محور اصلی نیز می گویند. محور دیگر، محور متقاطع، محور عمود به محور اصلی است، یا همان محوری است که خطوط wrapping را دربرمیگیرد.
کامپوننت Row componentهای child را از چپ به راست میچیند. اگر wrapping فعال باشد، خط بعد دقیقا از زیر اولین آیتم از چپ شروع می شود.
ستون Column(مقدار پیش فرض) component های child را از بالا به پایین می چیند. اگر wrapping فعال باشد، خط بعد از اولین آیتم سمت چپ از بالا شروع می شود.
کامپوننت row-reverse component های child را از راست به چپ میچیند. اگر wrapping فعال باشد، خط بعد از زیر اولین آیتم از راست شروع می شود.
کامپوننت column-reverse component های child را از پایین به بالا می چیند. اگر wrapping فعال باشد، خط بعدی اولین آیتم سمت چپ از پایین شروع می شود.
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> ); }};
لایه 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 افزوده می شود.
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>
);
}
};
تراز کردن آیتم ها (align Items)
تراز کردن آیتم ها alignItems تعیین کننده نحوه قرار گرفتن childها در راستای محور متقاطع container است. بسیار شبیه justifyContentعمل می کند، اما به جای اعمال شدن به محور اصلی، روی محور متقاطع اعمال می شود.
استرتچ Stretch(مقدار پیش فرض) child های یک container را امتداد می دهد تا کامل محور متقاطع را بگیرند و height معادل محور متقاطع داشته باشند.
فلکس flex-start child های یک container را از ابتدای محور متقاطع آن، مرتب می کند.
فلکس flex-end child های یک container را از انتهای محور متقاطع آن، مرتب می کند.
مرکز Center child های یک container را در راستای محور متقاطع ، وسط قرار می دهد.
لاین Baselineالمان های child را نسبت به یک نقطه مشترک مرتب می کند. المان های childمی توانند طوری تنظیم شوند که نقطه ارجاعی برای parentشان باشند.
برای اینکه استفاده از Stretch موثر باشد، المان child نباید در راستای محور دیگر بعد ثابت داشته باشد. در مثال زیر، مقداردهی به صورت alignItems: stretchاثری ندارد، مگر زمانی که width: 50از المان child حذف شود.
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>
);
}
};
AlignSelf
ا alignSelfموارد مشابهی دارد و مثل alignItemsعمل می کند اما به جای اثر روی childدرون container، می توان آن را روی یک المان اعمال کرد ومستقل از parent، آن را تغییر داد. alignSelf هرچیزی که توسط alignItems و از طریق parentاعمال شده را، بی اثر می کند.
محتوای Align Content
محتوای alignContentتوزیع خطوط در راستای محور عرضی را تعیین می کند. فقط زمانی اثر آن اعمال می شود که آیتم ها با استفاده از flexWrapدر چندین خط شکسته (wrapped) شوند.
فلکس 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) ممکن باشد، آیتم ها در راستای محور اصلی در چند خط شکسته می شوند.
موقع شکستن خطوط می توان از 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 واقعی نزدیک می شویم. یکی از مواردی که هنوز به آن نپرداخته ایم نحوه دریافت ورودی از کاربر است که در بخش بعد به آن می پردازیم.
می توانید در این مقاله، چند مثال از Wix Engineersببینید.
