Давайте сделаем так, чтобы ваше приложение 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?
Набери меня в Твиттер! Не стесняйся поздороваться 😃