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

توی این سری از نوشته هام قراره به نکات خیلی ریز و کاربردی از برنامه نویسی جاواسکریپت تو کتابخونه React Native اشاره کنم !البته بیشتر نکاتی که توی سری ری اکت هم آوردم به کار توسعه دهنده های ReactNative هم میاد. پس بهتره که این مجموعه رو هم دنبال کنید: https://virgool.io/iran-react-community/ری-اکت-رو-قورت-بده-۱-u8t5ysweyxyj ری اکت نیتیو۲۳ - کار با کامپوننت Imageهمون طور که از اسم این کامپوننت مشخصه برای کار با عکس ها به کار میره. نکته ای که در مورد این موضوع هست استایل دهی این کامپوننت هست. در اکثر مواقع عکس هایی که قراره از این طریق نمایش داده بشه توسط سرور به ما فرستاده میشه و ممکنه که هر عکسی اندازه مختلفی داشته باشه و اگر به فکر چاره برای اینکار نباشیم در موقع اجرای برنامه نتیجه غیر منتظره ای بگیریم. برای این منظور میشه از روش محدود کردن اندازه فایل مورد نظر در ابتدای ورودش به این کامپننت استفاده کرد:وارد کردن یک عکساین روش خیلی ساده است اما همیشه خوب کار نمیکنه !!!چون ممکنه عکس هایی که برای ما داره میاد سایز های مختلفی داشته باشه و ما اگه محدودشون کنیم به دو اندازه ۱۰۰ پیکسلی اندازه عکس بهم بریزه. ما که داریم کد سمت کلاینت میزنیم باید همه شرایط رو در نظر بگیرم (در اصل باید از سمت بک اند این موضوع کنترل بشه اما همیشه عدم هماهنگی ها و باگ ها میتونه رو کد ما تاثیر گذار باشه پس بهتره که ما وظیفه خودمون رو به درستی انجام بدیم). پس بهتره که برای کنترل این قسمت از یک پرنت View استفاده کنیم و اندازه ای که قراره عکس ها نمایش داده بشن رو محدود کنیم و از روش زیر هم استفاده کنیم که دیگه خیالمون بابت هر عکسی با هر سایزی که میاد مطمئن باشه.روش درست کنترل کامپوننت Imageدلیل اینکه من از flex: 1 استفاده کردم این هست که با کامپوننت View یه فضایی میسازم برای عکسم و با استایلی که به Image میدم از همه عرضش استفاده میکنم. قرار دادن resizeMode توی Image هم به کنترل عکسمون کنترل میکنه.۲۴- عکس هایی با اندازه های مختلفیکی از نکات مثبتی که باز به هوشمندی ری اکت برمیگرده (:دی) اینه که چون دیوایس هایی که قراره باهاشون کار کنیم مختلف هستند و هرکدوم اندازه های مختلفی دارن پس نمیشه یک عکس رو با هر اندازه ای توی برناممون قرار داد.روش درست این هست که ما ۳ سایز از عکسی که میخواییم رو داشته باشیم.فرض کنید من یک عکس با اسم logo.png دارم که توی پوشه : /src/images/قرار داره. کافی هست که ۲ تا سایز دیگه از این عکس هم داشته باشیم و به روش زیر اسم هاشون رو تغییر بدیم:logo.pnglogo@2x.pnglogo@3x.pngو به برنامه اعلام میکنیم که عکس ما همون logo.png هست. خود ری اکت تشخیص میده که چه جوری از این عکس های مختلف با سایز های مختلف توی برنامه استفاده کنه !برای تبلت میاد از سایز ۳ برابر استفاده میکنه و برای دیوایس های کوچیکتر از سایز معمولی.۲۵- تو قسمت های قبلی در مورد راه اندازی کنسول و debug صحبت کردم اما برای اینکه یک کنسول ساده (صرفا برای دیدن اعلان ها و ...)‌ داشته باشیم میتونیم از راه ساده تری هم استفاده کنیم. برای console.log & console.warn بهترین انتخاب همین هست. توی ترمینال:react-native log-is react-native log-android۲۶- از Developer-Tools های خیلی خوبی که وجود داره میشه به این مورد اشاره کرد . این ابزار رو اول باید نصب کنیم:yarn global add react-devtoolsاگر هم که با npm میخواهیم اینکارو انجام بدیم:npm install -g react-devtoolsحالا کافیه که توی ترمینال:react-devtoolsسایر قسمت های این سری از آموزش ری اکت نیتیوقسمت اول: https://virgool.io/iran-react-community/نکات-طلایی-برای-توسعه-دهندگان-ری-اکت-نیتو-reactnative-قسمت-۱-l8kuhkrr98ps قسمت دوم: https://virgool.io/@novonimo/نکات-طلایی-برای-توسعه-دهندگان-ری-اکت-نیتو-reactnative-قسمت-۲-amutwugieavo قسمت سوم: https://virgool.io/@novonimo/نکات-طلایی-برای-توسعه-دهندگان-ری-اکت-نیتو-reactnative-قسمت-۳-gp4mrgm6ntuy Contact With me:https://t.me/nimamohamadianhttps://www.facebook.com/nimamohamadian89https://twitter.com/Nima_Mohamadianhttps://www.linkedin.com/in/nima-mohamadian-57ba63123/