مقالات طراحی اپ موبایل

اجزا و ویژگی های react native
React : این چارچوبی برای ساخت نرم افزار های وب و موبایل با استعمال طراحی اپلیکیشن در مشهد از جاوا اسکریپت هست.

Native : می توانید از مؤلفه های ساکن که بوسیله جاوا اسکریپت در اختیار گرفتن می‌شوند استعمال نمایید.

پلتفرم ها : React Native از پلتفرم IOS و Android مدد می کند.شمرحله ۱۱ : 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\',
},
});
COPY
خروجی :

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

);
}
}
COPY

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}

);
}
}
COPY
خواهیم توانست متن مشابه‌ساز را از حالتی مانند تصویر پایین ببینیم.

به روزرسانی 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;
COPY
راه و روش دیگر برای تعریف و تمجید متدها به کارگیری از توابع EC5 میباشد ، البته در‌این‌صورت می بایست این را به طور دستی در تولید کننده متصل کنیم.
برای ادراک این زمینه به نمونه ذیل اعتنا نمایید.

class Home extends Component {
constructor() {
super()
this.updateState = this.updateState.bind(this)
}
updateState() {
//
}
render() {
//
}
}
COPY
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} به ، موردها را ارسال میکنیم.
در حال حاضر، ما میتوانیم به‌این در درون مؤلفه ارائه دسترسی داشته باشیم.

می توانیم متن مشابه‌ساز را از حالتی مانند تصویر پایین ببینیم.

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 (

);
}
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
COPY
مرحله ۲ : ساخت و ساز پروژه
پوشه مورد نیاز را مرور فرمایید و مانند شکل پایین یک پروژه react native ایجاد فرمایید.

C:\\\\Users\\\\manataz>cd Desktop
C:\\\\Users\\\\manataz\\\\Desktop>create-react-native-app MyReactNative
COPY

مرحله ۳ : NodeJS Python Jdk8

مطمئن شوید که Python NodeJS و jdk8 را در سیستم خود نصب کرده اید، در‌صورتی‌که نه، آن‌ها را نصب نمائید.
علاوه بر اینها توصیه میشود برای هجران از خطاها خاص ، آخرین نسخه yarn را نصب فرمائید.

مرحله ۴ : React Native CLI را نصب کنید

با به کارگیری از فرمان install -g react-native-cli مطابق شکل زیر میتوانید رابط خط فرمان react native را روی npm نصب نمائید.

npm install -g react-native-cli
COPY

مرحله ۵ : React native را آغاز فرمائید
برای تأیید نصب ، پوشه پروژه را جستجو نمائید و با استعمال از دستور start ، پروژه را استارت نمائید.

C:\\\\Users\\\\manataz\\\\Desktop>cd MyReactNative
C:\\\\Users\\\\manataz\\\\Desktop\\\\MyReactNative>npm start
COPY
درصورتی که همگی چیز به نیکی پیش رفت، یک کد QR مبنی بر شکل زیر دریافت خواهید کرد.

همانطور که گفته شد، یکی از شیوه های اجرای نرم افزار‌های react native در دستگاه اندرویدی خود استفاده از Expo می‌باشد.
کلاینت Expo را در دستگاه اندرویدی خود نصب کنید و کد QR به دست آمده فوق را اسکن نمایید.

مرحله ۶ : پروژه را eject فرمائید

در‌حالتی که می خواهید شبیه ساز اندروید را با استعمال از اندروید استودیو جاری ساختن نمایید ، با فشار دادن ctrl+c از خط فرمان فعلی خارج شوید.
سپس فرمان run eject را به صورت اعمال فرمائید.

npm run eject
COPY
این گزینه‌هایی را از شما می‌خواهد که eject نمایید ، اولین گزینه را با به کارگیری از مکان نما‌ها انتخاب فرمایید و اینتر را فشار دهید.

بعد از آن باید نام نرم افزار را در صفحه اصلی و نام پروژه استودیو اندروید و پروژه های Xcode را پیشنهاد دهید.

اگرچه پروژه شما با موفقیت eject شد، ممکن می‌باشد با خطای زیر مواجه شوید.

این غلط را نادیده بگیرید و با به کارگیری از فرمان زیر react native را برای اندروید ایفا فرمایید.

react-native run-android
COPY
البته قبل از آن بایستی اندروید استودیو را نصب کنید.

مرحله ۷ : نصب اندروید استودیو

از آدرس 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
COPY
در اینجا، manataz را با نام کاربری خود جایگزین فرمایید.

اجزا و ویژگی های react native
React : این چارچوبی برای ساخت نرم افزار های وب و موبایل با استعمال طراحی اپلیکیشن در مشهد از جاوا اسکریپت هست.

Native : می توانید از مؤلفه های ساکن که بوسیله جاوا اسکریپت در اختیار گرفتن می‌شوند استعمال نمایید.

پلتفرم ها : React Native از پلتفرم IOS و Android مدد می کند.شمرحله ۱۱ : 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\',
},
});
COPY
خروجی :

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

);
}
}
COPY

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}

);
}
}
COPY
خواهیم توانست متن مشابه‌ساز را از حالتی مانند تصویر پایین ببینیم.

به روزرسانی 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;
COPY
راه و روش دیگر برای تعریف و تمجید متدها به کارگیری از توابع EC5 میباشد ، البته در‌این‌صورت می بایست این را به طور دستی در تولید کننده متصل کنیم.
برای ادراک این زمینه به نمونه ذیل اعتنا نمایید.

class Home extends Component {
constructor() {
super()
this.updateState = this.updateState.bind(this)
}
updateState() {
//
}
render() {
//
}
}
COPY
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} به ، موردها را ارسال میکنیم.
در حال حاضر، ما میتوانیم به‌این در درون مؤلفه ارائه دسترسی داشته باشیم.

می توانیم متن مشابه‌ساز را از حالتی مانند تصویر پایین ببینیم.

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 (

);
}
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
COPY
مرحله ۲ : ساخت و ساز پروژه
پوشه مورد نیاز را مرور فرمایید و مانند شکل پایین یک پروژه react native ایجاد فرمایید.

C:\\\\Users\\\\manataz>cd Desktop
C:\\\\Users\\\\manataz\\\\Desktop>create-react-native-app MyReactNative
COPY

مرحله ۳ : NodeJS Python Jdk8

مطمئن شوید که Python NodeJS و jdk8 را در سیستم خود نصب کرده اید، در‌صورتی‌که نه، آن‌ها را نصب نمائید.
علاوه بر اینها توصیه میشود برای هجران از خطاها خاص ، آخرین نسخه yarn را نصب فرمائید.

مرحله ۴ : React Native CLI را نصب کنید

با به کارگیری از فرمان install -g react-native-cli مطابق شکل زیر میتوانید رابط خط فرمان react native را روی npm نصب نمائید.

npm install -g react-native-cli
COPY

مرحله ۵ : React native را آغاز فرمائید
برای تأیید نصب ، پوشه پروژه را جستجو نمائید و با استعمال از دستور start ، پروژه را استارت نمائید.

C:\\\\Users\\\\manataz\\\\Desktop>cd MyReactNative
C:\\\\Users\\\\manataz\\\\Desktop\\\\MyReactNative>npm start
COPY
درصورتی که همگی چیز به نیکی پیش رفت، یک کد QR مبنی بر شکل زیر دریافت خواهید کرد.

همانطور که گفته شد، یکی از شیوه های اجرای نرم افزار‌های react native در دستگاه اندرویدی خود استفاده از Expo می‌باشد.
کلاینت Expo را در دستگاه اندرویدی خود نصب کنید و کد QR به دست آمده فوق را اسکن نمایید.

مرحله ۶ : پروژه را eject فرمائید

در‌حالتی که می خواهید شبیه ساز اندروید را با استعمال از اندروید استودیو جاری ساختن نمایید ، با فشار دادن ctrl+c از خط فرمان فعلی خارج شوید.
سپس فرمان run eject را به صورت اعمال فرمائید.

npm run eject
COPY
این گزینه‌هایی را از شما می‌خواهد که eject نمایید ، اولین گزینه را با به کارگیری از مکان نما‌ها انتخاب فرمایید و اینتر را فشار دهید.

بعد از آن باید نام نرم افزار را در صفحه اصلی و نام پروژه استودیو اندروید و پروژه های Xcode را پیشنهاد دهید.

اگرچه پروژه شما با موفقیت eject شد، ممکن می‌باشد با خطای زیر مواجه شوید.

این غلط را نادیده بگیرید و با به کارگیری از فرمان زیر react native را برای اندروید ایفا فرمایید.

react-native run-android
COPY
البته قبل از آن بایستی اندروید استودیو را نصب کنید.

مرحله ۷ : نصب اندروید استودیو

از آدرس 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
COPY
در اینجا، manataz را با نام کاربری خود جایگزین فرمایید.