سلام دوستان... در قسمت قبل آموزش React Native با مفاهیم زیر آشنا شدیم.
کار 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 می شود.
در 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ها را کنترل کنید.
ابعاد ثابت
ساده ترین راه مقداردهی به ابعاد یک 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 بیشتر بدانید با ادامه آموزش React Native همراه باشید.
