آموزش React Native-آموزش پروژه محور React Native
آموزش مباحث پایه React Native
این بخش آموزش React Native به شما کمک می کند اولین application React Native خود را نصب و build کنید. اگر React Native را قبلا نصب کرده اید، می توانید این بخش را رها کنید و مستقیما از بخش مفاهیم پایه در React Native شروع کنید.شروع کار با React Native
می توانید از هر ویرایشگری برای توسعه application خود استفاده کنید، با این حال Android Studio را برای راه اندازی ابزارهای مورد نیاز برای build کردن application React Native خود برای android لازم خواهید داشت.آموزش محیط Linux و android در React Native
می توانید از هر ویرایشگری برای توسعه application خود استفاده کنید، با این حال Android Studio را برای راه اندازی ابزارهای مورد نیاز برای build کردن application React Native خود برای android، لازم خواهید داشت.آموزش کار با Mac و android با React Native
می توانید از هر ویرایشگری برای توسعه application خود استفاده کنید، با این حال Android Studio را برای راه اندازی ابزارهای مورد نیاز برای build کردن application React Native خود برای android لازم خواهید داشت.آموزش محیط Windows و android در React Native
component ها در React Native با استفاده از جاوااسکریپت استایل دهی می شوند. مشخصه های رنگ معمولا شبیه CSS در وب عمل می کنند.آموزش Color Reference در React Native
آموزش راه اندازی محیط توسعه React Native
اغلب component ها هنگام initialize می توانند با پارمترهای مختلفی سفارشی سازی شوند. این پارامترهای زمانِ ساخت، Props نامیده می شوند.آموزش Props در React Native
دو نوع دیتا وجود دارد که یک component را کنترل می کند: props و state. دیتای Props توسط component parent مقداردهی می شوند و در طول چرخه حیات component ثابت هستند. برای دیتای متغیر، از state استفاده می کنیم.آموزش State ها در React Native
در React Native، برای تعریف style از syntax یا زبان خاصی استفاده نمی کنیم. application را با استفاده از جاوااسکریپت style می دهیم. همه component های اصلی یک prop به نام style دارند. اسامی و مقادیر style معمولا شبیه CSS در وب کار می کند، با این تفاوت که اسامی به صورت camel casing انتخاب می شوند، مثلا backgroundColor (و نه background-color).آموزش Style ها در React Native
ساده ترین راه مقداردهی به ابعاد یک component مقداردهی ثابت به width و height در هنگام استفاده از style است. تمام ابعاد در React Native بدون واحد هستند، و نشان دهنده density-independent pixel هاهستند.آموزش Width و Height در React Native component
یک component می تواند چیدمان component های child خود را با استفاده از algorithm Flexbox تعیین کند. Flexbox برای ایجاد یک Layout پایدار روی صفحات با سایزهای مختلف طراحی شده است.آموزش Layout در React Native با استفاده از flexbox
component پایه ای که برای دریافت ورودی از کاربر استفاده می شود TextInput است. این component یک prop به اسم onChangeText دارد که می توان به آن تابعی داد که پس از هر تغییر متن صدا زده شود. یک prop به اسم onSubmitEditing دارد که می توان به آن تابعی داد که هنگام ثبت دیتا، صدا زده شود.آموزش مدیریت ورودی های متنی در React Native
عمده ی تعامل کاربران با application های موبایل از طریق touch است. آن ها از حرکاتی ترکیبی، مثل زدن یک button، بالا و پایین کردن یک لیست، zoom روی یک نقشه و... استفاده می کنند. React Native، component هایی برای کار با انواع حرکات متداول در اختیار می گذارد. علاوه بر آن یک سیستم جامع gesture responderبرای شناسایی حرکات پیچیده تر دارد.آموزش مدیریت ورودی های touch در React Native
ScrollView یک container scroll کلی است که می تواند چندین component و view را در خود نگه دارد. آیتم های قابل scroll لازم نیست هم نوع باشند، و می توان آن ها را هم افقی (با مقداردهی بهprop horizontal) و هم عمودی scroll کرد.آموزش استفاده از ScrollView در React Native
React Native مجموعه ای از component ها برای نمایش لیست ها در اختیار می گذارد. عمدتا از FlatList یا SectionList استفاده می شود.آموزش استفاده از List View در React Native
اغلب application های موبایل منابع خود را از شبکه load می کنند. ممکن است بخواهید یک POST request به یک REST API بزنید، یا محتوایی ثابت از یک سرور بگیرید.آموزش ارتباطات تحت شبکه در React Native Apps
تا اینجای کار را با ما همراه بودید، اکنون می توانید یک application React Native برای خودتان بنویسید. اما React Native فقط یک محصول نیست، بلکه جامعه ای از توسعه دهندگان است. اگر به React Native علاقه مند هستید.آموزش منابع دیگر در حوزه React Native
آموزش مفاهیم پیشرفته React Native
VirtualizedList: کامپوننت پایه ی FlatList (پیاده سازی React Native از مفهوم virtual List)آموزش تنظیماتی برای بهبود عملکرد Flatlist در React Native
React Native چندین component built-in دارد. لیست کاملی از component ها و API ها در این سایت موجود است.آموزشcomponent ها و API ها در React Native
هنگام ساخت یک application که روی پلتفرم های مختلف قابلیت اجرا دارد، می خواهیم تا جایی که ممکن است از کدهای یکسان در بخش های مختلف بارها استفاده کنیم. با این حال، سناریوهای زیادی ممکن است پیش بیاید که در آن کدها باید متفاوت باشند، برای مثال ممکن است بخواهیم المان های بصری متفاوتی برای application android و IOS خود استفاده کنیم.آموزش کدهای پلتفرم - محور برای React Native Apps
application های موبایل معمولا تک صفحه ای نیستند. مدیریت نمایش و حرکت بین چندین صفحه معمولا توسط navigator انجام می شود.آموزش حرکت بین صفحات (Navigation) در React Native
React Native روشی یکپارچه برای مدیریت عکس ها و دیگر فایل های media در application android و iOS فراهم می آورد. برای افرودن یک عکس ثابت به آموزش تصاویر در React Native
انیمیشن ها در ایجاد یک تجربه کاربری فوق العاده، بسیار موثرند. انیمیشن به شما امکان انتقال حس حرکت را در UI می دهد. React Native دو سیستم مکمل برای ایجاد انیمیشن را در اختیار می گذارد: Animated و LayoutAnimation.آموزش انیمیشن ها در React Native
Timerها میتوانند نقش مهمی در یک برنامه داشته باشند.React Native، امکان استفاده از browser timer ها را پیاده سازی کرده و در اختیار می گذارد.آموزش استفاده از Timer در یک React Native App
آموزش Debugging در یک React Native Application
یک دلیل مهم برای استفاده از React Native به جای ابزارهای مبتنی بر WebView ، رسیدن به 60 frame در ثانیه است درحالی که application حس و ظاهر یک application native را داشته باشد . هدف ما این است که با React Native، شما روی application تان تمرکز کنید نه بهبود عملکرد آن پیش فرض عملکرد روانی برای UI ارائه دهیم، اما گاهی اوقات این امکان وجود ندارد.آموزش عملکرد (Performance) در React Native Apps
آموزش سیستم Gesture Responder در React Native
وقتی از React Native استفاده می کنید، کد جاوااسکریپت را در دو محیط اجرا می کنید.آموزش محیط های جاوااسکریپت (JavaScript Environments)
آموزش دستکاری مستقیم component ها در React Native
React Native برای زمانی که از صفر شروع به توسعه ی یک application می کنید گزینه عالی است. با این حال، درصورت افزودن یک view یا یک جریان کاربری به یک application native موجود هم به خوبی کار می کند. در طی چند مرحله، می توانید قابلیت ها، صفحات، viewها و... React Native را به پروژه تان اضافه کنید.آموزش ادغام React Native با application های موجود
همیشه قبل از انتشار نهایی application بهتر است آن را بر روی یک device واقعی آزمایش کنید. این بخش آموزش به مراحل لازم برای اجرای برنامه React Native روی یک device واقعی و آماده سازی آن برای تولید، می پردازد.آموزش اجرای React Native App روی موبایل
آموزش استفاده React Native برای IOS
گاهی اوقات یک برنامه نیاز به دسترسی به یک API از پلتفرم را دارد که React Native هنوز ماژول مربوط به آن را ندارد. ممکن است بخواهید کد Objective-C، Swift یا C++ موجود را بدون پیاده سازی مجدد آن در JavaScript دوباره استفاده کنید یا کدی با عملکرد خوب و multi thread مثلا برای پردازش تصویر، دیتابیس، یا هر افزونه ی پیشرفته ای بنویسید.آموزش React Native: ماژول های native در iOS
همه ی application ها از تمام قابلیت های native استفاده نمی کنند، و لازم نیست همه ی کدهای لازم برای پشتیبانی از این ویژگی ها را داشته باشند، چرا که سایز فایل نصبی نهایی زیاد می شود. با این وجود می خواهیم افزودن این قابلیت ها در زمان نیاز آسان باشد. به همین منظور بسیاری از این قابلیت ها را به صورت library های ثابت مستقلی برای آن ها ارائه کرده ایم.آموزش افزودن library ها به React Native Application
هزاران native component وجود دارد، React Native اغلب component های کلیدی را در اختیار شما می گذارد، مثل ScrollView و TextInput، اما گاهی به component هایی نیاز داریم که در React Nativeنیست. component هایی برای application تان ساخته باشید component React Native استفاده کرد. آموزش native component ها برای طراحی رابط کاربری در React Native
پس از راه اندازی پروژه ی React Native، می توانید دستور react-native run-ios را درون دایرکتوری پروژه اجرا کنید. اگر همه چیز درست انجام شده باشد، application روی شبیه ساز iOS شروع به اجرا می کند.آموزش اجرا روی شبیه ساز IOS در React Native
در بخش ادغام React Native با application های موجود و بخش کامپوننت های native برای UI، درمورد نحوه ی ادغام React Native درون component های native و برعکس صحبت کردیم. هنگام ادغام این دو، نیاز به راهی برای ارتباط بین آن ها هستیم. به بعضی روش ها قبلا اشاره کرده ایم. این بخش خلاصه ای درمورد روش های موجود است.آموزش ارتباط بین React Native و پلتفرم native
افزونه ها به شما امکان ارائه ی محتوا و قابلیت های سفارشی خارج از application اصلی می دهد. افزونه های زیادی برای این منظور در iOS هست که در این لینک کامل به آن پرداخته شده. در این بخش آموزش، به طور خلاصه این موضوع می پردازیم.آموزش افزونه ها(Extension) در React Native
آموزش استفاده از React Native برای Android
گاهی اوقات یک برنامه نیاز به دسترسی به یک API از پلتفرم دارد که React Native هنوز ماژول مربوط برای آن را ندارد. ممکن است بخواهید کد Javaی موجود را بدون پیاده سازی مجدد آن در JavaScript دوباره استفاده کنید یا کدی با عملکرد خوب و multi thread مثلا برای پردازش تصویر، دیتابیس، یا هر افزونه ی پیشرفته دیگری بنویسید.آموزش React Native: ماژول های native در android
native component های زیادی وجود دارد، بعضی بخشی از پلتفرم هستند، بعضی در library های خارجی قابل دسترس هستند، و حتی بعضی componentهایی هستند که خودتان در application های قبلی تان ساخته و استفاده کرده اید. React Native بیشتر component های مهم را در اختیار شما می گذارد، مثل ScrollView و TextInput.آموزش native component برای طراحی رابط کاربری در React Native
Headless JS روشی برای اجرای یک عملیات (در قالب Task) در JavaScript است، درحالی که application در پس زمینه اجرا می شود. برای مثال می توان از آن برای همگام سازی داده ها، مدیریت notification ها و پخش موسیقی استفاده کرد.آموزش استفاده از Headless JSدر React Native
می توانید یک private key با استفاده از keytool تولید کنید. دستور زیر در ویندوز باید از مسیر C:\Program Files\Java\jdkx.x.x_x\bin اجرا شود.آموزش انتشار React Native App در Google Play Store
به طور پیش فرض، یکسری مجوزها به android application شما اضافه می شود،آموزش حذف مجوزهای پیش فرض در Android در React Native