سلام دوستان... در قسمت قبل آموزش React Native با مفاهیم زیر آشنا شدیم.
یک 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 جهت چیدمان 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 تعیین کننده ی جهتی است که در آن 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) در آموزش React Native
ایتم 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، آن را تغییر داد.
در alignContent توزیع خطوط در راستای محور عرضی را تعیین می کند. فقط زمانی اثر آن اعمال می شود که آیتم ها با استفاده از flexWrapدر چندین خط شکسته (wrapped) شوند. flex-start (مقدار پیش فرض) خطوط شکسته (wrapped شده) را از ابتدای محور متقاطع container مرتب می کند. flex-end خطوط شکسته را از انتهای محور متقاطع container مرتب می کند. Stretch خطوط شکسته را امتداد می دهد تا کامل محور متقاطع container را پر کنند. center خطوط شکسته را در راستای محور متقاطع container ، وسط قرار می دهد. space-between خطوط شکسته را در راستای محور اصلی container قرار می دهد و فضای اضافه را بین آن ها توزیع می کند. space-around خطوط شکسته را در راستای محور اصلی container قرار می دهد و فضای اضافه را اطراف آن ها توزیع میکند. در مقایسه با space-between، فضای اضافه به ابتدا و انتهای اولین و آخرین خط افزوده میشود.
ویژگی flexWrapروی container ها مقداردهی می شود و به کمک آن می توان تعیین کرد هنگامی که المان های childدر راستای محور اصلی از container بیرون میزنند، چه اتفاقی بیوفتد. به طور پیش فرض المان های child باید در یک خط قرار بگیرند ( که ممکن است باعث جمع شدن غیرعادی المان ها شود). اگر شکستن خطوط (wrapping) ممکن باشد، آیتم ها در راستای محور اصلی در چند خط شکسته می شوند.
موقع شکستن خطوط می توان از alignContent برای تعیین چگونگی قرارگیری خطوط در container، استفاده کرد.
در 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یک المان نشان دهنده ی 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تعیین میشود.
ما در اینجا به مفاهیم پایه پرداختیم، اما style های زیادی هستند که برای layout های خود به آن نیاز خواهید داشت.
گام به گام به ساخت یک application واقعی نزدیک می شویم. یکی از مواردی که هنوز به آن نپرداخته ایم نحوه دریافت ورودی از کاربر است که در بخش بعد به آن می پردازیم.
آموزش React Native ادامه دارد
