ویرگول
ورودثبت نام
Nima Mohamadian
Nima Mohamadian
خواندن ۴ دقیقه·۶ سال پیش

نکات طلایی ری اکت نیتیو - ۱

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

همچنین میتونید قسمت های بعدی رو مطالعه کنید:

https://virgool.io/iran-react-community/نکات-طلایی-برای-توسعه-دهندگان-ری-اکت-نیتو-reactnative-قسمت-۲-amutwugieavo
https://virgool.io/iran-react-community/نکات-طلایی-برای-توسعه-دهندگان-ری-اکت-نیتو-reactnative-قسمت-۳-gp4mrgm6ntuy


اگر هم تو عرصه ری اکت نیتیو تازه کار هستید و میخواهید که از پایه شروع کنید به این آموزش من سر بزنید:

https://virgool.io/iran-react-community/آموزش-مبتدی-react-native-همراه-با-مثال-از-صفر-تا-۱%DB%B0%DB%B0-قسمت-اول-cyqz5skqhuxv




نکات طلایی ری اکت نیتو - ۱
نکات طلایی ری اکت نیتو - ۱

۱ - برای اینکه تست کنیم ReactNative به درستی روی سیستم نصب شده و یا اینکه ورژن نصب شده رو ببینیم کافیه که دستور زیر رو تو ترمینال بزنید:

کنترل ورژن نصب شده ری اکت نیتو
کنترل ورژن نصب شده ری اکت نیتو


دیدن این جواب یعنی اینکه همه چی به خوبی نصب شده و کار میکنه !!



۲- وقتی که از Android Studio برای شبیه سازی گوشی اندروید و از Xcode برای آیفون استفاده میکنیم یه فرق اساسی وجود داره‌ - روی بقیه پلتفورم ها هم این موضوع صادق هست - اندروید استودیو یک Emulator هست برای اجرای گوشی اندرویدی و Xcode یک Simulator برای اجرای آیفون هست.
وقتی که جلوتر برید با تفاوت های این دو آشنا میشید. فقط الان بدونید که این دو باهم فرق میکنه
بعدا به نکاتش اشاره میکنیم!


۳- با دو روش میشه نسخه های مختلفی از شبیه ساز گوشی آیفون رو در هنگام run اجرا کرد :

روش اول:‌

استفاده از flag نام گوشی

استفاده از flag  در هنکام اجرای برنامه
استفاده از flag در هنکام اجرای برنامه

روش دوم:

توی پوشه پروژه - پوشه ios وجود داره که توی عکس مشخص هست . تو این پوشه با فایلی هم اسم پروژه و با پسوند xcodeproj روبرو میشیم که اگه بازش کنیم برنامه Xcode باز میشه (به صورت پیش فرض)
حالا از سمت قسمت چپ و بالای برنامه میتونید ورژن گوشی که میخواید رو انتخاب کنید و بعدش پلی رو بزنید تا همون نسخه از گوشی اجرا بشه:

فایل اصلی کد های پروژه - ios
فایل اصلی کد های پروژه - ios


انتخاب مدل گوشی از این قسمت و بعد از آن اجرای شبیه ساز توسط دکمه play

انتخاب آیفون دلخواه و اجرای آن
انتخاب آیفون دلخواه و اجرای آن

همچنین میتونید این سری آموزشی رو هم دنبال کنید:

https://virgool.io/iran-react-community/ری-اکت-رو-قورت-بده-۱-u8t5ysweyxyj


۴- انتحاب گزینه Hot reload توی شبیه ساز های اندروید و آیفون گزینه جذابی به نظر میرسیه
اما همیشه خوب عمل نمیکنه و مشکلاتی هم داره مثل اینکه منابع بالایی از سیستم رو مصرف میکنه.
برای اینکه تجربه عملکرد بهتری داشته باشید توصیه میشه که این گزینه رو خاموش کنید و به جاش میتونید از Live Reload استفاده کنید . در این صورت وقتی فایلی تغییر کرد و سیو شد به صورت خودکار شبیه ساز هم تغییر میکنه. من دیدم حتی اونایی که حرفه ای هستن از load دستی استفاده میکنن (command + r و یا ctrl + r ) و دیوایس رو refresh میکنند.


۵- توی تفکر ری اکت و ری اکت نیتیو همه چیز کامپوننت هست پس وقتی داریم کد React میزنیم برای جدا کردن بخش های مختلف از هم و دادن استایل و ... از تگ div استفاده میکنیم و همچنین برای پاراگراف (متن) از تگ p . اما توی React Native این موضوع کمی متفاوت هست و به جای div از کامپوننت View و به جای p از کامپوننت Text استفاده میکنیم.

این کامپوننت ها به راحتی به برنامه اضافه میشن:

کامپوننت های پیش فرض پر استفاده ری اکت نیتیو
کامپوننت های پیش فرض پر استفاده ری اکت نیتیو

در استفاده از این کامپوننت ها چند نکته مهم وجود داره:

الف: قرار دادن محتوای متنی توی ری اکت نیتیو فقط از طریق تگ Text امکان پذیر هست.
ب: توی تگ Text نمیشه از View استفاده کرد !!
ج: دلیل استفاده از پرنت View برای Text این هست که بعضی از خصوصیات استایل مثل alignItem & justifyContent برای تکست عمل نمیکن و باید این استایل هارو به پرنت View اون داد.


۶- استایل مهم و فوق العاده کاربردی flex به صورت پیش فرض توی ری اکت به صورت row عمل میکنه اما توی ری اکت نیتیو به صورت column و عمودی همه چیز رو مرتب میکنه !

برای تغییر جهت flex:

flexDirection: 'row'

۷- برای اینکه بتونیم چند استایل رو همزمان به یک کامپوننت بدیم از آرایه استایل استفاده میکنیم.

استفاده از آرایه برای چندین استایل در یک کامپوننت
استفاده از آرایه برای چندین استایل در یک کامپوننت


استفاده از استایل به صورت Inline برای کامپوننت ها در حالت کلی کار درستی نیست و جدا از این که کد پروژه رو زشت و کثیف میکنه - کار دیباگ کردن رو هم سخت میکنه ولی بعضی وقت ها مجبور به این کار هستیم مثلا زمانی که میخواهیم به صورت داینامیک به یک کامپوننت استایل بدیم .
پس در حالت کلی از این که In line به کامپوننت هامون استایل بدیم دوری میکنیم!

۸ - خوبه یک توسعه دهنده ری اکت / نیتیو برای سرعت بخشیدن به استایل دادن کامپوننت ها چندین کد hex رنگ رو حفظ باشه تا کارو سریع راه بندازه :

هکس کد های معروف که لازمه بلد باشیم
هکس کد های معروف که لازمه بلد باشیم
البته این نکته شماره ۸ ربطی به ری اکت نداره و CSS هست اما دونستنش برای توسعه دهنده ری اکت/نیتیو لازم هست.

۹- قرار دادن border توی استایل ها خیلی راحت هست و با ۳ مشخصه میشه به نتیجه دلخواه رسید:

مشخصه های لازم برای ساختن مرز border
مشخصه های لازم برای ساختن مرز border


اولی برای ضخامت - دومی برای رنگ - سومی برای گرد کردن اطراف

البته مقدار borderRadius هم دلخواه هست و با دو مشخصه اول هم یک مرز ساخته میشه !

۱۰- کامپیوتر ها و گوشی ها امروزی به اندازه کافی قدرتمند هستند اما وقتی صحبت از Performance Optimization میشه حتی ۱ نکته هرچند کوچک هم باید برامون مهم باشه و بهش دقت کنیم .


یکی ازین نکات خیلی ساده کوتاه کد زدن و خلاصه کردن هستش که تو همه جای پروژه کمکون میکنه
اما این خلاصه کردن نباید خوانایی کدمون رو کم کنه !


یکی از مواردش این هست که مثلا توی فایل های استایل مستقیم استایل ساخته شده رو export کنیم:

خلاصه نوشتن
خلاصه نوشتن

در حالت عادی این سبکی نوشته میشه:

حالت عادی
حالت عادی

سایر نوشته های من:

https://virgool.io/@novonimo/آموزش-مقدماتی-دارت-dart-قسمت-۱-vrd1jjuoble1
https://virgool.io/@novonimo/فوت-و-فن-برنامه-نویسی-functional-با-جاواسکریپت-ujucyxjfn0zw

Contact With me:
https://t.me/nimamohamadian
https://www.facebook.com/nimamohamadian89
https://twitter.com/Nima_Mohamadian
https://www.linkedin.com/in/nima-mohamadian-57ba63123/

javascriptreactreactnativefrontenddeveloper
توسعه دهنده جاواسکریپت
جامعه غیر انحصاری توسعه دهندگان React JS و React Native ایران
شاید از این پست‌ها خوشتان بیاید