React Native: достижение скорости отклика за счет масштабируемых шрифтов, размеров и пикселей

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

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

Теперь давайте посмотрим, как мы можем сделать это на стороне кода:

Следующий фрагмент кода импортирует три модуля из библиотеки React Native: Dimensions, Platform и PixelRatio.

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

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

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

import { Dimensions } from 'react-native';

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

console.log('Screen width:', SCREEN_WIDTH);
console.log('Screen height:', SCREEN_HEIGHT);

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

Платформа. Этот модуль в React Native предлагает удобный способ определить операционную систему устройства, на котором работает ваше приложение. Это позволяет настраивать поведение или внешний вид вашего приложения в зависимости от конкретной платформы, например Android, iOS или других платформ.

Чтобы определить платформу, вы можете использовать свойство Platform.OS. Вот пример:

import { Platform } from 'react-native';

if (Platform.OS === 'android') {
  // Perform Android-specific logic
  console.log('Running on Android');
} else if (Platform.OS === 'ios') {
  // Perform iOS-specific logic
  console.log('Running on iOS');
} else {
  // Perform logic for other platforms
  console.log('Running on some other platform');
}

В приведенном выше коде свойство Platform.OS возвращает строку, указывающую текущую операционную систему. Сравнивая это значение с 'android', 'ios' или другими конкретными платформами, вы можете условно выполнить код для конкретной платформы или применить стили для конкретной платформы в своем приложении React Native.

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

PixelRatio: этот модуль в React Native служит утилитой для преобразования значений пикселей между аппаратно-независимыми единицами пикселей (dp) и физическими единицами пикселей (px) экрана. Эта функция особенно полезна при работе с различной плотностью и разрешением экрана на разных устройствах.

Для выполнения преобразований между dp и px вы можете использовать методы, предоставляемые модулем PixelRatio. Вот пример:

import { PixelRatio } from 'react-native';

const pixelRatio = PixelRatio.get();
console.log('Pixel ratio:', pixelRatio);

const dpValue = 16;
const pxValue = PixelRatio.getPixelSizeForLayoutSize(dpValue);
console.log('Converted pixel value:', pxValue);

const roundedDpValue = PixelRatio.roundToNearestPixel(dpValue);
console.log('Rounded dp value:', roundedDpValue);

В приведенном выше коде PixelRatio.get() возвращает текущее соотношение пикселей устройства, которое представляет собой отношение физических пикселей к независимым от устройства пикселям. Эта информация может быть полезна для создания макетов с точностью до пикселя или работы с экранами различной плотности.

PixelRatio.getPixelSizeForLayoutSize(dpValue) преобразует заданное значение dp в его эквивалент в пикселях (px) с учетом соотношения пикселей устройства.

PixelRatio.roundToNearestPixel(dpValue) округляет заданное значение dp до ближайшего целого значения пикселя, что может быть полезно для обеспечения согласованного отображения элементов на разных устройствах.

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

Эти 3 модуля эффективно управляют размерами экрана и соотношениями сторон в приложениях React Native.

const scale = SCREEN_WIDTH / 375

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

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

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

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 getNormalizedSizeWithPlatformOffset(size) {
  const newSize = size * scale
  if (Platform.OS === 'ios') {
    return Math.round(PixelRatio.roundToNearestPixel(newSize))
  } else {
    return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 1
  }
}

1. Он принимает параметр size в качестве входных данных, который представляет собой начальный размер для нормализации.
2. Переменной newSize присваивается значение size, умноженное на коэффициент scale. Коэффициент scale ранее рассчитывался на основе ширины экрана устройства.
3. Затем функция проверяет платформу, на которой она работает. Если платформа iOS (Platform.OS === 'ios'), выполняются следующие шаги:

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

б. Округленное значение возвращается как нормализованный размер.

4. Если платформа не iOS (т.е. предполагается, что это Android или другая платформа), он выполняет следующие шаги:

а. Он использует метод PixelRatio.roundToNearestPixel() для округления newSize до ближайшего значения в пикселях.

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

в. Результирующее значение возвращается как нормализованный размер.

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

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

1. Функция принимает в качестве входных данных параметр size, который представляет начальный размер по вертикали, подлежащий нормализации.
2. Переменной newSize присваивается значение size, умноженное на коэффициент scaleVertical.
3. Затем функция проверяет платформу, на которой она работает. Если платформа iOS (Platform.OS === 'ios'), выполняются следующие шаги:

а. Он использует метод PixelRatio.roundToNearestPixel() для округления newSize до ближайшего значения в пикселях.

б. Округленное значение возвращается как нормализованный размер по вертикали.

4. Если платформа не iOS (т.е. предполагается, что это Android или другая платформа), он выполняет следующие шаги:

а. Он использует метод PixelRatio.roundToNearestPixel() для округления newSize до ближайшего значения в пикселях.

б. Он вычитает 1 из округленного значения.

в. Результирующее значение возвращается как нормализованный размер по вертикали.

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

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

Функция isTablet — это экспортированная функция JavaScript, которая используется для определения того, соответствует ли ширина экрана текущего устройства планшету.

Внутри функции есть оператор if-else, который проверяет, больше ли значение переменной SCREEN_WIDTH, чем 550.

• Если условие истинно (то есть ширина экрана больше 550), функция возвращает true, указывая, что устройство считается планшетом.
• Если условие ложно (то есть ширина экрана меньше или равна 550), функция возвращает 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. Эталонные значения высоты экрана для iPhone 7 и iPhone 8 составляют 740 и 760 пикселей соответственно. Таким образом, функция помогает определить, соответствует ли высота экрана устройства высоте iPhone 7 или iPhone 8.

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

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

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 getNormalizedSizeWithPlatformOffset(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 getNormalizedVerticalSizeWithPlatformOffset(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 isTablet() {
  if (SCREEN_WIDTH > 550) {
    return true
  } else {
    return false
  }
}

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



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



export default App;




const styles = StyleSheet.create({

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

// using Scaling

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

Спасибо за чтение…