آموزش پروژه محور React Native
سلام در بخش دوم آموزش React Native محیطهای اجرا React Native در android، iOS و Mac و iOS را آموزش دادیم حال با بخش سوم با ما همراه باشید:
در بخش اول آموزش React Native با مفاهیم پایه React Native آشنا شدیم
در ادامه برنامه ای را اجرا می کنیم
اولین برنامه، Hello World!
طبق سنت قدیمی برنامه نویس ها، اولین برنامه ما یک applicationساده است که هیچ کار نمی کند جز اینکه یک Hello, World! ساده را نشان دهد:
import React, { Component } from 'react';
import { Text, View } from 'react-native';
export default class HelloWorldApp extends Component {
render() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text>Hello, world!</Text>
</View>
);
}
}
اگر دوست دارید کمی کنجکاوی کنید، می توانید در شبیه سازهای تحت وب با کدها کار کنید. میتوانید کد را در فایل App.js روی سیستم خودتان بگذارید و یک app روی سیستم خودتان بسازید.
چه اتفاقی می افتد؟
کدهایی که نوشتیم ممکن است اصلا شبیه جاوا اسکریپت نباشد. نگران نباشید، این آینده ی جاوا اسکریپت است.
ES2015 یا همان ES6مجموعه ای از تغییرات روی جاوا اسکریپت است که حالا بخشی از استاندارد رسمی آن شده، اما هنوز همه ی مرورگرها از آن پشتیبانی نمی کنند، به همین دلیل هنوز به قدر کافی در زمان developبرای وب استفاده نمی شوند. React Native از ES2015 پشتیبانی می کند. می توانید از آن بدون هیچ دغدغه ای درمورد سازگاری استفاده کنید. کلمات کلیدی مثل import، from، class، extends در مثال بالا همه از ویژگی های ES2015هستند. اگر با ES2015آشنا نیستید، احتمالا فقط با خواندن همین آموزش آن را یاد می گیرید. این صفحه (لینک) مروری روی ویژگی های ES2015 دارد.
قطعه کد نامعمول دیگر این مثال <View><Text>Hello world!</Text></View> است. این JSXاست. این syntax است که XML را درون جاوااسکریپت می نشاند. Frameworkهای زیادی از زبان قالبی خاصی استفاده می کنند که به شما اجازه استفاده از کد درون markup language را بدهد. این syntax شبیه Html تحت وب به نظر می رسد، با این تفاوت که به جای استفاده از المان هایی چون <div> یا <span>، از component های React استفاده می شود. در این مثال، <Text> یک component آماده است که متنی را نشان می دهد و View مثل > یا <span>است.
کامپوننت ها component
این قطعه کد یک component جدید را تعریف می کند.
وقتی یک application React Native می نویسید چندین component خواهید داشت. هرچیز که روی صفحه می بینید یک componentمحسوب می شود. یک component می تواند بسیار ساده باشد. تنها چیزی که نیاز دارد یک تابع render است که JSX برای render شدن برمی گرداند.
این app کار زیادی نمی کند. برای اینکه با component ها کارهای جالبتری انجام دهیم باید درمورد Propsبدانیم.
پروپ Props در React Native component ها
اغلب component ها هنگام initialize می توانند با پارمترهای مختلفی سفارشی سازی شوند. این پارامترهای زمانِ ساخت، Propsنامیده می شوند.
برای مثال، یک componentاصلی در React Native، Imageاست. وقتی یک Image می سازید، می توانید از یک prop به نام sourceاستفاده کنید و با مقداردهی به آن، تصویر موردنظرتان را تعیین کنید:
import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';
export default class Bananas extends Component {
render() {
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
<Image source={pic} style={{width: 193, height: 110}}/>
);
}
}
// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => Bananas);
به آکولاد استفاده شده در {pic} توجه کنید. آن ها متغیر pic را درون یک JSX می گنجانند. می توانید هر عبارت جاوااسکریپتی را با قرار دادن درون آکولاد، در JSXاستفاده کنید.
کامپوننت ها componentهایی که خود می سازید هم میتواند از props استفاده کند. این ویژگی به شما اجازه میدهد از یک component، اما با ویژگی های کمی متفاوت از یکدیگر، در جاهای مختلف applicationاستفاده کنید. مثال زیر چگونگی این کار را ، با referenceدادن به this.props در تابع render، نشان می دهد:
import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
class Greeting extends Component {
render() {
return (
<View style={{alignItems: 'center'}}>
<Text>Hello {this.props.name}!</Text>
</View>
);
}
}
export default class LotsOfGreetings extends Component {
render() {
return (
<View style={{alignItems: 'center', top: 50}}>
<Greeting name='Rexxar' />
<Greeting name='Jaina' />
<Greeting name='Valeera' />
</View>
);
}
}
// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => LotsOfGreetings);
استفاده از name به عنوان یک prop، به ما امکان سفارشی کردن component Greeting را می دهد، می توانیم از این componentبارها با مقادیر مختلف استفاده کنیم. این مثال از این component، درست مثل component های اصلی، در JSX نیز استفاده می کند. این امکان دقیقا همان چیزی است که باعث جذابیت Reactشده. اگر حس کنید component های متفاوتی برای کارتان احتیاج دارید، می توانید خودتان آن ها را بسازید.
نکته جدید دیگری که در این کد می بینیم، component Viewاست. Viewبه عنوان ظرفی برای component های دیگر استفاده می شود، و کنترل style و layout را ممکن می کند.
با استفاده از props و component های اصلی Text، Image، و View، می توانید صفحات ثابت زیادی درست کنید. برای اینکه بتوانید application خود را با دیتای متغیر بسازید، باید درمورد State ها بدانید.
استیت State ها در React Native component ها
دو نوع دیتا وجود دارد که یک component را کنترل می کند: props و state. Propsتوسط component parentمقداردهی می شوند و در طول چرخه حیات componentثابت هستند. برای دیتای متغیر، از state استفاده می کنیم.
به طور کلی، باید state را در سازندهinitialize کنید، و سپس با فراخوانی setStateمقدار آن را تغییر دهید.
برای مثال، می خواهیم متنی بسازیم که حالت blinkداشته باشد. متن یک بار موقع ساخته شدن component مربوطه، مقداردهی می شود. پس متنی به تنهایی یک prop است. این مسئله که "متن دراین لحظه نمایش داده شود یا نشود" در طول زمان متغیر است، پس باید درون state نگه داری شود.
import React, { Component } from 'react';
import { Text, View } from 'react-native';
class Blink extends Component {
componentDidMount(){
// Toggle the state every second
setInterval(() => (
this.setState(previousState => (
{ isShowingText: !previousState.isShowingText }
))
), 1000);
}
//state object
state = { isShowingText: true };
render() {
if (!this.state.isShowingText) {
return null;
}
return (
<Text>{this.props.text}</Text>
);
}
}
export default class BlinkApp extends Component {
render() {
return (
<View>
<Blink text='I love to blink' />
<Blink text='Yes blinking is so great' />
<Blink text='Why did they ever take this out of HTML' />
<Blink text='Look at me look at me look at me' />
</View>
);
}
}
در یک application واقعی، معمولا state را با یک timer مقداردهی نمی کنیم. ممکن است state را زمانی مقداردهی کنیم که دیتای جدیدی از serverدریافت کرده باشیم، یا ورودی از کاربر گرفته باشیم. بعلاوه، می توان از یک state container مثل Redux یا Mobxبرای کنترل دیتا استفاده کرد. دراین حالت، به جای صدا زدن setState به طور مستقیم، از Redux یا Mobxبرای تغییر stateاستفاده می کنیم.
وقتی setState فراخوانی می شود، BlinkApp، component خود را دوباره render می کند. با فراخوانیsetState از طریق Timer، component با هر تغییر در Timer ، دوباره render می شود.
استیت ها State در اینجا کاملا مشابه React عمل می کند. برای مطالعه بیشتر درمورد نحوه کار با state می توانید به React.Component API مراجعه کنید. تا اینجا اکثر مثال های ما متن های ساده ای بودند. برای ساختن چیزهای جذابتر، باید درمورد style بدانیم.
استایل Style ها در React Native
در React Native، برای تعریف style از syntax یا زبان خاصی استفاده نمی کنیم. application را با استفاده از جاوااسکریپت style می دهیم. همه component های اصلی یک prop به نام styleدارند. اسامی و مقادیر styleمعمولا شبیه CSS در وب کار می کند، با این تفاوت که اسامی به صورت camel casingانتخاب می شوند، مثلا backgroundColor (و نه background-color).
استایل Style می تواند یک plain old JavaScript object (POJO) باشد. این ساده ترین و پرکاربرد ترین روش style دادن است. همچنین می توانید آرایه ای از style ها را پاس دهید، آخرین عضو آرایه مقدم تر است، و می توان از این روش برای ارث بری style ها استفاده کرد.
همچنان که یک componentپیچیده تر می شود، بهتر است با استفاده از StyleSheet.createچندین style در یک جا تعریف کنیم. مثال زیر را ببینید:
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
const styles = StyleSheet.create({
bigBlue: {
color: 'blue',
fontWeight: 'bold',
fontSize: 30,
},
red: {
color: 'red',
},
});
export default class LotsOfStyles extends Component {
render() {
return (
<View>
<Text style={styles.red}>just red</Text>
<Text style={styles.bigBlue}>just bigBlue</Text>
<Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>
<Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text>
</View>
);
}
}
یک الگوی رایج این است که component یک styleبپذیرد که بعد برای styleدادن به component child های آن استفاده شود. می توانید با استفاده از این قابلیت به شیوه ی CSSاستایل های "cascade" ایجاد کنید.
راه های زیادی برای ایجاد style های سفارشی برای متن ها هست. برای لیست کامل آن می توانید به این لینک مراجعه کنید.
حال می توانید متن های جذابی درست کنید. گام بعد در تسلط به استایل دهی این است که سایز component ها را کنترل کنید.
ارتفاع و پهنا Widthو Height در React Native component
width وheight یک componentتعیین کننده سایز آن روی صفحه است.
ابعاد ثابت
ساده ترین راه مقداردهی به ابعاد یک componentمقداردهی ثابت به width و height در هنگام استفاده از styleاست. تمام ابعاد در React Native بدون واحد هستند، و نشان دهنده density-independent pixel هاهستند.
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
export default class FixedDimensionsBasics extends Component {
render() {
return (
<View>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
<View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />
</View>
);
}
}
// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);
تعیین مقادیر ابعاد به این شکل برای componentهایی که مستقل از ابعاد صفحه، همیشه در سایز مشخصی render میشوند رایج است.
ابعاد منعطف
استفاده از flex در هنگام تعریف styleبرای یک component، به این معناست که ابعاد آن می تواند برحسب میزان فضای موجود تغییر کند. معمولا از flex: 1استفاده می شود؛ که به component می گوید فضای موجود را پر کند و آن را با component های دیگر که parentیکسانی دارند، متناسب به اشتراک می گذارد. هرچه مقدار بزرگتری به flexبدهیم، نسبت فضایی که component می گیرد، نسبت با component های sibiling، بیشتر خواهد بود.
یک component فقط زمانی می تواند بزرگ شود و فضای موجود را بگیرد که component parent آن، دارای ابعاد بیشتر از 0 باشد. اگر parent آن مقادیر ثابتی برای height و width و flexنداشته باشد، ابعادی معادل 0 دارد و component child آن با وجود داشتن flex، قابل مشاهده نخواهد بود.
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
export default class FlexDimensionsBasics extends Component {
render() {
return (
// Try removing the `flex: 1` on the parent View.
// The parent will not have dimensions, so the children can't expand.
// What if you add `height: 300` instead of `flex: 1`?
<View style={{flex: 1}}>
<View style={{flex: 1, backgroundColor: 'powderblue'}} />
<View style={{flex: 2, backgroundColor: 'skyblue'}} />
<View style={{flex: 3, backgroundColor: 'steelblue'}} />
</View>
);
}
}
// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => FlexDimensionsBasics);
پس از اینکه یاد گرفتیم چطور سایز component را تغییر دهیم، زمان آن رسیده که بدانیم چطور آن را روی صفحه قرار دهیم. این آموزش ادامه دارد
پایان بخش سوم آموزش React Native
