密度非依存ピクセル

​

密度非依存ピクセル（DIP）について

physical pixels = dp × scale factor
dp = physical pixels ÷ scale factor

​

単位変更の対象範囲

• Vegaは最終的な描画キャンバスとダメージ領域をスケーリングします。
• ウィンドウのサイズと位置はグラフィックス境界を越える際に物理ピクセルになりますが、アプリコード内ではdpのままです。
• ポインター、タッチ、リサイズ、ウィンドウ位置、オクルージョンの各イベントはdpとしてReact Nativeに返されます。
• 子ウィンドウ、ポップアップ、モーダル、テクスチャキャッシュされたレイヤー、仮想サーフェスは、同じスケールを使用します。
• DimensionsとuseWindowDimensions()は論理寸法を返します。PixelRatio.get()は、物理ピクセルとdpの比率を返します。

​

単位変更の対象ではないもの

• ビットマップデータ。dpレンダリングはビットマップデータをスケーリングしたり、画像メタデータを変更したりしません。画像デコーダー、ビットマップ、ピクスマップ、テクスチャでは、引き続き物理ピクセル単位の寸法が使用されます。
• フォントのスケーリング。dpレンダリングは、アクセシビリティのフォントスケーリングに代わるものではありません。ユーザーが選択したテキストサイズについては、React NativeのテキストAPIとfontScaleを引き続き使用してください。

​

PixelRatioとDeviceInfoターボモジュール

​

Vegaで密度非依存ピクセルを使用する理由

​

アプリでの変更

​

ピクセル調整値の変換

logical value = legacy physical-pixel value ÷ baseline scale factor

// ❌ 更新前（RN 0.72）- 物理的な出力に合わせて調整された値
const legacyStyles = StyleSheet.create({
  card: {
    width: 320,
    height: 180,
    borderRadius: 12,
  },
});

//✅ 更新後（RN 0.83）- 物理サイズは同じで、dpで表されます
const styles = StyleSheet.create({
  card: {
    width: 160,
    height: 90,
    borderRadius: 6,
  },
});

​

固定画面寸法の置き換え

// ❌ 更新前（RN 0.72）
const screenWidth = 1920;
const panelWidth = screenWidth / 3;

// ✅ 更新後（RN 0.83）
function Panel() {
  const {width} = useWindowDimensions();
  return <View style={{width: width / 3, height: '100%'}} />;
}

​

論理入力座標の使用

const {pageX: x, pageY: y} = event.nativeEvent;

​

dp単位でのカスタムネイティブインターフェイスの保持

NativeCardModule.setBounds({x, y, width, height}); // すべての値はdpです。

​

画像の処理

• <Image style={{width, height}}>ではdpが使用されます。
• ソースビットマップの寸法、デコード後の画像寸法、行のバイト数、テクスチャの寸法には、物理ピクセルが使用されます。
• React Nativeが論理的なデコードサイズを指定した場合、Vegaの画像パイプラインはデコード前にその値にアクティブなスケール係数を乗算します。独自のコードでは、<Image>スタイルや目的のレイアウトサイズに対して乗算処理を行わないでください。
• レンダリングされるdpサイズに対して、ソース画像には十分な物理ピクセルが必要になります。たとえば、320×180dpで描画され、スケール係数が2の場合、アップスケーリングを避けるには少なくとも640×360のソースピクセルが必要になります。

​

ローカルアセット

assets/
  icon.png
  icon@2x.png
  icon@3x.png

<Image source={require('./assets/icon.png')} style={{width: 48, height: 48}} />

​

移行チェックリスト

1. アプリをRN 0.83にアップグレードし、新しいデフォルト動作と重複するRN 0.72のdp実験用フラグをすべて削除します。
2. アプリ内の数値による長さ指定、1920や1080といった固定キャンバス定数、座標変換用のヘルパーをすべて確認します。
3. 物理ピクセルとして調整されていた値は、logicalValue = legacyPixelValue ÷ baselineScaleFactorの式で論理値に変換します。密度非依存のUX仕様に由来する値は、変更せずにそのまま残してください。
4. RN 0.83によって報告されるポインター、ジェスチャー、スクロール、リサイズ、ウィンドウの座標は、dpとして扱います。
5. React-Nativeからネイティブへのカスタムジオメトリコントラクトをdpに変更し、ドキュメント化されたピクセルAPIでのみピクセル変換を維持します。
6. 固定画面寸法をFlexbox、パーセンテージ、Dimensions、useWindowDimensions()を使用して置き換えます。
7. ローカルのラスター密度バリアントを追加し、各画像が論理サイズで描画される際に十分な物理ピクセルを持っていることを確認します。
8. メインウィンドウ、モーダル、ポップアップ、アラート、子ウィンドウ、スクロール、ジェスチャー、フォーカス、アクセシビリティ、ローカリゼーション、右から左へのレイアウトを、サポートされている各密度でテストします。

​

関連トピック

• 手順4：コードを移行する
• React Native 0.83へのアプリの移行
• PixelRatio
• useWindowDimensions
• レイアウトの測定（英語のみ）
• React Native 0.83への移行に関する問題のトラブルシューティング

​

外部リソース

• React Native PixelRatio（英語のみ）
• React Native Images（英語のみ）