React Native Responsive Scaling/Шрифт/Размеры/Пиксели

Отзывчивое приложение React Native — это мобильное приложение, созданное с использованием фреймворка React Native, которое предназначено для правильной работы и отображения на экранах разных размеров и разрешений.

Когда приложение создается с учетом быстродействия, это означает, что оно может адаптироваться к различным типам устройств, таким как смартфоны, планшеты и настольные компьютеры, и при этом поддерживать тот же пользовательский интерфейс (UI) и взаимодействие с пользователем (UX).

Давайте начнем кодировать…

import { Dimensions, Platform, PixelRatio } from 'react-native';

Эта строка кода импортирует три модуля из библиотеки React Native: Dimensions, Platform и PixelRatio.

Dimensions предоставляет интерфейс для получения размеров экрана устройства, включая ширину и высоту экрана устройства.
Platform позволяет определить операционную систему устройства, на котором запущено приложение, будь то Android, iOS или какая-либо другая платформа.
PixelRatio — это служебный модуль, который обеспечивает способ преобразования значений пикселей между аппаратно-независимыми единицами пикселей (dp) и физическими единицами пикселей (px) экрана. Это может быть полезно для обработки различных плотностей и разрешений экрана.

Вместе эти модули обеспечивают функциональность для обработки различных размеров экрана и соотношений сторон в приложении React Native.

const {
  width: SCREEN_WIDTH,
  height: SCREEN_HEIGHT,
} = Dimensions.get('window');

Этот код использует синтаксис присваивания деструктурирования для извлечения двух свойств, width и height, из объекта, возвращаемого вызовом метода Dimensions.get('window').

Метод Dimensions.get('window') возвращает объект, содержащий ширину и высоту экрана устройства. Используя назначение деструктурирования с синтаксисом переименования свойств, код присваивает значение width переменной SCREEN_WIDTH и значение height переменной SCREEN_HEIGHT.

Этот метод позволяет использовать переменные SCREEN_WIDTH и SCREEN_HEIGHT вместо выражений Dimensions.get('window').width и Dimensions.get('window').height, что делает код более кратким и удобочитаемым. Затем эти переменные можно использовать в других частях кода для настройки макета и стилей в зависимости от размера экрана устройства и соотношения сторон.

const scale = SCREEN_WIDTH / 375;

Этот код вычисляет коэффициент масштабирования на основе ширины экрана устройства. Предполагается, что переменная SCREEN_WIDTH содержит ширину экрана устройства, полученную ранее в коде с помощью метода Dimensions.get('window').

Значение scale рассчитывается путем деления SCREEN_WIDTH на значение опорной ширины 375. Эталонное значение ширины 375 используется для определения базовой линии для расчета коэффициента масштабирования. Это значение выбрано потому, что оно соответствует ширине устройства iPhone 6/7/8 в портретной ориентации.

Разделив ширину экрана устройства на эталонное значение ширины 375, полученный коэффициент масштабирования можно использовать для настройки макета и стиля элементов в приложении в зависимости от размера экрана устройства и соотношения сторон. Например, если для ширины компонента задано значение 100, умножив его на масштабный коэффициент scale, его ширина будет пропорциональна размеру экрана устройства.

const scaleVertical = SCREEN_HEIGHT / 812;

Этот код вычисляет коэффициент масштабирования на основе высоты экрана устройства. Предполагается, что переменная SCREEN_HEIGHT содержит высоту экрана устройства, полученную ранее в коде с помощью метода Dimensions.get('window').

Значение scaleVertical рассчитывается путем деления SCREEN_HEIGHT на опорное значение высоты 812. Базовое значение высоты 812 используется для определения базовой линии для расчета коэффициента масштабирования. Это значение выбрано потому, что оно соответствует высоте устройства iPhone X/XS/11 Pro в портретной ориентации.

Разделив высоту экрана устройства на эталонное значение высоты 812, полученный коэффициент масштабирования можно использовать для настройки макета и стиля элементов в приложении в зависимости от размера экрана устройства и соотношения сторон. Например, если для высоты компонента задано значение 100, умножив ее на масштабный коэффициент scaleVertical, высота будет пропорциональна размеру экрана устройства.

export function actuatedNormalize(size) {
  const newSize = size * scale
  if (Platform.OS === 'ios') {
    return Math.round(PixelRatio.roundToNearestPixel(newSize))
  } else {
    return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 1
  }
}

Этот код определяет функцию с именем actuatedNormalize, которая принимает один аргумент size. Цель этой функции — настроить размер шрифта текстовых элементов в приложении в зависимости от размера экрана устройства и соотношения сторон.

Сначала функция вычисляет новое значение размера, умножая аргумент size на коэффициент масштабирования scale, который ранее был рассчитан на основе ширины экрана устройства.

Затем функция проверяет свойство Platform.OS, чтобы определить, работает ли приложение на устройстве iOS или Android. Если приложение запущено на устройстве iOS, значение newSize округляется до ближайшего пикселя с помощью методов Math.round() и PixelRatio.roundToNearestPixel(), что помогает обеспечить правильный размер шрифта. Четко отображается на экранах с высокой плотностью изображения.

Если приложение работает на устройстве Android, значение newSize также округляется до ближайшего пикселя, но затем вычитается дополнительный 1 пиксель. Это сделано потому, что рендеринг шрифта на устройствах Android может немного отличаться от рендеринга на устройствах iOS, и эта настройка помогает улучшить согласованность размера шрифта на разных устройствах.

Наконец, функция возвращает скорректированное значение размера шрифта. Это значение можно использовать в приложении для динамической настройки размера шрифта текстовых элементов в зависимости от размера экрана устройства и соотношения сторон.

export function actuatedNormalizeVertical(size) {
  const newSize = size * scaleVertical
  if (Platform.OS === 'ios') {
    return Math.round(PixelRatio.roundToNearestPixel(newSize))
  } else {
    return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 1
  }
}

Этот код определяет другую функцию actuatedNormalizeVertical, которая похожа на функцию actuatedNormalize, но регулирует размер шрифта на основе коэффициента вертикального масштабирования scaleVertical, рассчитанного на основе высоты экрана устройства.

Как и функция actuatedNormalize, эта функция принимает один аргумент size и вычисляет новое значение размера, умножая его на коэффициент масштабирования scaleVertical. Затем функция проверяет свойство Platform.OS, чтобы определить, работает ли приложение на устройстве iOS или Android.

Если приложение работает на устройстве iOS, значение newSize округляется до ближайшего пикселя с помощью методов Math.round() и PixelRatio.roundToNearestPixel(), как и в функции actuatedNormalize.

Если приложение запущено на устройстве Android, значение newSize также округляется до ближайшего пикселя, но затем вычитается дополнительный 1 пиксель, как и в функции actuatedNormalize.

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

export function isTab() {
  if (SCREEN_WIDTH > 550) {
    return true
  } else {
    return false
  }
}

Этот код определяет функцию isTab(), которая возвращает логическое значение в зависимости от ширины экрана устройства. Если ширина экрана больше 550 пикселей, функция возвращает true, иначе возвращает false.

Эту функцию можно использовать в приложении, чтобы определить, достаточно ли широкий экран устройства для отображения макета в стиле планшета или большего объема контента на экране. Используя эту функцию, приложение может настроить свой макет и отображение в зависимости от размера экрана устройства и оптимизировать взаимодействие с пользователем.

export function isScreenHeight770() {
  if (SCREEN_HEIGHT > 740 && SCREEN_HEIGHT < 760 ) {
    return true
  } else {
    return false
  }
}

Этот код определяет функцию isScreenHeight770(), которая возвращает логическое значение в зависимости от высоты экрана устройства. Если высота экрана больше 740 пикселей и меньше 760 пикселей, функция возвращает true, указывая, что высота экрана близка к 770 пикселям. В противном случае возвращается false.

Цель этой функции — определить, попадает ли высота экрана устройства в определенный диапазон, который эквивалентен высоте устройства iPhone 7 или iPhone 8.

Значения 740 и 760 — эталонные значения высоты экрана для iPhone 7 и iPhone 8 соответственно. Итак, эта функция проверяет, эквивалентна ли высота экрана устройства высоте iPhone 7 или iPhone 8.

👉 Итак, я создаю файл с именем PixelScaling.js в папке Constant и объединяю все коды в этом файле.

👉 И Наш Кодекс будет выглядеть так…

import { Dimensions, Platform, PixelRatio } from 'react-native';

const {
  width: SCREEN_WIDTH,
  height: SCREEN_HEIGHT,
} = Dimensions.get('window');

const scale = SCREEN_WIDTH / 375;

const scaleVertical = SCREEN_HEIGHT / 812;

export function actuatedNormalize(size) {
  const newSize = size * scale
  if (Platform.OS === 'ios') {
    return Math.round(PixelRatio.roundToNearestPixel(newSize))
  } else {
    return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 1
  }
}

export function actuatedNormalizeVertical(size) {
  const newSize = size * scaleVertical
  if (Platform.OS === 'ios') {
    return Math.round(PixelRatio.roundToNearestPixel(newSize))
  } else {
    return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 1
  }
}

export function isTab() {
  if (SCREEN_WIDTH > 550) {
    return true
  } else {
    return false
  }
}

export function isScreenHeight770() {
  if (SCREEN_HEIGHT > 740 && SCREEN_HEIGHT < 760 ) {
    return true
  } else {
    return false
  }
}

👉 Как этим пользоваться..???

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

Во-первых, мы должны импортировать этот файл в наш файл app.js. Затем мы устанавливаем стиль в нашем тексте, представлении, изображении или любом теге.

После этого мы используем actuatedNormalize для левого, правого, размера шрифта, ширины и т. д. actuatedNormalizeVertical для верхнего, нижнего, высоты и т. д. Используя ternary operator, мы используем istab() с actuatedNormalize и actuatedNormalizeVertical

import { actuatedNormalize, actuatedNormalizeVertical, isTab } from "./constants/PixelScaling";
...
...
...



const App = () => {
  return (
    <>
      ...
      ...
      // Your Code
      ...
      ...
    </>
  );
};



export default App;




const styles = StyleSheet.create({

// Without PixelScaling
  normal: {
    marginTop: 17,
    marginBottom: 17,
    paddingTop: 17,
    paddingBottom: 17,
    marginLeft: 17,
    marginRight: 17,
    paddingLeft: 17,
    paddingRight: 17,
    fontSize: 17,
    width: 17,
    height: 17,
  },

// using PixelScaling

  ForTopBottom: {
    marginTop: actuatedNormalizeVertical(17),
    marginBottom: actuatedNormalizeVertical(17),
    paddingTop: actuatedNormalizeVertical(17),
    paddingBottom: actuatedNormalizeVertical(17),
  },
  ForLeftRight: {
    marginLeft: actuatedNormalize(17),
    marginRight: actuatedNormalize(17),
    paddingLeft: actuatedNormalize(17),
    paddingRight: actuatedNormalize(17),
  },
  ForFonts: {
    fontSize: actuatedNormalize(17),
  },
  ForImage: {
    width: actuatedNormalize(17),
    height: actuatedNormalizeVertical(17),
  },
  ForTab: {
    marginTop: isTab() ? actuatedNormalizeVertical(29) : actuatedNormalizeVertical(17),
    marginBottom: isTab() ? actuatedNormalizeVertical(29) : actuatedNormalizeVertical(17),
    marginLeft: isTab() ? actuatedNormalize(29) : actuatedNormalize(17),
    marginRight: isTab() ? actuatedNormalize(29) : actuatedNormalize(17),
    paddingTop: isTab() ? actuatedNormalizeVertical(29) : actuatedNormalizeVertical(17),
    paddingBottom: isTab() ? actuatedNormalizeVertical(29) : actuatedNormalizeVertical(17),
    paddingLeft: isTab() ? actuatedNormalize(29) : actuatedNormalize(17),
    paddingRight: isTab() ? actuatedNormalize(29) : actuatedNormalize(17),
    fontSize: isTab() ? actuatedNormalize(29) : actuatedNormalize(17),
    width: isTab() ? actuatedNormalize(29) : actuatedNormalize(17),
    height: isTab() ? actuatedNormalize(29) : actuatedNormalize(17),
  }
});

Спасибо за чтение ... Если вам это нравится и легко понять. Подпишитесь и лайкните этот пост…

React Native Responsive Scaling/Шрифт/Размеры/Пиксели

👉 Как этим пользоваться..???

Вопросы по теме