تفاوت Reactو React Native در چیست؟

 

ری اکت

 

Reactو React Nativeدو فناوری قدرتمند هستند که در پس برخی از محبوب‌ترین اپلیکیشن‌های وب و موبایل در جهان امروز قرار دارند. شما احتمالاً هر روز حداقل یکی از این دو را استفاده می کنید.

React و React Nativeدو فناوری هستند که در توسعه اپلیکیشن های تحت وب و موبایل استفاده می شوند. هر دو از جاوا اسکریپت استفاده می کنند و برای ساخت رابط کاربری وب و موبایل (UI) شناخته شده هستند.

Reactچیست؟

React یا ReactJS یک کتابخانه جاوا اسکریپت open sourceبرای ساخت رابط های کاربری (UI) به طور خاص برای برنامه های تک صفحه ای است. React اولین بار توسط توسعه‌دهنده وب، جردن واک، مهندس نرم‌افزار فیس‌بوک، در سال 2012 طراحی شد. این فناوری ابتدا قبل از اینکه در Facebook.com و بعداً در Instagram.com به کار گرفته شود، به صورت داخلی توسعه یافت.

React باید توسط توسعه دهندگان از پایگاه کد فیس بوک استخراج می شد تا اینستاگرام بتواند از آن استفاده کند، که به تعبیری به این معنی است که اینستاگرام اولین کاربر «خارجی» React بود. این مسئله منجر به open sourceفناوری برای بقیه جهان شد.

Reactبه گونه ای طراحی شده است که به توسعه دهنده خوداجازه می دهد تا به راحتی با کدهای موجود یا کتابخانه های دیگر ارتباط برقرار نماید. هدف اصلی آن ساده سازی فرآیند توسعه و ساخت برنامه های کاربردی وب است که سریع، مقیاس پذیر و ساده باشند.

React Nativeچیست؟

ری اکت نیتیوبرادر کوچکتر React است. پس از استقبال درخشان از React در سال 2013، فیس بوک شروع به کار بر روی یک فریمورک بین پلتفرمی موبایل کرد تا با نیازهای رو به رشد این غول فناوری همراه باشد. در مارس 2015، فیس بوک اعلام کرد که این فناوری در Github باز و در دسترس است.

مانند React، React Native نیز مبتنی بر جاوا اسکریپت است، اما برای ساخت برنامه های موبایل بومی با اجزای قابل استفاده مجدد طراحی شده است. امکان استفاده از برنامه های کاربردی تلفن همراه متقابل.

تصور کنید یک سازنده از یک مته برای ساختن خانه و دیگری برای ساختن یک آپارتمان استفاده کرده است. قبل از React Native، توسعه‌دهندگان اپلیکیشن‌ها مجبور بودند از ابزارهای مختلفی برای پلتفرم‌های مختلف استفاده نمایند، مانند سازنده‌ای که برای هر نوع ساختمانی که می‌سازد، مته ویژه‌ای دارد.

وقتی صحبت از توسعه بومی Reactمی شود، قدرت واقعی در آن نهفته است. یک توسعه‌دهنده React Native می‌تواند یک برنامه تلفن همراه متقاطع، در چندین پلتفرم (ویندوز، اندروید، iOS) به‌طور هموار و یکپارچه ایجاد کند.

React Nativeدر مقابل React

مدل (DOM) برای React

Document Object Model (DOM) یک رابط برنامه نویسی حیاتی است که نمایشی از یک سند وب و تمام محتویات آن است. توانایی کتابخانه ها و فریمورک ها برای مدیریت DOM به طرز چشمگیری بر نحوه استفاده و مشاهده نهایی آنها تأثیر می گذارد.

ویژگی اصلی React Virtual DOMاست. Virtual DOM یک نمایش مجازی از DOM واقعی است، به این معنی که هر گونه تغییر نما به صورت زنده در یک حافظه و نه روی صفحه نمایش می باشد. برای خوانندگان غیر فنی ، درک این نکته مهم است که Virtual DOMسریعتر است، عملکرد بالاتر و تجربه کاربری بهتری را در مقایسه با مدیریت دستی تغییرات DOM ارائه می دهد.

API ها برای React Native

از سوی دیگر، React Nativeهنگام رندر کردن مؤلفه UIاز رابط برنامه کاربردی (API) استفاده می کند. اگر در مورد APIمطمئن نیستید، تعریفی از Webopediaآورده شده است:

API مجموعه‌ای از روال‌ها، پروتکل‌ها و ابزارها برای ساخت برنامه‌های نرم‌افزاری است. به عبارت دیگر، یک API نحوه تعامل اجزای نرم افزار را مشخص می کند. برخلاف Cordova یا فریمورک متقابل پلتفرم دیگری مانند PhoneGap، React Native اجزای کد خاصی را با API ها ارائه می کند. React Nativeبا ماژول ها و کامپوننت ها ارائه می شود که عملکرد را بهبود می بخشد.

تفاوت بین React و React Native چیست؟

بیشتر خواهر و برادرها در برخی از ویژگیها مشترک هستند، اما بیشتر آنها به همان اندازه که کارهای مشترکشان را انجام می دهند، تفاوت دارند. همین امر در مورد Reactو React Native نیز صدق می کند. تفاوت های کاملاً واضحی بین این دو وجود دارد. بهتر است آنها را به دسته های زیر تقسیم کنید:

تفاوت های عملکردی بین React و React Native

React یک کتابخانه open source و جاوا اسکریپت است که عمدتاً برای ایجاد رابط کاربری برای برنامه های کاربردی وب استفاده می شود. در حالی که React Native یک فریمورک متن باز برای ایجاد برنامه های موبایلی چند پلتفرمی در iOS، Androidو Windows است.

Reactاساساً برای برنامه های کاربردی وب طراحی شده، در حالی که React Native برای هدف توسعه موبایل بین پلتفرمی طراحی شده است.

React Nativeبه صراحت برای ایجاد رابط کاربری تلفن همراه پاسخگو طراحی شده است.

وابستگی به پلتفرم:

React هیچ وابستگی به پلتفرم خاصی ندارد، به این معنی که می توان آن را در انواع پلتفرم ها اجرا کرد.

React Nativeوابسته به پلتفرم است. در حالی که درصد زیادی از کد را می توان در یک پلتفرم مختلف یا در یک راه اندازی چندین پلتفرم به اشتراک گذاشت، درصدی از کد خاص نیز وجود دارد که برای هر پلتفرم خاص مانند iOS یا Androidتطبیق داده شده است.

تگ های HTML

تگ های HTML در Reactاستفاده می شوند. این فناوری از دو بخش تشکیل شده است - کامپوننت ها و HTML

هیچ تگ HTML در React Native استفاده نشده است.

جهت یابی

ناوبری React مستقیماً توسط React قدرتمند شده است و به طور کامل با جاوا اسکریپت یکپارچه شده است که برای بارگذاری برنامه های وب ایده آل است.

React Nativeبا استفاده از کتابخانه بومی ری اکتخود کمی پیچیده‌تر است.

پیمایش برنامه های تلفن همراه، فعال کردن عملکرد کلیدی تلفن همراه.

مزایا و معایب React

مزایای React

آسان برای یادگیری و استفاده

در حالی که یادگیری هیچ فناوری آسان نیست، آموزش ها و منابع آموزشی زیادی برای کسانی که می خواهند React را یاد بگیرند وجود دارد. همچنین یادگیری آن برای کسانی که قبلاً پیشینه جاوا اسکریپت دارند آسان تر است.

یک برنامه وب پویا

پیش از این، ایجاد برنامه های کاربردی وب با عملکرد بالا با استفاده از HTML به دلیل پیچیدگی کد دشوار بود، اما React این مشکل را حل کرد زیرا به کدنویسی کمتری نیاز است و عملکرد بیشتری را ارائه می دهد.

اجزای قابل استفاده مجدد

برنامه ای که از React ساخته شده از چندین مؤلفه استفاده می کند. این مولفه ها هر کدام منطق و رندر مخصوص به خود را دارند که در صورت نیاز می توان از آنها مجددا استفاده کرد. این استفاده مجدد امکان توسعه و نگهداری آسان برنامه را فراهم می کند.

عملکرد بهینه شده

همانطور که قبلاً ذکر شد، Virtual DOM یکی از ویژگی های تعیین کننده React است. فرآیند Virtual DOM حداقل زمان به روز رسانی به DOM واقعی را تضمین می کند که به نوبه خود عملکرد بالاتر و تجربه کاربری بهتری را ارائه می دهد.

جامعه کاربری عظیم

از زمانی که React در سال 2013 open source شد، توسعه دهندگان از سراسر جهان قادر به استفاده و بهبود آن بودند. جامعه React کتابخانه های ارزشمندی را فراهم می کند که فرآیند توسعه Reactرا تسهیل می کند.

معایب React

در زیر برخی از رایج ترین معایب Reactذکر شده است:

توسعه با سرعت بالا

محیط React دائماً در حال تغییر است و توسعه‌دهندگان را برای برقراری ارتباط با به‌روزرسانی‌های مداوم مشکل می‌کند. اکثر فریمورک‌های وب مدرن این ویژگی را دارند، بنابراین اگرچه ممکن است به خودی خود یک نقطه ضعف نباشد، اما هنوز هم برای توسعه‌دهندگان React قابل رقابت است.

JSX

React از JavaScript XML (JSX) استفاده می کند. JSX افزونه ای است که به HTML اجازه می دهد در React نوشته شود. بسیاری از توسعه دهندگان مستندات JSX را دوست ندارند و معتقدند که درک آن برای توسعه دهندگان جوان دشوار است.

مزایای React Native

در زیر برخی از مزایای پذیرفته شده React Nativeآورده شده است:

توسعه سریعتر

React Nativeاز جاوا اسکریپت ، که باعث می شود توسعه برنامه بیشتر شبیه توسعه وب باشد، با تکرارها و انعطاف پذیری بیشتر استفاده می کند. این مزیت ویژگی افزوده ای نیز دارد که توسعه دهندگان وب می توانند به راحتی مهارت های خود را بهبود بخشند و برنامه های React Native بسازند.

کد قابل استفاده مجدد

دستاورد درخشان React Nativeاین است که عملکرد چند پلتفرمی را فعال می کند. این مسئله تا حدی از طریق کدهای قابل استفاده مجدد حاصل می شود که می تواند در iOS و Androidمستقر شود.

اشکالات کمتر

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

هزینه کمتر

مزایای ذکر شده در بالا به یک مزیت کلی React Nativeخلاصه می شود :کاهش هزینه. یک برنامه React Nativeباید یک بار با مزیت اضافه استفاده از یک پایگاه کد واحد (بیشتر اوقات) ساخته شود. این به معنای یک تیم است که در هزینه های حقوق و دستمزد و اداری صرفه جویی می کند. دیگر صرفه جویی در هزینه از مجوز MITاست که React Nativeتحت آن توزیع می شود. کاربران نیازی به انتشار منبع کد ندارند، هر کسی می تواند نرم افزار را تغییر دهد و تغییرات در کد نیازی به گزارش ندارد. این فریمورک کاملاً بدون مجوز است، بنابراین نیازی به پرداخت هزینه یا اشتراک گذاری برای هر کاری که در فریمورک انجام می شود وجود ندارد.

معایب React Native

در زیر به طور گسترده ای معایب React Nativeذکر شده است:

به روز رسانی های مداوم

React Nativeبه‌طور مداوم در حال به‌روزرسانی است و با رفع اشکال، مؤلفه‌های بومی جدید پورت‌شده، بهبود عملکرد و مؤلفه‌های سفارشی بهبود یافته همراه است. به‌روزرسانی‌ها لزوماً یک نقطه ضعف نیستند، اما چیزی است که توسعه‌دهندگان React Native باید در مقابل یک فریمورک توسعه‌یافته‌تر در نظر بگیرند.

فاقد ماژول های سفارشی

React Nativeهنوز فاقد اجزای خاصی است، در حالی که برخی دیگر هنوز به طور کامل توسعه داده نشده اند. اکثر توسعه دهندگان React Nativeبا این مشکل مواجه نمی شوند. با این حال، کسانی که باید راه حلی برای حل آن پیدا کنند، راه حلی از ابتدا ایجاد کرده یا راه حل موجود را هک کنند.

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

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

• مفهوم Props در آموزش React Native
• مفهوم State ها
• مفهوم Style ها
• مفهوم Widthو Height در React Native component
• حال با ادامه آموزش React Native همراه باشید.

مفهوم Layout با استفاده از Flexbox در آموزش React Native

یک component می تواند چیدمان component های childخودرا با استفاده از algorithm Flexbox تعیین کند. Flexbox برای ایجاد یک Layout پایدار روی صفحات با سایزهای مختلف طراحی شده است.

با استفاده از ترکیبی از flexDirection، alignItems، و justifyContent می توان Layout مناسب طراحی کرد.Flexbox در React Native شبیه CSS عمل می کند. با این تفاوت که مقادیر پیش فرض متفاوتند. flexDirection به جای row، مقدار پیش فرض column دارد، و flex فقط یک عدد می گیرد.

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

مفهوم Flex Direction

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

مفهوم Layout Direction

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

);

}

};

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

);

}

};

مفوم AlignSelf

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

مفهوم Align Content

در alignContent توزیع خطوط در راستای محور عرضی را تعیین می کند. فقط زمانی اثر آن اعمال می شود که آیتم ها با استفاده از flexWrapدر چندین خط شکسته (wrapped) شوند. flex-start (مقدار پیش فرض) خطوط شکسته (wrapped شده) را از ابتدای محور متقاطع container مرتب می کند. flex-end خطوط شکسته را از انتهای محور متقاطع container مرتب می کند. Stretch خطوط شکسته را امتداد می دهد تا کامل محور متقاطع container را پر کنند. center خطوط شکسته را در راستای محور متقاطع container ، وسط قرار می دهد. space-between خطوط شکسته را در راستای محور اصلی container قرار می دهد و فضای اضافه را بین آن ها توزیع می کند. space-around خطوط شکسته را در راستای محور اصلی container قرار می دهد و فضای اضافه را اطراف آن ها توزیع میکند. در مقایسه با space-between، فضای اضافه به ابتدا و انتهای اولین و آخرین خط افزوده میشود.

مفهوم Flex Wrap

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

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

مفهوم Flex Basis، Grow و Shrink

در 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

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

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

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

آموزش React Native ادامه دارد