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

PixelRatio

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

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

高ピクセル密度のデバイスを使用している場合は、より高解像度の画像を取得する必要があります。経験則として、表示する画像のサイズにピクセル比を掛けます。

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世代）は640×1136、iPhone 11は828×1792です。 iOSは、元の1ピクセルを複数のピクセルに広げて視覚的にごまかすことで、ユーザー値にできるだけ忠実であろうとします。この手法の欠点は、結果の要素がぼやけて見えることです。

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

この丸め処理をいつ行うかには注意する必要があります。丸め誤差が累積するため、丸められた値と丸められていない値を同時に使用することは避けるべきです。1ピクセルの境界線が消えたり、2倍の大きさになったりする可能性があるため、1つの丸め誤差でさえ致命的です。

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

例​

リファレンス

メソッド​

get()​

static get(): number;

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

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ピクセルに対応します。