تكرار السؤال: …
الإجابة المختصرة
باستخدام useWindowDimensions لمراقبة تغييرات الحجم وتدوير الشاشة، مقترنة بنسب Flexbox المئوية والمكتبات المساعدة لحساب مقاييس متناسبة (Scaling utilities).
الشرح
تختلف مقاسات الشاشات من هواتف صغيرة 4.7 إنش إلى أجهزة تابلت 12.9 إنش. يوفر useWindowDimensions قراءات فورية لـ width و height ويتحدث تلقائياً عند تدوير الجهاز. يتم استخدام نقاط توقف (Breakpoints) لتحديد هل الجهاز هاتف أم لوحي وتغيير اتجاه العرض أو عدد الأعمدة في القوائم تبعاً لذلك.
مثال بالكود
import { useWindowDimensions, View, StyleSheet } from 'react-native';
function ResponsiveContainer({ children }: { children: React.ReactNode }) {
const { width } = useWindowDimensions();
const isTablet = width >= 768;
return (
<View style={[styles.base, isTablet ? styles.tabletLayout : styles.phoneLayout]}>
{children}
</View>
);
}أخطاء شائعة
- استخدام Dimensions.get("window") الثابت خارج المكونات مما يمنع تحديث التخطيط عند تدوير الهاتف (Orientation Change) أو في وضع الشاشات المقسمة.