آموزش react

آموزش React native - قسمت پنجم

دوره آموزش React native

سلام در بخش چهارم آموزش React Native مفاهیم Flex,Flex Direction,Layout Direction,align Items,Align Content,Flex Wrap,Flex Basis، Grow و Shrink,Width و Height در React Native را یاد گرفتیم . حال با بخش چهارم با ما همراه باشید:

دوره آموزش React native

مدیریت ورودی های متنی

کامپوننت Component پایه ای که برای دریافت ورودی از کاربر استفاده می شود TextInput است. این componentیک prop به اسم Text دارد که می توان به آن تابعی داد که پس از هر تغییر متن صدا زده شود. یک prop به اسم Editing دارد که می توان به آن تابعی داد که هنگام ثبت دیتا، صدا زده شود.

برای مثال، فرض کنیم همزمان با تایپ کردن کاربر، قرار است کلمات به زبان دیگری ترجمه شوند. در این زبان جدید ترجمه هر کلمه ای 🍕 است! جمله ی "Hello there Bob" به "🍕🍕🍕" ترجمه می شود.

import React, { Component } from 'react';

import { Text, TextInput, View } from 'react-native';

export default class PizzaTranslator extends Component {

constructor(props) {

super(props);

this.state = {text: ''};

}

render() {

return (

<View style={{padding: 10}}>

<TextInput

style={{height: 40}}

placeholder="Type here to translate!"

Text={(text) => this.setState({text})}

value={this.state.text}

/>

<Text style={{padding: 10, fontSize: 42}}>

{this.state.text.split(' ').map((word) => word && '🍕').join(' ')}

</Text>

</View>

);

}

}

در این مثال، text را درون یک state نگه می داریم، چرا که در طول زمان مقدار آن متغیر است.

کارهای زیادی می توان روی TextInput ها انجام داد. برای مثال، می توان هنگام تایپ کردن کاربر، متن ورودی را اعتبارسنجی کرد. برای مثال هایی با جزئیات بیشتر، مستندات React را ببینید، یا مستندات مربوط به TextInput را ببینید.

دریافت ورودی از کاربر یکی از راه های تعامل با کاربر است. در گام بعد، نگاهی به راه های کار با ورودی های touch کاربر می اندازیم.

دوره آموزش React Native

مدیریت ورودی های touch در React Native

عمده ی تعامل کاربران با application های موبایل از طریق touchاست. آن ها از حرکاتی ترکیبی، مثل زدن یک button، بالا و پایین کردن یک لیست، zoom روی یک نقشه و... استفاده می کنند. React Native، component هایی برای کار با انواع حرکات متداول در اختیار می گذارد. علاوه بر آن یک سیستم جامع gesture responder برای شناسایی حرکات پیچیده تر دارد. اما componentپایه ای عمدتا از آن استفاده می کنیم یک buttonاست.

نمایش یک buttonساده

Button یک component ساده برای نمایش button است که روی همه پلتفرم ها به خوبی render می شود. مثالی ساده برای نمایش یک button در زیر می بینید:

<Button

onPress={() => {

alert('You tapped the button!');

}}

title="Press Me"

/>

این قطعه کد یک برچسب آبی در iOS، و یک مستطیل گرد آبی با متن سفید در androidخواهد بود. فشردن button موجب فراخوانی تابع "onPress" می شود. که در این مثال، این تابع یک pop-upهشدار نمایش می دهد. می توانید یک propبرای "color" تعیین کنید و رنگ button را تغییر دهید.

آموزش React native

مثال زیر کارهای جالب تری با button ها می کند. می توانید خروجی آن را در android و iOS ببینید.

import React, { Component } from 'react';

import { Button, StyleSheet, View } from 'react-native';

export default class ButtonBasics extends Component {

_onPressButton() {

alert('You tapped the button!')

}

render() {

return (

<View style={styles.container}>

<View style={styles.buttonContainer}>

<Button

onPress={this._onPressButton}

title="Press Me"

/>

</View>

<View style={styles.buttonContainer}>

<Button

onPress={this._onPressButton}

title="Press Me"

color="#841584"

/>

</View>

<View style={styles.alternativeLayoutButtonContainer}>

<Button

onPress={this._onPressButton}

title="This looks great!"

/>

<Button

onPress={this._onPressButton}

title="OK!"

color="#841584"

/>

</View>

</View>

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

},

buttonContainer: {

margin: 20

},

alternativeLayoutButtonContainer: {

margin: 20,

flexDirection: 'row',

justifyContent: 'space-between'

}

});

اگر یک button ساده برای application تان کافی نیست، می توانید با استفاده از component های "Touchable" موجود در React Native، button های سفارشی بسازید. این component ها قابلیت دریافت حرکات را دارند، و می توانند با شناسایی حرکات فیدبک مناسب بدهند. این component ها هیچ style پیش فرضی ندارند و برای اینکه ظاهری مناسب به آنها بدهید باید کمی کار کنید.

دوره آموزش React Native

با توجه به نوع فیدبکی که انتظار دارید می توانید از component های "Touchable" متفاوتی استفاده کنید:

عمدتا، می توانید از TouchableHighligh برای مواردی مثل یک link یا button در وب، استفاده کنید. پس زمینه ی view با فشردن button، تیره می شود.

می توانید از TouchableNativeFeedback در android برای نمایش feedback به کاربر استفاده کنید.

می توان از TouchableOpacity برای feedback دادن از طریق کاهش button opacity استفاده کرد.

اگر میخواهید فیدبکی به کاربر نشان ندهید می توانید از TouchableWithoutFeedback استفاده کنید.

در بعضی موارد ممکن است بخواهید فشردن و نگه داشتن یک view برای مدت زمان مشخصی را شناسایی کنید. این فشردن های طولانی از طریق ارسال یک تابع به onLongPress هر component "Touchable" قایل مدیریت است.

آموزش React Native

در مثال زیر می توان این موضوع را تست کرد:

import React, { Component } from 'react';

import { Platform, StyleSheet, Text, TouchableHighlight, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback, View } from 'react-native';

export default class Touchables extends Component {

_onPressButton() {

alert('You tapped the button!')

}

_onLongPressButton() {

alert('You long-pressed the button!')

}

render() {

return (

<View style={styles.container}>

<TouchableHighlight onPress={this._onPressButton} underlayColor="white">

<View style={styles.button}>

<Text style={styles.buttonText}>TouchableHighlight</Text>

</View>

</TouchableHighlight>

<TouchableOpacity onPress={this._onPressButton}>

<View style={styles.button}>

<Text style={styles.buttonText}>TouchableOpacity</Text>

</View>

</TouchableOpacity>

<TouchableNativeFeedback

onPress={this._onPressButton}

background={Platform.OS === 'android' ? TouchableNativeFeedback.SelectableBackground() : ''}>

<View style={styles.button}>

<Text style={styles.buttonText}>TouchableNativeFeedback {Platform.OS !== 'android' ? '(Android only)' : ''}</Text>

</View>

</TouchableNativeFeedback>

<TouchableWithoutFeedback

onPress={this._onPressButton}

>

<View style={styles.button}>

<Text style={styles.buttonText}>TouchableWithoutFeedback</Text>

</View>

</TouchableWithoutFeedback>

<TouchableHighlight onPress={this._onPressButton} onLongPress={this._onLongPressButton} underlayColor="white">

<View style={styles.button}>

<Text style={styles.buttonText}>Touchable with Long Press</Text>

</View>

</TouchableHighlight>

</View>

);

}

}

const styles = StyleSheet.create({

container: {

paddingTop: 60,

alignItems: 'center'

},

button: {

marginBottom: 30,

width: 260,

alignItems: 'center',

backgroundColor: '#2196F3'

},

buttonText: {

textAlign: 'center',

padding: 20,

color: 'white'

}

});

بالا و پایین رفتن در لیست ها، swipe کردن، و pinch-to-zoom

از حرکات رایج دیگر در موبایل ها swipe یا pan است. این حرکت به کاربر امکان بالا و پایین رفتن در لیست ها، یا حرکت در صفحات را می دهد. برای کار با اینگونه حرکات، باید کار با ScrollView را یاد بگیریم.

آموزش React Native

استفاده از ScrollView در React Native:

اسکرول ScrollView یک container scroll کلی است که می تواند چندین component و view را در خود نگه دارد. آیتم های قابل scroll لازم نیست هم نوع باشند، و می توان آن ها را هم افقی (با مقداردهی بهprop horizontal) و هم عمودی scroll کرد.

این مثال یک ScrollView با قابلیت scroll عمودی، حاوی ترکیبی از عکس و متن می سازد:

import React, { Component } from 'react';

import { ScrollView, Image, Text } from 'react-native';

export default class IScrolledDownAndWhatHappenedNextShockedMe extends Component {

render() {

return (

<ScrollView>

<Text style={{fontSize:96}}>Scroll me plz</Text>

<Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />

<Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />

<Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />

<Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />

<Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />

<Text style={{fontSize:96}}>If you like</Text>

<Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />

<Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />

<Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />

<Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />

<Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />

<Text style={{fontSize:96}}>Scrolling down</Text>

<Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />

<Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />

<Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />

<Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />

<Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />

<Text style={{fontSize:96}}>What's the best</Text>

<Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />

<Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />

<Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />

<Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />

<Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />

<Text style={{fontSize:96}}>Framework around?</Text>

<Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />

<Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />

<Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />

<Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />

<Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />

<Text style={{fontSize:80}}>React Native</Text>

</ScrollView>

);

}

}

اسکرول ScrollView ها می توانند با استفاده از pagingEnabled به گونه ای تنظیم شوند که بتوان چندین صفحه داشت و بین آن ها حرکت کرد. حرکت افقی بین viewها در android نیز با استفاده از component ViewPager قابل پیاده سازی است.

در iOS، یک ScrollView با فقط یک آیتم می تواند برای ایجاد امکان zoom استفاده شود. با تنظیم مقادیر برای maximumZoomScale و minimumZoomScale امکان بزرگ و کوچک کردن محتوا توسط حرکات pinch and expand ممکن خواهد بود.

استفاده از ScrollView برای نمایش تعداد کمی آیتم در سایز محدود مناسب است، چرا که همه المان ها و view های یک ScrollView، render می شوند، حتی اگر در لحظه در صفحه قابل نمایش نباشند. اگر لیست طویلی از آیتم ها دارید که در صفحه جا نمی شود، باید از FlatList ها استفاده کنید. مرحله بعد یادگیری درمورد list view ها خواهد بود.

استفاده از List View در React Native

ری اکت React Native مجموعه ای از component ها برای نمایش لیست ها در اختیار می گذارد. عمدتا از FlatList یا SectionList استفاده می شود.

کامپوننت component FlatList لیستی از دیتای متغیر اما ساختار- ثابتی را نمایش می دهد. FlatList برای لیست های طویل که تعداد آیتم های آن درزمان تغییر می کند، مناسب است. برخلاف ScrollView، FlatList فقط المان هایی که در لحظه روی صفحه قابل نمایش هستند را، render می کند.

کامپوننت component FlatList دو prop لازم دارد: data و renderItem. Data منبع دیتای درون لیست را تعیین می کند. renderItem یک آیتم از منبع برمی دارد ویک component فرمت شده برای render برمی گرداند.

این مثال یک FlatList ساده با دیتای ثابت می سازد. هر آیتم درون data به صورت یک component Text، render می شود. سپس component FlatListBasics، FlatList و همه ی component های Text را render می کند.

import React, { Component } from 'react';

import { FlatList, StyleSheet, Text, View } from 'react-native';

export default class FlatListBasics extends Component {

render() {

return (

<View style={styles.container}>

<FlatList

data={[

{key: 'Devin'},

{key: 'Dan'},

{key: 'Dominic'},

{key: 'Jackson'},

{key: 'James'},

{key: 'Joel'},

{key: 'John'},

{key: 'Jillian'},

{key: 'Jimmy'},

{key: 'Julie'},

]}

renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}

/>

</View>

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

paddingTop: 22

},

item: {

padding: 10,

fontSize: 18,

height: 44,

},

})

زمانی که بخواهیم دیتا را درون یک ساختار منطقی بشکنیم، و احتمالا هر قسمت یک تیتر داشته باشد، SectionList به کار می آید که عملکردی مشابه UITableView ها در iOS دارد.

import React, { Component } from 'react';

import { SectionList, StyleSheet, Text, View } from 'react-native';

export default class SectionListBasics extends Component {

render() {

return (

<View style={styles.container}>

<SectionList

sections={[

{title: 'D', data: ['Devin', 'Dan', 'Dominic']},

{title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},

]}

renderItem={({item}) => <Text style={styles.item}>{item}</Text>}

renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}

keyExtractor={(item, index) => index}

/>

</View>

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

paddingTop: 22

},

sectionHeader: {

paddingTop: 2,

paddingLeft: 10,

paddingRight: 10,

paddingBottom: 2,

fontSize: 14,

fontWeight: 'bold',

backgroundColor: 'rgba(247,247,247,1.0)',

},

item: {

padding: 10,

fontSize: 18,

height: 44,

},

})

یکی از رایج ترین کاربردهای List View نمایش دیتای دریافتی از server است. برای این کار لازم است درمورد ارتباطات تحت شبکه در React Native بدانیم.

آموزش React Native

با ادامه آموزش ششم همراه با باشید

آموزش react native رایگان

دوره آموزش React Native - بخش چهارم

آموزش React Native - بخش چهارم

دوره آموزش 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فقط یک عدد می گیرد.

دوره آموزش 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 فضا را می گیرد.

دوره آموزش React Native

فلکس Flex Direction

دوره آموزش React Native

فلکس 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> ); }};

دوره آموزش React Native

لایه Layout Direction

آموزش پروژه محور react native

لایه 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>

);

}

};

دوره آموزش React Native

تراز کردن آیتم ها (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>

);

}

};

دوره آموزش React Native

AlignSelf

ا alignSelfموارد مشابهی دارد و مثل alignItemsعمل می کند اما به جای اثر روی childدرون container، می توان آن را روی یک المان اعمال کرد ومستقل از parent، آن را تغییر داد. alignSelf هرچیزی که توسط alignItems و از طریق parentاعمال شده را، بی اثر می کند.

دوره آموزش React Native

محتوای Align Content

آموزش پروژه محور react native

محتوای alignContentتوزیع خطوط در راستای محور عرضی را تعیین می کند. فقط زمانی اثر آن اعمال می شود که آیتم ها با استفاده از flexWrapدر چندین خط شکسته (wrapped) شوند.

فلکس flex-start(مقدار پیش فرض) خطوط شکسته (wrappedشده) را از ابتدای محور متقاطع containerمرتب می کند.

فلکس flex-endخطوط شکسته را از انتهای محور متقاطع containerمرتب می کند.

در Stretchخطوط شکسته را امتداد می دهد تا کامل محور متقاطع container را پر کنند.

مرکز centerخطوط شکسته را در راستای محور متقاطع container، وسط قرار می دهد.

فضای space-between خطوط شکسته را در راستای محور اصلی container قرار می دهد و فضای اضافه را بین آن ها توزیع می کند.

فضای space-aroundخطوط شکسته را در راستای محور اصلی containerقرار می دهد و فضای اضافه را اطراف آن ها توزیع میکند. در مقایسه با space-between، فضای اضافه به ابتدا و انتهای اولین و آخرین خط افزوده میشود.

دوره آموزش React Native

فلکس Flex Wrap

دوره آموزش React Native

ویژگی flexWrapروی container ها مقداردهی می شود و به کمک آن می توان تعیین کرد هنگامی که المان های childدر راستای محور اصلی از container بیرون میزنند، چه اتفاقی بیوفتد. به طور پیش فرض المان های child باید در یک خط قرار بگیرند ( که ممکن است باعث جمع شدن غیرعادی المان ها شود). اگر شکستن خطوط (wrapping) ممکن باشد، آیتم ها در راستای محور اصلی در چند خط شکسته می شوند.

موقع شکستن خطوط می توان از alignContent برای تعیین چگونگی قرارگیری خطوط در container، استفاده کرد.

دوره آموزش React Native

فلکس Flex Basis، Grow و Shrink

دوره آموزش React Native

فلکس 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

دوره آموزش React Native

مقدار 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تعیین میشود.

دوره آموزش React Native

نگاهی عمیق تر

میتوانید برای فهم بهتر flexbox از این لینک استفاده کنید.

ما در اینجا به مفاهیم پایه پرداختیم، اما style های زیادی هستند که برای layoutهای خود به آن نیاز خواهید داشت. لیست کامل propهایی که برای کار با layout لازم است در اینجا قابل مشاهده است.

گام به گام به ساخت یک application واقعی نزدیک می شویم. یکی از مواردی که هنوز به آن نپرداخته ایم نحوه دریافت ورودی از کاربر است که در بخش بعد به آن می پردازیم.

می توانید در این مقاله، چند مثال از Wix Engineersببینید.

دوره آموزش React Native

آموزش React native

آموزش React Native

مقدمه

در دوره  می آموزید که چگونه Application های Cross Platform بسازید که در سیستم عامل های Android و IOS اجرا شوند. 
در دوره برنامه نویسی React Native می آموزید برنامه هایی بسازید که از لحاظ خروجی و Peformance دقیقا Native بوده و برنامه تولید شده دقیقا مانند برنامه ای است که با Java یا Swift ساخته شده است. 
نرم افزارهای مشهور Instagram، Facebook، Skype و... نمونه هایی از Application هایی هستند که با React Native ساخته شده اند.

اهداف دوره

دانشجویان در دوره React Native بر معماری سیستم عامل Android تسلط کافی می یابند. 
دانشجویان در دوره React Native بر معماری سیستم عامل IOS تسلط کافی می یابند. 
در دوره آموزش React Native دانشجویان به تسلط کامل در نصب محیط و راه اندازی محیط برنامه نویسی و همچنین راه اندازی Emulator مسلط می شوند. 
در دوره آموزش React Native دانشجویان به جنبه های قدرتمند زبان برنامه نویسی JavaScript که در برنامه نویسی React Native استفاده می شود مسلط می شوند. 
آموزش ساخت انواع Layout و استانداردهای Layout در Android و IOS از اهداف این دوره می باشد. 
دانشجویان در دوره آموزش React Native به کار با State ها و همچنین Debug نمودن برنامه های React Native مسلط می شوند. 
طراحی انواع Navigation های موبایل شامل Android و IOS و همچنین ساخت انواع Animation از اهداف دوره آموزش React Native می باشد. 
آموزش کار با دستگاه های جانبی موبایل مثل دوربین، نقشه و... از اهداف دوره می باشد. 
دانشجویان در دوره آموزش React Native می آموزند که با استفاده از Http Request چگونه انواع API ها و Web Service ها و دیگر منابع Web را مورد دسترسی قرار دهند.

برای ثبت نام در دوره آموزش React Native به سایت آموزشگاه تحلیل داده رجوع کنید

مخاطبین این دوره

•  شرکت ها و برنامه نویسان فعال در حوزه نرم افزار که می خواهند هزینه تولید اپلیکیشن های خود را کاهش دهند.
•  تمامی برنامه نویسان حرفه ای Andoird و IOS که می خواهند به دنیای جدیدی از طراحی اپلیکیشن وارد شوند.
•  طراحانی که می خواهند بدون درگیر شدن با Android و IOS اپلیکشن بسازند.
•  کلیه برنامه نویسان Web و Desktop که می خواهند بدون یادگیری Java و Swift تخصص اپلیکیشن نویسی را به گنجینه دانسته های خود بیفزایند.

پیشنیاز

آشنایی با HTML و CSS و مفاهیم برنامه نویسی

o مقدمات

• معرفی سیستم عامل و پلتفرم ها
• انواع برنامه نویسی به صورت Cross Platform
• آینده وب و موبایل
• مروری بر HTML و CSS
• آموزش حرفه ای Package Manager برای React Natvie
• آموزش Package.json
• مزایا و معایب React Native

o آموزش نصب و راه اندازی محیط React Native

• آموزش نصب NodeJS
• آموزش نصب Android Studio
• آموزش نصب Visual Studio Code
• آموزش نصب React Native
• آموزش نصب React Native CLI
• آموزش کاربردی Extension های Vysor، Web Server، Audits و...
• کار Developer Options در موبایل
• معرفی و نصب شبیه ساز

o آموزش جاوااسکریپت برای React Native

• آموزش کاربردی EcmaScript 6
• آموزش کاربردی Arrow Functions
• آموزش کار با کلاس ها (Classes) در جاوااسکریپت
• آموزش Enhanced Object Literals در جاوااسکریپت
• آموزش String interpolation در جاوااسکریپت
• آموزش Destructuring در جاوااسکریپت
• آموزش Default در جاوااسکریپت
• آموزش Spread در جاوااسکریپت
• آموزش Spread + Object Literals در جاوااسکریپت
• آموزش Rest در جاوااسکریپت
• آموزش Let در جاوااسکریپت
• آموزش Const در جاوااسکریپت
• آموزش For..of در جاوااسکریپت
• آموزش Unicode در جاوااسکریپت
• آموزش Modules And Module Loaders در جاوااسکریپت
• آموزش Set در جاوااسکریپت
• آموزش WeakSet در جاوااسکریپت
• آموزش Map در جاوااسکریپت
• آموزش WeakMap در جاوااسکریپت
• آموزش Proxies در جاوااسکریپت
• آموزش Symbols در جاوااسکریپت
• آموزش Inheritable Built-ins در جاوااسکریپت
• آموزش New Library در جاوااسکریپت
• آموزش Binary and Octal در جاوااسکریپت
• آموزش Promises در جاوااسکریپت
• آموزش Reflect در جاوااسکریپت
• آموزش Tail Call Optimization در جاوااسکریپت

o آموزش ساختار محیط Android Studio و سیستم عامل Android

• آشنایی با محیط Android Studio
• آموزش Folder Structure در Android Studio
• آشنایی با Java و XML
• آشنایی با مدل لایه ای معماری Android
• آشنایی با اصطلاحات Android
• بررسی کامل و جامع Activity
• بررسی Fragment در اندروید
• بررسی Widget در اندروید
• بررسی Layout در اندروید
• آموزش جامع Manifest

o آموزش ساختار محیط XCode و سیستم عامل IOS

• مقدمات IOS
• آشنایی با Swift
• آشنایی با اصطلاحات IOS
• بررسی Stackview در IOS
• بررسی Auto Layouts در IOS
• بررسی Segues در IOS
• بررسی Package در IOS

o آموزش React Native

• ایجاد اولین پروژه React Native
• آموزش خروجی گرفتن از پروژه React Native
• آموزش اجرای برنامه React Native در Android
• آموزش اجرای برنامه React Native در IOS
• آموزش کار با ورودی متنی (Textinput) در React Native
• آموزش استایل دهی در React Native
• آموزش استفاده از یک Framework اختصاصی در React Native
• آموزش Position در React Native
• آموزش (Button) در React Native
• آموزش ساخت کامپوننت های اختصاصی در React Native
• آموزش Listening to Touch Events در React Native
• آموزش ScrollView در React Native
• آموزش Static Images در React Native
• آموزش Network Images در React Native
• آموزش Modal در React Native

o آموزش Managing Application State در React Native

• آموزش State
• آموزش Redux در React Native
• آموزش نصب Redux در React Native
• آموزش Actions در React Native
• آموزش Reducer در React Native
• آموزش Store در React Native
• آموزش React Native و Redux در React Native

o آموزش رفع Bug در React Native

• آموزش Console
• آموزش Console در React Native
• آموزش Breakpoints در React Native
• آموزش React Native Debugger در React Native
• آموزش Debugging Redux در React Native

o آموزش Navigation در React Native

• مقایسه Navigation در برنامه های Web و برنامه های Native
• آموزش Exploring Native Navigation Solutions در React Native
• آموزش افزودن React Native Navigation به Android
• آموزش افزودن React Native Navigation به IOS
• آموزش Tabs Navigation در React Native
• آموزش Icons در React Native
• آموزش Pushing Pages در React Native
• آموزش Popping Pages در React Native
• آموزش Navigator Methods در React Native
• آموزش Side Drawer در React Native
• آموزش Navigation Events And Toggling the Drawer در React Native

o آموزش طراحی ظاهر برنامه و انیمیشن در React Native

• آموزش Stylesheet در React Native
• آموزش کامل و حرفه ای Flexbox در React Native
• آموزش انواع واحد ها
• آموزش Relative
• آموزش Absolute
• آموزش Text Style در React Native
• آموزش Background Image در React Native
• آموزش کامل Custom Button در React Native
• آموزش کامل Side Drawer در React Native
• آموزش Custom Button در React Native
• آموزش Cross Platform Styles And Responsiveness در React Native
• نمایش Icon های مختلف برای Platform های مختلف در React Native
• آموزش بحث Centering with Margins در React Native
• استفاده از Animated API در React Native

o آموزش ورودی های کاربر و اعتبارسنجی در React Native

• آموزش Validation در React Native
• آموزش Managing Input/ Control State در React Native
• آموزش Validation Logic در React Native
• آموزش Validation State در React Native
• آموزش Auth Action در React Native
• آموزش Soft Keyboard در React Native

o آموزش کار با قابلیت های دستگاه مانند دوربین و... در React Native

• آموزش نصب react-native-maps در React Native
• آموزش عملیات Render نقشه در React Native
• آموزش انتخاب یک موقیعت روی نقشه در React Native
• آموزش افزودن یک Map Marker در React Native
• آموزش نصب react-native-image-picker در React Native
• آموزش کار با Image Picker در React Native
• آموزش Storing the Picked Images در React Native
• آموزش Image Picker and the Data it Returns در React Native

o آموزش شبکه و Http Request در React Native

• بررسی تئوری Http Request در React Native
• آموزش ایجاد Server در React Native
• آموزش استفاده از Fetch-API در React Native
• آموزش کار با Storing Data in Firebase در React Native
• آموزش کار با Image Upload در React Native
• آموزش Storing Data in Firebase در React Native
• آموزش Storing the Remaining Data در React Native
• آموزش Activity Indicator در React Native
• آموزش Getting Data from the Server در React Native
• برای ثبت نام در دوره آموزش React Native به سایت آموزشگاه تحلیل داده رجوع کنید