آشنایی با React Native
در این مقاله به صورت کامل با react native آشنا خواهیم شد.
React Native یک فریمورک جاوا اسکریپت برای ساخت اپلیکیشن های موبایل است.
از چارچوب React استفاده می کند و مقدار زیادی از اجزای داخلی و API را ارائه می دهد.
react native یکی از بهترین و پر کاربردترین فریمورک های طراحی اپلیکیشن می باشد که در بین برنامه نویسان از محبوبیت بسیار بالایی برخوردار است.
با ما در ادامه همراه باشید که از مزایا ، ویژگی ها تا توابع و دستورالعمل های این فریرمورک پر کاربرد و بهینه را بررسی کنیم.
لازم به ذکر است این یک مقاله ی تخصصی می باشد و برای افراد مبتدی در برنامه نویسی چندان مناسب نبوده و ممکن است برخی از بخش های آن برای آن ها مفهوم نباشد.
به همین علت پیشنهاد می شود برای مطالعه و درک کامل این آموزش و آشنایی به زبان حاوا اسکریپت تسلط نسبی داشته باشید.
آشنایی با React Native
React Native به شما امکان می دهد برنامه های تلفن همراه را فقط با استفاده از جاوا اسکریپت بسازید.
از طراحی مشابه React استفاده میکند و به شما امکان میدهد یک رابط کاربری تلفن همراه غنی از کامپوننت های declarative بسازید.
با React Native، شما یک برنامه وب تلفن همراه ، یک برنامه HTML5 یا یک برنامه ترکیبی نمی سازید.
بلکه شما یک برنامه موبایل واقعی می سازید که از برنامه ای که با استفاده از Objective-C یا Java ساخته شده است قابل تشخیص نیست.
React Native از همان بلوکهای اساسی UI مانند برنامههای معمولی iOS و Android استفاده میکند.
شما فقط با استفاده از جاوا اسکریپت و ری اکت آن بلوک های سازنده را کنار هم قرار دهید.
اجزا و ویژگی های react native
React : این چارچوبی برای ساخت برنامه های وب و موبایل با استفاده از جاوا اسکریپت است.
Native : می توانید از مؤلفه های بومی که توسط جاوا اسکریپت کنترل می شوند استفاده کنید.
پلتفرم ها : React Native از پلتفرم IOS و Android پشتیبانی می کند.
Class Performance : کدهای نوشته شده در React Native در native code کامپایل می شوند ، که آن را برای هر دو سیستم عامل فعال می کند و همچنین در هر دو پلت فرم به یک شکل عمل می کند.
جاوا اسکریپت : دانش جاوا اسکریپت برای ساخت اپلیکیشن های موبایلی بومی استفاده می شود.
انجمن : انجمن بزرگ React و React Native در اطراف به ما کمک می کند تا هر پاسخی را که می خواهیم پیدا کنیم.
Hot Reloading : ایجاد چند تغییر در کد برنامه شما بلافاصله در طول توسعه قابل مشاهده خواهد بود.
راه اندازی محیط react native
برای تنظیم محیط React Native باید چند مورد را نصب کنید.
ما از OSX به عنوان building platform خود استفاده خواهیم کرد.
مرحله ۱ : برنامه create-react-native-app را نصب کنید
پس از نصب موفقیت آمیز NodeJS و NPM در سیستم خود ، می توانید به نصب Create-react-native-app ادامه دهید.
C:\Users\manataz> npm install -g create-react-native-app
مرحله ۲ : ایجاد پروژه
پوشه مورد نیاز را مرور کنید و مانند شکل زیر یک پروژه react native ایجاد کنید.
C:\Users\manataz>cd Desktop
C:\Users\manataz\Desktop>create-react-native-app MyReactNative
مرحله ۳ : NodeJS Python Jdk8
مطمئن شوید که Python NodeJS و jdk8 را در سیستم خود نصب کرده اید، اگر نه، آنها را نصب کنید.
علاوه بر اینها توصیه می شود برای جلوگیری از مشکلات خاص ، آخرین نسخه yarn را نصب کنید.
مرحله ۴ : React Native CLI را نصب کنید
با استفاده از دستور install -g react-native-cli مطابق شکل زیر میتوانید رابط خط فرمان react native را روی npm نصب کنید.
npm install -g react-native-cli
مرحله ۵ : React native را شروع کنید
برای تأیید نصب ، پوشه پروژه را جستجو کنید و با استفاده از دستور start ، پروژه را شروع کنید.
C:\Users\manataz\Desktop>cd MyReactNative
C:\Users\manataz\Desktop\MyReactNative>npm start
اگر همه چیز به خوبی پیش رفت، یک کد QR مطابق شکل زیر دریافت خواهید کرد.
همانطور که گفته شد، یکی از راههای اجرای برنامههای react native در دستگاه اندرویدی خود استفاده از Expo است.
کلاینت Expo را در دستگاه اندرویدی خود نصب کنید و کد QR به دست آمده فوق را اسکن کنید.
مرحله ۶ : پروژه را eject کنید
اگر می خواهید شبیه ساز اندروید را با استفاده از اندروید استودیو اجرا کنید ، با فشار دادن ctrl+c از خط فرمان فعلی خارج شوید.
سپس دستور run eject را به صورت اجرا کنید.
npm run eject
این گزینههایی را از شما میخواهد که eject کنید ، اولین مورد را با استفاده از فلشها انتخاب کنید و اینتر را فشار دهید.
سپس باید نام برنامه را در صفحه اصلی و نام پروژه استودیو اندروید و پروژه های Xcode را پیشنهاد دهید.
اگرچه پروژه شما با موفقیت eject شد، ممکن است با خطای زیر مواجه شوید.
این خطا را نادیده بگیرید و با استفاده از دستور زیر react native را برای اندروید اجرا کنید.
react-native run-android
اما قبل از آن باید اندروید استودیو را نصب کنید.
مرحله ۷ : نصب اندروید استودیو
از آدرس https://developer.android.com/studio/ اندروید استودیو را دانلود کنید و سپس آن را نصب کنید.
مرحله ۸ : پیکربندی AVD Manager
برای پیکربندی AVD Manager روی نماد مربوطه در نوار منو کلیک کنید.
device definition را انتخاب کنید، Nexus 5X قابل پیشنهاد است.
بر روی دکمه Next کلیک کنید، یک پنجره System Image خواهید دید. تب x86 Images را انتخاب کنید.
سپس، Marshmallow را انتخاب کرده و روی next کلیک کنید.
در نهایت بر روی دکمه Finish کلیک کنید تا پیکربندی AVD به پایان برسد.
پس از پیکربندی دستگاه مجازی خود بر روی دکمه پخش زیر ستون Actions کلیک کنید تا شبیه ساز اندروید خود را راه اندازی کنید.
مرحله ۹ : Running android
خط فرمان را باز کنید ، پوشه پروژه خود را مرور کنید و دستور react-native run-android را اجرا کنید.
سپس، اجرای برنامه شما در یک اعلان دیگر شروع می شود که می توانید وضعیت آن را ببینید.
در شبیه ساز اندروید خود می توانید اجرای برنامه پیش فرض را به صورت زیر مشاهده کنید :
مرحله ۱۰ : local.properties
پوشه اندروید را در پوشه پروژه SampleReactNative/android باز کنید (در این مورد). یک فایل با نام local.properties ایجاد کنید و مسیر زیر را در آن اضافه کنید.
sdk.dir = /C:\\Users\\manataz\\AppData\\Local\\Android\\Sdk
در اینجا، manataz را با نام کاربری خود جایگزین کنید.
مرحله ۱۱ : Hot Reloading
برای ساخت اپلیکیشن ، App.js را تغییر دهید و تغییرات به صورت خودکار در شبیه ساز اندروید به روز می شود.
اگر اینگونه نشد ، روی شبیه ساز اندروید کلیک کنید ctrl+m را فشار دهید سپس گزینه Enable Hot Reloading را انتخاب کنید.
App
اگر برنامه پیش فرض را باز کنید، می توانید مشاهده کنید که فایل app.js شبیه به آن است.
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
Open up App.js to start working on your app!
Changes you make will automatically reload.
Shake your phone to open the developer menu.
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
خروجی :
Hello world
برای نمایش یک پیام ساده که می گوید “Welcome to manataz” قسمت CSS را بردارید و پیامی را که قرار است توسط تگ های در داخل بسته بندی شده، چاپ شود، مطابق شکل زیر وارد کنید.
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
Welcome to manataz
);
}
}
State
دادههای داخل React Components توسط state و props مدیریت میشوند. در این بخش در مورد state صحبت خواهیم کرد.
تفاوت بین State و Props
State تغییرپذیر است در حالی که props تغییرناپذیر است.
این بدان معنی است که State را می توان در آینده به روز کرد در حالی که props را نمی توان به روز کرد.
استفاده از State
این کامپوننت root ما است. ما فقط Home را وارد می کنیم که در بیشتر بخش ها استفاده خواهد شد.
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
state = {
myState: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, used do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.'
}
render() {
return (
{this.state.myState}
);
}
}
میتوانیم متن شبیهساز را از حالتی مانند تصویر زیر ببینیم.
به روزرسانی state
از آنجایی که state قابل تغییر است، میتوانیم آن را با ایجاد تابع deleteState به روز کنیم و با استفاده از رویداد onPress = {this.deleteText} آن را فراخوانی کنیم.
import React, { Component } from 'react'
import { Text, View } from 'react-native'
class Home extends Component {
state = {
myState: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.'
}
updateState = () ⇒ this.setState({ myState: 'The state is updated' })
render() {
return (
{this.state.myState}
);
}
}
export default Home;
راه دیگر برای تعریف متدها استفاده از توابع EC5 است ، اما در این صورت باید این را به صورت دستی در سازنده متصل کنیم.
برای درک این موضوع به مثال زیر توجه کنید.
class Home extends Component {
constructor() {
super()
this.updateState = this.updateState.bind(this)
}
updateState() {
//
}
render() {
//
}
}
Props
در این بخش به شما نشان خواهیم داد که چگونه state و props را با هم ترکیب کنید.
کامپوننت های Presentational باید تمام داده ها را با ارسال props دریافت کنند.
فقط کامپوننت های container باید state داشته باشند.
Container Component
اکنون خواهیم فهمید که یک کامپوننت کانتینر چیست و همچنین چگونه کار می کند.
تئوری
در این مرحله کامپوننت ظرف خود را به روز می کنیم.
این کامپوننت state را مدیریت می کند و props را به کامپوننت presentational می دهد.
کلمپوننت کانتینر فقط برای حالت جابجایی استفاده می شود.
تمام عملکردهای مربوط به نمایش (استایل و …) در کامپوننت presentational انجام می شود.
مثال
اگر بخواهیم از مثال بخش قبلی استفاده کنیم، باید المان Text را از تابع render حذف کنیم زیرا این المان برای presenting text به کاربران استفاده می شود.
اجازه دهید کد موجود در مثال زیر را بررسی کنیم.
ما PresentationalComponent را وارد کرده و آن را به تابع render ارسال می کنیم.
بعد از اینکه PresentationalComponent را وارد کردیم و آن را به تابع رندر فرستادیم، باید props را پاس کنیم.
ما با افزودن myText = {this.state.myText} و deleteText = {this.deleteText} به <PresentationalComponent>، موارد را ارسال می کنیم.
اکنون، ما قادر خواهیم بود به این در داخل مؤلفه ارائه دسترسی داشته باشیم.
میتوانیم متن شبیهساز را از حالتی مانند تصویر زیر ببینیم.
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import PresentationalComponent from './PresentationalComponent'
export default class App extends React.Component {
state = {
myState: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, used do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.'
}
updateState = () => {
this.setState({ myState: 'The state is updated' })
}
render() {
return (
);
}
Presentational Component
اکنون خواهیم فهمید که یک کامپوننت Presentational چیست و همچنین چگونه کار می کند.
تئوری
اجزای نمایشی باید فقط برای ارائه دیدگاه به کاربران استفاده شوند.
این کامپوننت state ندارند.
آنها تمام داده ها و توابع را به عنوان پایه دریافت می کنند.
بهترین متد این است که تا حد امکان از کامپوننت props استفاده کنید.
مثال
همانطور که در فصل قبل ذکر کردیم، ما از سنتکس تابع EC6 برای کامپوننت presentational استفاده می کنیم.
مؤلفه ما پروپوزالها را دریافت میکند، المان های مشاهده را برمیگرداند، متن را با استفاده از {props.myText} presentational میکند و وقتی کاربر روی متن کلیک میکند، تابع {props.deleteText} را فراخوانی میکند.
import React, { Component } from 'react'
import { Text, View } from 'react-native'
const PresentationalComponent = (props) => {
return (
{props.myState}
)
}
export default PresentationalComponent
اکنون، عملکردی مشابه در بخش State خود داریم.
تنها تفاوت این است که ما کد خود را به کانتینر و presentational component مجدداً تغییر دادیم.
می توانید برنامه را اجرا کنید و متن را مانند تصویر زیر مشاهده کنید.
اگر روی متن کلیک کنید از صفحه حذف می شود.
Styling
چند راه برای استایل دادن به المان های خود در React Native وجود دارد.
می توانید از ویژگی style برای اضافه کردن استایل ها به صورت درون خطی استفاده کنید.
با این حال، این بهترین متد نیست زیرا خواندن کد ممکن است سخت باشد.
در این بخش از Stylesheet برای استایل استفاده خواهیم کرد.
Container Component
در این بخش، کامپوننت Container خود را از بخش قبل ساده می کنیم.
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import PresentationalComponent from './PresentationalComponent'
export default class App extends React.Component {
state = {
myState: 'This is my state'
}
render() {
return (
);
}
}
Presentational Component
در مثال زیر، StyleSheet را وارد می کنیم.
در پایین فایل، stylesheet خود را ایجاد می کنیم و آن را به ثابت styles اختصاص می دهیم.
توجه داشته باشید که استایل های ما در camelCase هستند و از px یا % برای استایل استفاده نمی کنیم.
برای اعمال استایل در متن خود، باید ویژگی style = {styles.myText} را به عنصر Text اضافه کنیم.
import React, { Component } from 'react'
import { Text, View, StyleSheet } from 'react-native'
const PresentationalComponent = (props) => {
return (
{props.myState}
)
}
export default PresentationalComponent
const styles = StyleSheet.create ({
myState: {
marginTop: 20,
textAlign: 'center',
color: 'blue',
fontWeight: 'bold',
fontSize: 20
}
})
وقتی برنامه را اجرا می کنیم، خروجی زیر را دریافت می کنیم.
Flexbox
برای تطبیق با اندازه های مختلف صفحه نمایش و در کل بحث واکنش گرایی ، React Native پشتیبانی از Flexbox را ارائه می دهد.
ما از همان کدی استفاده خواهیم کرد که در بخش React Native – Styling استفاده کردیم اما فقط PresentationalComponent را تغییر خواهیم داد.
Layout
برای دستیابی به Layout دلخواه، flexbox سه ویژگی اصلی را ارائه میکند :
- flexDirection
- justifyContent
- alignItems
جدول زیر گزینه های احتمالی را نشان می دهد.
Property | Values | Description |
---|---|---|
flexDirection | ‘column’, ‘row’ | برای تعیین اینکه آیا المان ها به صورت عمودی یا افقی تراز شوند استفاده می شود. |
justifyContent | ‘center’, ‘flex-start’, ‘flex-end’, ‘space-around’, ‘space-between’ | برای تعیین نحوه توزیع المان ها در داخل کانتینر استفاده می شود. |
alignItems | ‘center’, ‘flex-start’, ‘flex-end’, ‘stretched’ | برای تعیین نحوه توزیع المان ها در داخل کانتینر در امتداد محور ثانویه (برعکس flexDirection) استفاده می شود. |
اگر می خواهید موارد را به صورت عمودی تراز کنید و آنها را متمرکز کنید، می توانید از کد زیر استفاده کنید.
import React, { Component } from 'react'
import { View, StyleSheet } from 'react-native'
const Home = (props) => {
return (
)
}
export default Home
const styles = StyleSheet.create ({
container: {
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'grey',
height: 600
},
redbox: {
width: 100,
height: 100,
backgroundColor: 'red'
},
bluebox: {
width: 100,
height: 100,
backgroundColor: 'blue'
},
blackbox: {
width: 100,
height: 100,
backgroundColor: 'black'
},
})
خروجی :
اگر آیتم ها باید به سمت راست منتقل شوند و فاصله بین آنها اضافه شود، می توانیم از کد زیر استفاده کنیم.
import React, { Component } from 'react'
import { View, StyleSheet } from 'react-native'
const App = (props) => {
return (
)
}
export default App
const styles = StyleSheet.create ({
container: {
flexDirection: 'column',
justifyContent: 'space-between',
alignItems: 'flex-end',
backgroundColor: 'grey',
height: 600
},
redbox: {
width: 100,
height: 100,
backgroundColor: 'red'
},
bluebox: {
width: 100,
height: 100,
backgroundColor: 'blue'
},
blackbox: {
width: 100,
height: 100,
backgroundColor: 'black'
},
})
ListView
در این بخش ، نحوه ایجاد لیست در React Native را به شما نشان خواهیم داد.
ما لیست را در کامپوننت Home خود وارد می کنیم و آن را روی صفحه نمایش می دهیم.
import React from 'react'
import List from './List.js'
const App = () => {
return (
)
}
export default App
برای ایجاد لیست از متد () map استفاده می کنیم.
این روی آرایه ای از آیتم ها تکرار می شود و هر کدام را رندر می کند.
import React, { Component } from 'react'
import { Text, View, TouchableOpacity, StyleSheet } from 'react-native'
class List extends Component {
state = {
names: [
{
id: 0,
name: 'Ben',
},
{
id: 1,
name: 'Susan',
},
{
id: 2,
name: 'Robert',
},
{
id: 3,
name: 'Mary',
}
]
}
alertItemName = (item) => {
alert(item.name)
}
render() {
return (
{
this.state.names.map((item, index) => (
this.alertItemName(item)}>
{item.name}
))
}
)
}
}
export default List
const styles = StyleSheet.create ({
container: {
padding: 10,
marginTop: 3,
backgroundColor: '#d9f9b1',
alignItems: 'center',
},
text: {
color: '#4f603c'
}
})
وقتی برنامه را اجرا می کنیم، لیستی از نام ها را می بینیم.
میتوانید روی هر مورد در لیست کلیک کنید تا یک آلرت با نام ایجاد شود.
Text Input
در این بخش، نحوه کار با المان های TextInput در React Native را به شما نشان خواهیم داد.
کامپوننت Home ورودی ها را وارد و ارائه می کند.
import React from 'react';
import Inputs from './inputs.js'
const App = () => {
return (
)
}
export default App
Inputs
حالت اولیه را تعریف می کنیم.
پس از تعریف حالت اولیه ، توابع handleEmail و handlePassword را ایجاد می کنیم.
این توابع برای به روز رسانی state استفاده می شود.
تابع ()login فقط به مقدار فعلی state هشدار می دهد.
همچنین برخی ویژگیهای دیگر را به ورودیهای متن اضافه میکنیم تا حروف بزرگ خودکار را غیرفعال کنیم، border پایین دستگاههای Android را برداریم و یک placeholder تعیین کنیم.
import React, { Component } from 'react'
import { View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native'
class Inputs extends Component {
state = {
email: '',
password: ''
}
handleEmail = (text) => {
this.setState({ email: text })
}
handlePassword = (text) => {
this.setState({ password: text })
}
login = (email, pass) => {
alert('email: ' + email + ' password: ' + pass)
}
render() {
return (
this.login(this.state.email, this.state.password)
}>
Submit
)
}
}
export default Inputs
const styles = StyleSheet.create({
container: {
paddingTop: 23
},
input: {
margin: 15,
height: 40,
borderColor: '#7a42f4',
borderWidth: 1
},
submitButton: {
backgroundColor: '#7a42f4',
padding: 10,
margin: 15,
height: 40,
},
submitButtonText:{
color: 'white'
}
})
هر زمان که در یکی از فیلدهای ورودی تایپ کنیم، state به روز می شود.
وقتی روی دکمه Submit کلیک می کنیم ، متن ورودی ها در داخل dialog box نمایش داده می شود.
هر زمان که در یکی از فیلدهای ورودی تایپ کنیم ، staet به روز می شود.
وقتی روی دکمه ارسال کلیک می کنیم، متن ورودی ها در داخل dialog box نمایش داده می شود.
ScrollView
در این بخش ، نحوه کار با المان ScrollView را به شما نشان خواهیم داد.
ما دوباره ScrollView Example.js را ایجاد می کنیم و آن را در Home وارد می کنیم.
import React from 'react';
import ScrollViewExample from './scroll_view.js';
const App = () => {
return (
)
}export default App
Scrollview لیستی از نام ها را ارائه می دهد.
ما آن را در state ایجاد خواهیم کرد.
import React, { Component } from 'react';
import { Text, Image, View, StyleSheet, ScrollView } from 'react-native';
class ScrollViewExample extends Component {
state = {
names: [
{'name': 'Ben', 'id': 1},
{'name': 'Susan', 'id': 2},
{'name': 'Robert', 'id': 3},
{'name': 'Mary', 'id': 4},
{'name': 'Daniel', 'id': 5},
{'name': 'Laura', 'id': 6},
{'name': 'John', 'id': 7},
{'name': 'Debra', 'id': 8},
{'name': 'Aron', 'id': 9},
{'name': 'Ann', 'id': 10},
{'name': 'Steve', 'id': 11},
{'name': 'Olivia', 'id': 12}
]
}
render() {
return (
{
this.state.names.map((item, index) => (
{item.name}
))
}
)
}
}
export default ScrollViewExample
const styles = StyleSheet.create ({
item: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
padding: 30,
margin: 2,
borderColor: '#2a4944',
borderWidth: 1,
backgroundColor: '#d2f7f1'
}
})
وقتی برنامه را اجرا می کنیم، لیست اسامی قابل پیمایش را خواهیم دید.
Images
در این بخش ، نحوه کار با تصاویر در React Native را خواهیم فهمید.
افزودن تصویر
اجازه دهید یک پوشه جدید img در داخل پوشه src ایجاد کنیم.
ما تصویر خود را (myImage.png) داخل این پوشه اضافه می کنیم.
ما تصاویر را در صفحه اصلی نشان خواهیم داد.
import React from 'react';
import ImagesExample from './ImagesExample.js'
const App = () => {
return (
)
}
export default App
تصویر لوکال با استفاده از سینتکس زیر قابل دسترسی است.
import React, { Component } from 'react'
import { Image } from 'react-native'
const ImagesExample = () => (
)
export default ImagesExample
خروجی
Screen Density
React Native راهی برای بهینه سازی تصاویر برای دستگاه های مختلف با استفاده از پسوند @2x، @3x ارائه می دهد.
این برنامه فقط تصویر لازم برای Screen Density خاص را بارگیری می کند.
در زیر نام تصویر داخل پوشه img خواهد بود.
my-image@2x.jpg
my-image@3x.jpg
Network Images
هنگام استفاده از Network Images ، به جای require ، به ویژگی source نیاز داریم.
توصیه می شود برای تصاویر شبکه عرض و ارتفاع را تعریف کنید.
App.js
import React from 'react';
import ImagesExample from './image_example.js'
const App = () => {
return (
)
}
export default App
image_example.js
import React, { Component } from 'react'
import { View, Image } from 'react-native'
const ImagesExample = () => (
)
export default ImagesExample
خروجی
HTTP
در این بخش ، نحوه استفاده از fetch برای رسیدگی به network requests را به شما نشان خواهیم داد.
import React from 'react';
import HttpExample from './http_example.js'
const App = () => {
return (
)
}
export default App
استفاده از Fetch
ما از متد چرخه حیات componentDidMount برای بارگیری داده ها از سرور به محض نصب کامپوننت استفاده خواهیم کرد.
این تابع درخواست GET را به سرور ارسال میکند، دادههای JSON را برمیگرداند، خروجی ورود به کنسول را بهروزرسانی میکند و state ما را بهروزرسانی میکند.
import React, { Component } from 'react'
import { View, Text } from 'react-native'
class HttpExample extends Component {
state = {
data: ''
}
componentDidMount = () => {
fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'GET'
})
.then((response) => response.json())
.then((responseJson) => {
console.log(responseJson);
this.setState({
data: responseJson
})
})
.catch((error) => {
console.error(error);
});
}
render() {
return (
{this.state.data.body}
)
}
}
export default HttpExample
خروجی
Buttons
در این بخش ، کامپوننت touchable در react Native را به شما نشان خواهیم داد.
ما آنها را «touchable » مینامیم زیرا انیمیشنهای داخلی ارائه میکنند و میتوانیم از پایه onPress برای مدیریت touch event استفاده کنیم.
فیس بوک کامپوننت Button را ارائه می دهد که می تواند به عنوان یک دکمه عمومی استفاده شود.
برای درک همین موضوع به مثال زیر توجه کنید.
import React, { Component } from 'react'
import { Button } from 'react-native'
const App = () => {
const handlePress = () => false
return (
)
}
export default App
اگر کامپوننت دکمه پیش فرض با نیازهای شما مطابقت ندارد، می توانید به جای آن از یکی از کامپوننت های زیر استفاده کنید.
Touchable Opacity
این المان با لمس کردن ، opacity یک المان را تغییر می دهد.
import React from 'react'
import { TouchableOpacity, StyleSheet, View, Text } from 'react-native'
const App = () => {
return (
Button
)
}
export default App
const styles = StyleSheet.create ({
container: {
alignItems: 'center',
},
text: {
borderWidth: 1,
padding: 25,
borderColor: 'black',
backgroundColor: 'red'
}
})
Touchable Highlight
وقتی کاربر المان را فشار میدهد، آن تیرهتر میشود و رنگ زیر آن نمایان میشود.
import React from 'react'
import { View, TouchableHighlight, Text, StyleSheet } from 'react-native'
const App = (props) => {
return (
Button
)
}
export default App
const styles = StyleSheet.create ({
container: {
alignItems: 'center',
},
text: {
borderWidth: 1,
padding: 25,
borderColor: 'black',
backgroundColor: 'red'
}
})
Touchable Native Feedback
با فشار دادن المان ، انیمیشن ink شبیه سازی می شود.
import React from 'react'
import { View, TouchableNativeFeedback, Text, StyleSheet } from 'react-native'
const Home = (props) => {
return (
Button
)
}
export default Home
const styles = StyleSheet.create ({
container: {
alignItems: 'center',
},
text: {
borderWidth: 1,
padding: 25,
borderColor: 'black',
backgroundColor: 'red'
}
})
Touchable Without Feedback
زمانی که میخواهید touch event را بدون انیمیشن مدیریت کنید ، باید استفاده شود.
معمولاً از این کامپوننت زیاد استفاده نمیشود.
Button
Animations
در این بخش ، نحوه استفاده از LayoutAnimation در React Native را به شما نشان خواهیم داد.
کامپوننت انیمیشن ها
ما myStyle را به عنوان پراپرتی state تنظیم می کنیم.
این ویژگی برای استایل دادن به یک المان در داخل PresentationalAnimationComponent استفاده می شود.
ما همچنین دو تابع ، expandElement و collapseElement را ایجاد خواهیم کرد.
این توابع مقادیر را از state به روز می کنند.
اولین مورد از انیمیشن از پریست شده spring استفاده می کند در حالی که مورد دوم از پریست linear برخوردار است.
ما اینها را نیز به عنوان props منتقل خواهیم کرد.
دکمه های Expand و Collapse توابع ()expandElement و ()collapseElement را فراخوانی می کنند.
در این مثال به صورت پویا عرض و ارتفاع box را تغییر می دهیم.
از آنجایی که کامپوننت Home یکسان خواهد بود ، ما فقط کامپوننت Animations را تغییر خواهیم داد.
import React, { Component } from 'react'
import { View, StyleSheet, Animated, TouchableOpacity } from 'react-native'
class Animations extends Component {
componentWillMount = () => {
this.animatedWidth = new Animated.Value(50)
this.animatedHeight = new Animated.Value(100)
}
animatedBox = () => {
Animated.timing(this.animatedWidth, {
toValue: 200,
duration: 1000
}).start()
Animated.timing(this.animatedHeight, {
toValue: 500,
duration: 500
}).start()
}
render() {
const animatedStyle = { width: this.animatedWidth, height: this.animatedHeight }
return (
)
}
}
export default Animations
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center'
},
box: {
backgroundColor: 'blue',
width: 50,
height: 100
}
})
Router
مرحله ۱ : روتر را نصب کنید
برای شروع، باید روتر را نصب کنیم.
ما در این بخش از React Native Router Flux استفاده خواهیم کرد.
می توانید دستور زیر را در ترمینال، از پوشه project اجرا کنید.
npm i react-native-router-flux --save
مرحله ۲ : Entire Application
از آنجایی که می خواهیم روتر ما کل برنامه را مدیریت کند، آن را در index.ios.js اضافه می کنیم.
برای اندروید نیز می توانید همین کار را در index.android.js انجام دهید.
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
import Routes from './Routes.js'
class reactTutorialApp extends Component {
render() {
return (
)
}
}
export default reactTutorialApp
AppRegistry.registerComponent('reactTutorialApp', () => reactTutorialApp)
مرحله ۳ : اضافه کردن روتر
حال کامپوننت Routes را در داخل پوشه کامپوننت ها ایجاد می کنیم.
روتر را با چندین سکانس برمی گرداند.
هر صحنه به key ، component و title نیاز دارد.
روتر از ویژگی key برای جابهجایی بین سکانس ها استفاده میکند ، component روی صفحه نمایش داده میشود و title در نوار navigation نشان داده میشود.
همچنین می توانیم ویژگی initial را روی سکانسی که قرار است در ابتدا رندر شود تنظیم کنیم.
import React from 'react'
import { Router, Scene } from 'react-native-router-flux'
import Home from './Home.js'
import About from './About.js'
const Routes = () => (
)
export default Routes
مرحله ۴ : کامپوننت ها را ایجاد کنید
ما قبلاً کامپوننت Home را از بخش های قبلی داریم.
اکنون باید کامپوننت About را اضافه کنیم.
ما توابع goToAbout و goToHome را برای جابجایی بین سکانس ها اضافه می کنیم.
import React from 'react'
import { TouchableOpacity, Text } from 'react-native';
import { Actions } from 'react-native-router-flux';
const Home = () => {
const goToAbout = () => {
Actions.about()
}
return (
This is HOME!
)
}
export default Home
About.js
import React from 'react'
import { TouchableOpacity, Text } from 'react-native'
import { Actions } from 'react-native-router-flux'
const About = () => {
const goToHome = () => {
Actions.home()
}
return (
This is ABOUT
)
}
export default About
برنامه Home screen اولیه را نمایش می دهد.
می توانید دکمه را فشار دهید تا به صفحه about تغییر دهید.
فلش Back ظاهر خواهد شد.
می توانید از آن برای بازگشت به صفحه قبلی استفاده کنید.
ران کردن IOS
اگر می خواهید برنامه خود را در شبیه ساز IOS آزمایش کنید، تنها چیزی که نیاز دارید این است که پوشه root برنامه خود را در ترمینال باز کنید و اجرا کنید.
react-native run-ios
دستور بالا شبیه ساز را شروع کرده و برنامه را اجرا می کند.
همچنین می توانیم دستگاهی را که می خواهیم استفاده کنیم را مشخص کنیم.
react-native run-ios --simulator "iPhone 5s
پس از باز کردن برنامه در شبیه ساز ، می توانید Command + D را در IOS فشار دهید تا منوی developers باز شود.
همچنین میتوانید شبیهساز IOS را با فشار دادن دستور + R دوباره بارگیری کنید.
ران کردن Android
با اجرای کد زیر در ترمینال می توانیم برنامه React Native را روی پلتفرم اندروید اجرا کنیم.
react-native run-android
قبل از اینکه بتوانید برنامه خود را روی دستگاه اندرویدی اجرا کنید، باید USB Debugging را در قسمت Developer Options فعال کنید.
هنگامی که USB Debugging فعال است، می توانید دستگاه خود را وصل کرده و قطعه کد ارائه شده در بالا را اجرا کنید.
شبیه ساز اندروید Native کند است.
توصیه می کنیم Genymotion را برای آزمایش برنامه خود دانلود کنید.
منوی developer را می توان با فشار دادن دستور + M مشاهده کرد.
مهرسا امینی
برنامه نویس ، انیماتور ، سئوکار
زندگي در حين گرفتن چيزهايي از تو موقعيت هاي جديدي را مي بخشد