PixelRatio¶

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

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

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

1
2
3
4
5
6
7
8

const 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 (1-го поколения) или 828×1792 для iPhone 11. iOS пытается максимально точно соответствовать пользовательскому значению, распределяя один исходный пиксель на несколько, чтобы обмануть глаз. Недостатком этой техники является то, что результирующий элемент выглядит размытым.

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

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

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

Пример¶

Методы¶

get()¶

1

static get(): number;

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

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

getFontScale()¶

1

static getFontScale(): number;

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

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

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

getPixelSizeForLayoutSize()¶

1

static getPixelSizeForLayoutSize(layoutSize: number): number;

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

Гарантированно возвращает целое число.

roundToNearestPixel()¶

1

static roundToNearestPixel(layoutSize: number): number;

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

Комментарии