PixelRatio

PixelRatio предоставляет доступ к плотности пикселей устройства и масштабу шрифтов.

Получение изображения правильного размера

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

var image = getImage({
  width: PixelRatio.getPixelSizeForLayoutSize(200),
  height: PixelRatio.getPixelSizeForLayoutSize(100)
});
<Image source={image} style={{ width: 200, height: 100 }} />;

Привязка к сетке пикселей

В iOS вы можете указывать позиции и размеры элементов с произвольной точностью, например, 29.674825. Однако в конечном счете физический дисплей имеет фиксированное количество пикселей, например, 640×1136 для iPhone SE (первого поколения) или 828×1792 для iPhone 11. iOS старается максимально точно соответствовать заданным значениям пользователя, распределяя один исходный пиксель на несколько, чтобы обмануть глаз. Недостатком этого метода является то, что результат может выглядеть размытым.

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

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

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

Справочник

Методы

get()

static get()

Возвращает плотность пикселей устройства. Примеры:

• PixelRatio.get() === 1
  • Устройства Android mdpi
• PixelRatio.get() === 1.5
  • Устройства Android hdpi
• PixelRatio.get() === 2
  • iPhone SE, 6S, 7, 8
  • iPhone XR
  • iPhone 11
  • Устройства Android xhdpi
• PixelRatio.get() === 3
  • iPhone 6S Plus, 7 Plus, 8 Plus
  • iPhone X, XS, XS Max
  • iPhone 11 Pro, 11 Pro Max
  • Pixel, Pixel 2
  • Устройства Android xxhdpi
• PixelRatio.get() === 3.5
  • Nexus 6
  • Pixel XL, Pixel 2 XL
  • Устройства Android xxxhdpi

getFontScale()

static getFontScale(): number

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

• На Android значение отражает пользовательские настройки в Настройки > Дисплей > Размер шрифта
• На iOS значение отражает пользовательские настройки в Настройки > Дисплей и яркость > Размер текста, значение также может быть обновлено в Настройки > Доступность > Дисплей и размер текста > Более крупный текст

Если масштаб шрифта не установлен, возвращается коэффициент плотности пикселей устройства.

getPixelSizeForLayoutSize()

static getPixelSizeForLayoutSize(layoutSize: number): number

Преобразует размер макета (dp) в размер в пикселях (px).

Гарантируется возврат целочисленного значения.

roundToNearestPixel()

static roundToNearestPixel(layoutSize: number): number

Округляет размер макета (dp) до ближайшего размера макета, соответствующего целому числу пикселей. Например, на устройстве с PixelRatio 3, PixelRatio.roundToNearestPixel(8.4) = 8.33, что соответствует ровно (8.33 * 3) = 25 пикселям.