رایگان!
آموزش react navigation 5 دوره ای است که در قالب آن ما به صورت کامل نحوه جابجایی بین صفحات،ایجاد Drawer ، ایجاد bottom tab navigation و تمامی موارد مرتبط با ناوبری اپلیکیشن های react native رو به شکل کامل به شما آموزش می دهیم.
react navigation چیست؟
react navigation یکی از پرکاربردترین کتابخانه های متداول است که توسط بسیاری از توسعه دهنده های react native مورد استفاده قرار می گیرد.این کتابخانه به شما این امکان را خواهد داد تا به سرعت ناوبری اپلیکیشن خود را ایجاد کنید و به راحتی بتوانید آن را مدیریت نمایید. نسحه جدید این کتابخانه نسبت به نسخه های قبلی خود تغییرات زیادی داشته است بخشی از این تغییرات را می تواند در نحوه نصب، تعریف Routes ،dynamic option و یا Hooks مشاهده کرد.
اما قبل از شروع دوره برای آشنایی هر چه بیشتر با این کتابخانه پیشنهاد می شود مقالات زیر را مطالعه نمایید.
پیش نیاز دوره آموزش react navigation
برای مشاهده این دوره شما نیاز دارید تا آشنایی مقدماتی با react native داشته باشید.برای یادگیری مفاهیم پایه و اساسی react native میتونید آموزش رایگان react native موجود در سایت رو مشاهده کنید
سوالات متداول
react navigation چیست
React navigation در اپلیکیشن های react native برای جابجایی و مدیریت screen های مختلف مورد استفاده قرار می گیرد.ما به راحتی می توانیم چندین صفحه را به اپلیکیشن با استفاده از react navigation اضافه کنیم
react navigation برای هر دونسخه Android و IOS قابل استفاده است؟
بلی.شما با نصب react navigation میتوانید در هر دو پلتفرم Android و IOS از این کتابخانه برای جابجایی بین صفحات در react native استفاده کنید
آیا react navigation عملکرد قابل قبول و سرعت بالایی دارد؟
تا قبل از انتشار نسخه 5 react navigation کمی مشکل سرعت و performance وجود داشت ولی در حال حاضر عملکرد react navigation فوق العاده است
آموزش React Navigation 5
0. معرفی دوره ویدئو
12:44 دقیقه
1. ارسال پارامتر به screen
7:05 دقیقه
2. جابه جایی بین صفحات - Navigate
11:24 دقیقه
3. جابه جایی بین صفحات - push و goBack
7:19 دقیقه
4. جابه جایی بین صفحات - popToTop و replace
10:20 دقیقه
5. آشنایی با optionها و استایل دهی
15:34 دقیقه
6. آشنایی با nesting navigator
8:35 دقیقه
7. ایجاد Drawer
10:33 دقیقه
8. ایجاد Drawer سفارشی
16:57 دقیقه
9. ایجاد Tab Navigator
14:54 دقیقه
10. پیاده سازی Dark Mode
16:32 دقیقه
moreدوره های مرتبط
آموزش جامع و پروژه محور Nodejs
آموزش کار با lottie-react-native
آموزش Redux
chat_bubble_outlineنظرات
قوانین ثبت دیدگاه
رایگان!
علی
توسعه دهنده سمت سرورعاشق جاوااسکریپت و توسعه سمت سرور و توسعه اپلیکیشن اونم با React Native:)
milad asgari
سلام و وقت بحیر
چرا فایل های دانلود مربوط به آموزش مطلب دیگری است ؟؟ الان فایلی که دانلود شده -counter-part-1 و -counter- part-2 هست!!!
مهدی(مدیریت)
سلام وقت بخیر
هر دو تا پارت دانلود و تست شد و محتوا مشکلی نداشت
محتوا پارت یک شامل قسمت های زیر است:
intro
sendparamstoscreen
navigatie
push and go back
pop to top and replace
style
محتوا پارت دو شامل قسمت های زیر است:
nesting navigator
drawer section 1
customize drawer
tab navigator
dark theme
پوریا
سلام لطفا ریسپانسیو سایتتون رو درست کنید نظرات از باکسی که واسشون تعریف شده بیرون زدگی دارند و این اصلا خوشایند نیست
ممنون
علیرضا(مدیریت)
پوریا عزیز سلام
ریسپانسیو سایت کاملا درست بوده و مشکلی نداره یک مورد کوچک در مورد یک کامنت فقط وجود داشت که رفع شد
ممنون بابت اطلاع رسانیت
موفق باشی
مهدی(مدیریت)
سلام لینک ها تست شد مشکلی نداره
به احتمال زیاد vpn وصل دارید.لطفا قطع کنید و مجدد تست کنید
amir
https://www.udrop.com/cache/plugins/filepreviewer/147837
/fe46fdd0f92af4e788301b699ab6c8548b340
6ea1489a0f428d02bd29ab3c57f/1100x800_cropped.jpg
slm rahnamii mikhastm chtor mishe hamchin bottom tabi doros krd ch chizaii lazeme yad grft ?
علی(مدیریت)
سلام لینک زیر میتونه بهتون کمک کنه این مورد رو پیاده سازی کنید
علی(مدیریت)
سلام لینک زیر میتومه بهتون برای پیاده سازی این مورد کمک کنه
لینک
amirhosseinjalali818
با سلام
ی سوالی دارم این است که چطوری میشه بین چند تا استک متفاوت نویگیت انجام داد مثلا ی استک اکانت داریم که اسکرین های پروفایل و غیره در آن وجود دارد و یک استک دیگه که مربوط به فروشگاه میشه و محصولات در آن وجود دارد و مثلا بعد از ثبت نام کاربر میخواهیم کاربر را به اسکرینی که مثلا لیست محصولات که در یک استک دیگه هستند بفرستیم و این جا به جایی بین دو تا استک متفاوت است ممنون میشم راهنمایی کنید 🙂
مهدی(مدیریت)
سلام
شما باید صفحات مرتبط رو در یک stack قرار بدید به طور مثال صفحات مرتبط به فروشگاه در یک stack و صفحات مرتبط با پروفایل در یک stack جدا گونه
حلا این stack ها به عنوان screen به stack اصلی معرفی کنید
حالا میتونید به راحتی بین صفحات جابجا بشید
amirhosseinjalali818
نه اخه داخل نویگشن کانتینر من از باتم تب درست شده و چهار تا تب دارم که از استک های متفاوت درست شده من میخواستم بدونم نویگیت بین این استک ها به چه شکلی هست
مهدی(مدیریت)
خب برای هر tab یک stack navigator تعریف کنید و هر stacknavigator رو به عنوان یک tab به bottom tab معرفی کنید
mr.akbari67
سلام خسته نباشید
یه سوال داشتم
من از class component استفاده میکنم اما توی app.js اومدم route ها رو با function component ساختم به این دلیل که از اول کلا class component استفاده کردم و routing رو هم از router flux استفاده کرده بودم که بخاطر یه سری نیاز هام routing رو به react navigation تغییر دادم الان توی کامپوننتی که با class ساخته شده چجوری میتونم از naviagtion استفاده کنم و بگم که مثلا این دکمه onpress شد بره به فلان اسکرین ؟
علی(مدیریت)
سلام وقت بخیر
مشابه روش های معمول در class component ها میتونید بشکل زیر به navigation و سایر prop ها دسترسی داشته باشین.
const {navigation} = this.propsmr.akbari67
ممنون جواب دادین اما
من یه splash دارم که توی componentDidMount برسی میشه اگه لاگین نبود دکمه ورود میاد و با press شدنش میره به صفحه auth وهمینطور اگه لاگین بوده باشه خودکار میره به home و توی auth هم بعد گرفتن token باز خودکار میره home که bottomTab هست و فک کنم توی componentDidMount نمیتونم از
const {navigation} = this.props استفاده کنم درسته ؟ توی این حالت چجوری باید navigate کنم ؟
من تازه کارم دید مناسبی ندارم اگه سوالم مسخره بود شرمنده
mr.akbari67
من حتی تو ساخت screen ها هم مشکل دارم راهنمایی کنید ممنون میشم
من چندتا screen دارم که bottomTab ندارن مثل splash – auth – detail – profile و ۴ تا screen هم دارم که bottomTab هستن
شما توی ویدیو botoomTab رو به عنوان یه drawer.screen ساختین من چجوری باید بگم که بره تو splash لاگین برسی شه نبود بره توی auth بعدش خودکار بره به bottomTab و profile و detail رو هرجا button onPress براش تعریف شده باشه بره تو اون اسکرین ها؟
علی(مدیریت)
در روند ایجاد screenهای مختلف شما باید چه در قالب class componentها چه functional componentها باید قواعد nested navigator رو رعایت کنید تا بتونید به درستی screen های مختلف رو ایجاد کنید حال این screen ها شامل tab navigator و drawer و یا سایر موارد میشن. پیشنهادی که دارم چون از هر دو حالت (functional , class component) استفاده می کنید که البته بهتره کل برنامه رو با یکی از این دو پیش ببرین حتما از document v3 react navigation استفاده کنید.
مهدی(مدیریت)
سلام
برای اینکار بهتره از Authentication flow استفاده کنید
https://reactnavigation.org/docs/auth-flow/
علی(مدیریت)
سلام وقت بخیر
دسترسی دانلود مجددا برای شما بروزرسانی شد.
sr.morteza
سلام
فایلها بعد از دانلود در اکسترکت مشکل دارن و ارور می دهند فقط فایل سورس سالم هست
همچنین سایت اجازه دانلود دوباره هم نمیده !!!!
و خطای
This file has already been downloaded. Go to homepage
را می دهد.
علی(مدیریت)
وقت بخیر
فایل های دوره بررسی شد و بدون هیچ مشکلی دانلود و اکسترکت میشه.
با چه ایمیلی در دوره شرکت کردین!؟