Давайте сделаем так, чтобы ваше приложение React Native хорошо выглядело на планшетах

Если вы когда-либо работали над приложением React Native, вы, должно быть, задавались вопросом, как мне сделать так, чтобы оно хорошо выглядело на планшетах. Не волнуйся. Из этого туториала Вы узнаете, как сделать так, чтобы ваше приложение React Native не выглядело странно на планшетах или, скажем, на любом другом устройстве.

Эта проблема

Когда вы создаете приложение React Native, вы просто заставляете его работать на мобильных телефонах. Проблема возникает, когда вы пытаетесь заставить его работать на планшетах. Причина в том, что в планшетах больше пикселей, чем в мобильных телефонах. Таким образом, какие бы размеры вы ни указали для мобильных устройств, они определенно не подойдут для планшетов. Короче говоря, чем больше становится ваше устройство, тем больше на нем пикселей.

Из документов,

Все размеры в React Native безразмерны и представляют собой пиксели, не зависящие от плотности. Такой способ установки размеров является обычным для компонентов, которые всегда должны отображаться с одним и тем же размером, независимо от размеров экрана.

Решение

Я создал простое приложение для чата для этого руководства, которое уже хорошо выглядит на мобильных устройствах, и мы узнаем, как масштабировать приложение, чтобы оно хорошо выглядело на планшетах .

🔗 Полный исходный код можно найти здесь.

На следующем рисунке показано, как выглядит приложение, когда вы видите его на мобильном телефоне (iPhone X) и когда вы видите его на планшете (iPad Воздух 2) -

Как видно выше, приложение на планшете выглядит очень маленьким, чем на телефоне. Поэтому нам нужно масштабировать его, чтобы он хорошо смотрелся на планшете.

Масштабирование с помощью Flex

Flexbox полезен при масштабировании. Но flexbox масштабируется только по всей ширине или высоте контейнера, в котором он находится. Он сохраняет одинаковые пропорции на разных устройствах.

Flexbox может хорошо масштабироваться, если мы добавим несколько хаков, добавив больше контейнеров, но это большая работа.

Кроме того, flex ограничен определенными свойствами, такими как width, height, margin & padding. Но мы не можем использовать его для некоторых других свойств, таких как fontSize, lineHeight или SVG.

Масштабирование с процентным соотношением

Мы можем хорошо масштабировать наше приложение, используя проценты (%).

В React Native v0.42 и выше добавлена ​​поддержка процентов (%), но она ограничена только такими свойствами, как padding, margin, width, height, minWidth, minHeight, maxWidth, maxHeight, flexBasis.

Другие свойства, такие как fontSize & lineHeight, не работают с процентами.

Масштабирование с помощью библиотеки

React Native Size Matters - это библиотека, написанная Ниром Хадаси, которая помогает нам упростить масштабирование, предоставляя 3 простые служебные функции.

Библиотека очень мала и содержит 3 простые служебные функции, а именно:

scale(size: number) - возвращает результат с линейным масштабированием указанного размера в зависимости от ширины экрана вашего устройства.

verticalScale(size: number) - возвращает результат с линейным масштабированием указанного размера в зависимости от высоты экрана вашего устройства.

moderateScale(size: number, factor?: number) - возвращает нелинейный масштаб на основе коэффициента изменения размера (по умолчанию 0,5). Если нормальный scale увеличится на +2X, moderateScale увеличит его только на + X.

У него есть некоторые рекомендуемые размеры, которые основаны на мобильных устройствах с ~ 5 экранами, что упрощает масштабирование для более крупных устройств.

Он также имеет ScaledSheet метод, который является масштабированным StyleSheet

Он использует следующий API -

<size>@s - применяет функцию scale к size

<size>@vs— Применяет функцию verticalScale на size

<size>@ms - применяет функцию moderateScale с коэффициентом изменения размера 0,5 на size

<size>@ms<factor> - применяет функцию moderateScale с коэффициентом изменения размера на size

Демонстрация приложения для чата

Теперь мы собираемся использовать react-native-size-matters в нашем приложении Basic Chat.

Мы собираемся создать простую оболочку чата (с желто-синим фоном), используя react-native-size-matters.

Без использования react-native-size-matters -

Использование react-native-size-matters -

Как видите, нам нужно было изменить только height, padding, margin и fontSize, чтобы хорошо масштабировать его на разных устройствах.

Заключение

Мне нравится масштабировать, всегда пробовать Flexbox вначале. Затем я стараюсь использовать проценты везде, где это возможно. Позже я пытаюсь масштабировать свойство height по вертикали, используя <size>@vs &, для всего остального я использую либо <size>@ms, либо <size>@s.

Пример, представленный в репозитории, немного отличается, поскольку я абстрагировал общую часть в оболочку, чтобы сделать код более читабельным. В нем также есть переключатель, позволяющий проверить, как приложение будет выглядеть, если react-native-size-matters не включен.

Окончательное решение после применения масштабирования выглядит так -

Вы можете отсканировать следующий QR-код, чтобы запустить это приложение, если на вашем устройстве Android или iOS установлен клиент expo.io:

Есть еще вопросы о масштабировании приложений React Native?

Набери меня в Твиттер! Не стесняйся поздороваться 😃