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

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世代) の640×1136やiPhone 11の828×1792のように固定されたピクセル数しか持ちません。iOSは、目を欺くために1つの元のピクセルを複数のピクセルに分散させることで、ユーザーの指定値に可能な限り忠実であろうとします。この技術の欠点は、結果として要素がぼやけて見えることです。

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

この丸め処理を行うタイミングには注意が必要です。丸め誤差が蓄積されるため、丸められた値と丸められていない値を同時に扱うべきではありません。たった1つの丸め誤差でも致命的であり、1ピクセルの境界線が消えたり、2倍の大きさになったりする可能性があります。

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

例​

リファレンス

Methods​

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