React Native useWindowDimensions: responsive ตามพื้นที่จริง ไม่ยึดขนาดตอนเปิดแอป

มือถือไม่ได้มีขนาดคงที่ตลอด session อีกแล้ว ผู้ใช้หมุนจอ เปิด split screen พับอุปกรณ์ หรือเพิ่มขนาดตัวอักษรได้ ถ้าอ่าน Dimensions.get("window") ครั้งเดียวตอน module load layout จะจำภาพเก่า useWindowDimensions subscribe การเปลี่ยนแปลงให้ component และคืนทั้ง width, height, scale กับ fontScale โดยไม่ต้องเก็บ state ซ้ำครับ

ตัวอย่างนี้เป็นโค้ด React Native ที่ตรวจ API/import แบบ static เท่านั้น เพราะรอบ automation ไม่มี simulator หรือ native SDK

import React from "react";
import { Text, useWindowDimensions, View } from "react-native";

export function SummaryCards({ labels }: { labels: string[] }) {
  const { width, fontScale } = useWindowDimensions();
  const columns = width >= 720 && fontScale <= 1.3 ? 3 : 1;

  return (
    <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 12 }}>
      {labels.map((label) => (
        <View
          key={label}
          style={{ flexBasis: columns === 3 ? "31%" : "100%", padding: 16 }}
        >
          <Text>{label}</Text>
        </View>
      ))}
    </View>
  );
}

breakpoint เป็นนโยบายของเนื้อหา ไม่ใช่รายชื่อรุ่นโทรศัพท์ ควรตัดสินจากพื้นที่ที่ component ต้องใช้และทดสอบทั้งจอแคบ ตัวอักษรใหญ่ และ landscape อย่าล็อกความสูงตามสัดส่วนเดิมจนข้อความถูกตัด และอย่าใช้ fontScale เพื่อลดตัวอักษรกลับ เพราะเท่ากับลบการตั้งค่า accessibility ของผู้ใช้

Recap

อ่าน dimension ภายใน component ด้วย hook
เลือก breakpoint จากพื้นที่เนื้อหา ไม่ใช่ชื่ออุปกรณ์
ทดสอบ split screen, rotation และตัวอักษรใหญ่
ปล่อยให้ข้อความขยายและ layout reflow แทนการตัด

Recap

เลือกการใช้คุกกี้วิเคราะห์