メインコンテンツへスキップ

PixelRatio

PixelRatio は、デバイスのピクセル密度とフォントスケールへのアクセスを提供します。

適切なサイズの画像を取得する​

高ピクセル密度のデバイスでは、より高解像度の画像を取得するべきです。経験則として、表示する画像のサイズにピクセル比を掛けるのが良い方法です。

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

ピクセルグリッドへのスナップ​

iOSでは、要素の位置や寸法を任意の精度で指定できます。例えば 29.674825 のようにです。しかし、最終的に物理的なディスプレイは固定数のピクセルしか持ちません。例えば、iPhone SE (第1世代) では 640x1136、iPhone 11 では 828x1792 といった具合です。iOS は、元の1ピクセルを複数のピクセルに広げて目を欺くことで、ユーザーが指定した値にできるだけ忠実であろうとします。このテクニックの欠点は、結果として要素がぼやけて見えることです。

実際には、開発者はこの機能を望んでおらず、ぼやけた要素を避けるために手動で丸め処理を行うことで回避する必要があることがわかりました。React Nativeでは、すべてのピクセルを自動的に丸めています。

この丸め処理をいつ行うかについては注意が必要です。丸められた値と丸められていない値を同時に扱うことは決してしないでください。丸め誤差が蓄積されてしまうからです。たった1つの丸め誤差でも、1ピクセルの境界線が消えたり、2倍の太さになったりする可能性があるため、致命的です。

React Nativeでは、JavaScript内およびレイアウトエンジン内のすべてが任意の精度の数値で動作します。メインスレッドでネイティブ要素の位置と寸法を設定するときにのみ、丸め処理が行われます。また、丸め誤差の蓄積を避けるため、丸め処理は親要素ではなくルート要素を基準に行われます。

使用例​

リファレンス

メソッド​

get()​

tsx
static get(): number;

デバイスのピクセル密度を返します。いくつかの例：

getFontScale()​

tsx
static getFontScale(): number;

フォントサイズのスケーリング係数を返します。これは絶対的なフォントサイズを計算するために使用される比率であり、それに大きく依存する要素はこの値を使用して計算を行うべきです。

  • Androidでは、この値は 設定 > ディスプレイ > フォントサイズ で設定されたユーザーの好みを反映します。
  • iOSでは、この値は 設定 > 画面表示と明るさ > テキストサイズ で設定されたユーザーの好みを反映します。この値は 設定 > アクセシビリティ > 画面表示とテキストサイズ > さらに大きな文字 でも更新できます。

フォントスケールが設定されていない場合、これはデバイスのピクセル比を返します。

getPixelSizeForLayoutSize()​

tsx
static getPixelSizeForLayoutSize(layoutSize: number): number;

レイアウトサイズ（dp）をピクセルサイズ（px）に変換します。

整数値を返すことが保証されています。

roundToNearestPixel()​

tsx
static roundToNearestPixel(layoutSize: number): number;

レイアウトサイズ（dp）を、整数のピクセル数に対応する最も近いレイアウトサイズに丸めます。例えば、PixelRatioが3のデバイスでは、PixelRatio.roundToNearestPixel(8.4) = 8.33 となり、これは正確に (8.33 * 3) = 25 ピクセルに対応します。