الدالة useWindowDimensions في React Native

يحدّث الخطّاف useWindowDimensions تلقائيًا قيم العرض width والارتفاع height عندما يتغير حجم الشاشة.

import { useWindowDimensions } from 'react-native';

يمكنك الحصول على عرض وارتفاع نافذة تطبيقك كما يلي:

const windowWidth = useWindowDimensions().width;
const windowHeight = useWindowDimensions().height;

مثال

إليك المثال التالي (تجربة حية):

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

const App = () => {
  const window = useWindowDimensions();
  return (
    <View style={styles.container}>
      <Text>{`Window Dimensions: height - ${window.height}, width - ${window.width}`}</Text>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  }
});

export default App;

يهدف الخطّاف useDimensions من مجتمع الخطّافات React native hooks إلى تسهيل معالجة التغييرات في حجم الشاشة أو النافذة.

تأتي الأبعاد React Native Responsive Dimensions أيضًا مع خطافات مستجيبة responsive مع الشاشات.

الخاصيات

fontScale

useWindowDimensions().fontScale;

تمثّل مقياس الخط المستخدم حاليًا، إذ تسمح بعض أنظمة التشغيل للمستخدمين بتكبير أو تصغير حجم الخط من أجل القراءة المريحة، حيث ستتيح لك هذه الخاصية معرفة المُستخدَم حاليًا.

height

useWindowDimensions().height;

تعطي هذه الخاصية ارتفاع النافذة أو الشاشة التي يشغلها تطبيقك مقدرًا بالبكسل.

scale

useWindowDimensions().scale;

معدّل بكسلات الجهاز الذي يعمل عليه تطبيقك.

تشير القيمة 1 إلى PPI / DPI بقيمة 96 (76 في بعض المنصات)، وتشير القيمة 2 إلى عرض Retina أو DPI عالي الجودة.

width

useWindowDimensions().width;

تمثّل هذه الخاصية عرض النافذة أو الشاشة التي يشغلها تطبيقك مقدّرًا بالبكسل.

مصادر

• صفحة useWindowDimensions في توثيق React Native الرسمي.