Scale کردن اپلیکیشن های React Native برای Tablet


اگر شما با React Native کار میکنید،یکی از سوالاتی که ممکنه ذهن شما رو درگیر کرده باشه اینکه چجوری اپلیکیشن رو برای Tablet طراحی کنم.نگران نباشید.در این مقاله من به شما آموزش میدم چجوری اپلیکیشن توسعه داده شده با React Native رو برای همه دیوایس ها طراحی کنید.
مشکل
زمانی که شما یک اپلیکیشن React Native میسازید،شما ممکنه فقط بر روی موبایل تست بگیرید.مشکل زمانی ایجاد میشه که شما اون رو روی Tablet تست میکنید و دلیلش هم داشتن پیکسل بیشتر نسبت به موبایل است.بنابراین هر ابعادی که برای موبایل در نظر بگیرید برای تبلت کار نخواهد کرد.
راه حل
من یک اپلیکیشن ساده چت با React Native توسعه دادم که به خوبی بر روی موبایل و تبلت نمایش داده میشه و هیچ به هم ریختگی در اپلیکیشن دیده نمیشه.
کد کامل برنامه رو میتونید از اینجا ببینید.
عکس زیر نحوه نمایش اپلیکیشن بر روی iPhone X و iPad Air 2 رو نشون میده.
همونطور که در بالا مشاهده میکنید نوشته در تبلت بسیار ریزتر از موبایل هستند و به خوبی خونده نمیشن.
Scaling with Flex
Flexbox زمانی که شما برنامه رو scale میکنید،خیلی مفید است.اما Flexbox فقط عرض ، ارتفاع و container درون اون رو scale میکنه و نسبت ها رو برای دستگاه های مختلف حفظ میکنه.flex با properties خاصی مثل width
, height
, margin
و padding
محدود شده.اما ما نمیتونیم از flex برای properties مثل fontSize
, lineHeight
یا SVGs استفاده کنیم.
Scaling with Percentages
ما همچنین میتونیم اپلیکیشن رو با استفاده از درصد(%) scale کنیم.از نسخه 0.42 به بالا React Native پشتیبانی از درصد(%) اضافه شد اما با properties مثل padding
, margin
, width
, height
, minWidth
, minHeight
, maxWidth
, maxHeight
, flexBasis
محدود شده و properties دیگه ای مثل fontSize
و lineHeight
به خوبی با درصد کار نمیکنه.
Scaling with a Library
React Native Size Matters یک کتابخونه است که توسط Nir Hadasi نوشته شده که به ما کمک میکنه خیلی راحت با استفاده از 3 تابع اپلیکیشن رو scale کنیم.
scale(size: number)
verticalScale(size: number)
moderateScale(size: number, factor?: number)
این دارای مقیاس های گوناگونی است که بر اساس دستگاه های صفحه نمایش 5 اینچی است که باعث میشود برای دستگاه های با سایز بزرگ تر scale شود.


حالا باید از کتابخانه react-native-size-matters
در اپلیکیشن چت استفاده کنیم.ما یک صفحه ساده چت با استفاده از react-native-size-matters
با رنگ پس زمینه آبی و زرد میسازیم.
بدون استفاده از react-native-size-matters


با react-native-size-matters


همونطور که مشاهده میکنید کافیه که شما فقط height
, padding
, margin
و fontSize
رو تغییر بدید تا اپلیکیشن رو scale کنید.
نتیجه گیری
برای scale من از flexbox و در مرحله بعد از درصد استفاده میکنم.بعدا من سعی میکنم height رو با استفاده از <size>@vs
و برای هر چیزی دیگه ای از <size>@ms
یا <size>@s
برای scale استفاده کنم.
اسکرین شات از اپلیکیشن بعد از scaling


دیدگاهتان را بنویسید