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

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

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

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

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

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

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

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

روش اول:‌

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

روش دوم:

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

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

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

۴- انتحاب گزینه 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 توی استایل ها خیلی راحت هست و با ۳ مشخصه میشه به نتیجه دلخواه رسید:

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

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

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

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

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

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

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

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/