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