الواجهة Dimensions في React Native

يفضل استعمال الواجهة useWindowDimensions مع مكونات React خلافًا لهذه الواجهة التي تتحدث كلما تحدث أبعاد النافذة، وهذا مناسب لبعض الأنماط في React.

import { Dimensions } from 'react-native';

يمكنك مثلًا جلب أبعاد النافذة، طولها وعرضها بالشكل التالي:

const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

صحيح أن الأبعاد متاحة مباشرةً ولكن انتبه فقد تتغير (نتيجة قلب الجهاز مثلًا أو طيه إن كان قابلًا للطي)، لذا يجب على أي منطق عرض أو أنماط تنسيق تعتمد على هذه الثوابت أن تستدعي هذه الدوال قبل كل عملية عرض (تصيير)، بدلًا من تخزين القيم (مثل استعمال أنماط التنسيق السطرية inline styles بدلًا من ضبط قيمة في الكائن StyleSheet).

إن كنت تستهدف جهازًا قابلًا للطي أو جهازًا يمكن تغيير حجم شاشته أو حجم شاشة التطبيق، فيمكنك استخدام مستمع الحدث المتاح في الواجهة Dimensions كما موضح في المثال الآتي.

مثال

• استخدام مكون دالة (Function Component)

import React, { useState, useEffect } from "react";
import { View, StyleSheet, Text, Dimensions } from "react-native";

const window = Dimensions.get("window");
const screen = Dimensions.get("screen");

const App = () => {
  const [dimensions, setDimensions] = useState({ window, screen });

  useEffect(() => {
    const subscription = Dimensions.addEventListener(
      "change",
      ({ window, screen }) => {
        setDimensions({ window, screen });
      }
    );
    return () => subscription?.remove();
  });

  return (
    <View style={styles.container}>
      <Text style={styles.header}>Window Dimensions</Text>
      {Object.entries(dimensions.window).map(([key, value]) => (
        <Text>{key} - {value}</Text>
      ))}
      <Text style={styles.header}>Screen Dimensions</Text>
      {Object.entries(dimensions.screen).map(([key, value]) => (
        <Text>{key} - {value}</Text>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  header: {
    fontSize: 16,
    marginVertical: 10
  }
});

export default App;

• استخدام مكون صنف (Class Component)

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

const window = Dimensions.get("window");
const screen = Dimensions.get("screen");

class App extends Component {
  state = {
    dimensions: {
      window,
      screen
    }
  };

  onChange = ({ window, screen }) => {
    this.setState({ dimensions: { window, screen } });
  };

  componentDidMount() {
    this.dimensionsSubscription = Dimensions.addEventListener("change", this.onChange);
  }

  componentWillUnmount() {
    this.dimensionsSubscription?.remove();
  }

  render() {
    const { dimensions: { window, screen } } = this.state;

    return (
      <View style={styles.container}>
        <Text style={styles.header}>Window Dimensions</Text>
        {Object.entries(window).map(([key, value]) => (
          <Text>{key} - {value}</Text>
        ))}
        <Text style={styles.header}>Screen Dimensions</Text>
        {Object.entries(screen).map(([key, value]) => (
          <Text>{key} - {value}</Text>
        ))}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  header: {
    fontSize: 16,
    marginVertical: 10
  }
});

export default App;

التوابع

‎‎addEventListener()‎‎

static addEventListener(type, handler)

أضف معالج أحداث. الأحداث المدعومة:

• ‎‎change‎: يُطلَق عند تغيّر خاصيةٍ داخل كائن ‎‎Dimensions‎‎. المعامل المُمرَّر لمعالج الحدث هو كائن من النوع DimensionsValue.

‎‎get()‎‎

static get(dim)

يعيَّن الأبعاد الأولية قبل استدعاء ‎‎runApplication‎‎، لذا من المفترض أن تكون متوفرة قبل تشغيل أي متطلبات (‎‎require‎‎) أخرى، ولكنها قد تُحدَّث لاحقًا. يعيد التابع قيمةُ البُعد.

إليك مثال:

var {height, width} = Dimensions.get('window');

المعاملات التي يأخذها التابع:

• ‎dim‎‎ (سلسلة نصيّة مطلوبة): اسم البعد كما هو محدد عند استدعاء ‎‎set‎‎.

ملاحظة: في Android، سيستبعد البُعد ‎‎window‎‎ الحجم المُستخدَم من طرف شريط الحالة (إن لم يكن شفافًا) وشريط التنقل السفلي.

‎‎removeEventListener()‎‎

static removeEventListener(type, handler)

إزالة معالج الأحداث.

تنبيه: هذا التابع مهمل، واستعمل التابع remove()‎ مع قيمة اشتراك الحدث (event subscription) التي يعيدها التابع addEventListener()‎.

‎‎set()‎‎

static set(dims)

يجب أن يُستدعى هذا فقط من طرف الشيفرة الأصيلة عن طريق إرسال الحدث ‎‎didUpdateDimensions‎‎.

المعاملات:

• ‎‎dims‎‎ (كائن مطلوب): كائنٌ مفاتيحه نصيّة (string-keyed) يحتوي الأبعاد المراد ضبطها.

تعريفات النوع

DimensionsValue

كائن ذو الخاصيتين ‎‎window‎‎، و‎‎screen‎‎ والتي تكون قيمتاهما نفسهما القيمتان المُعادتان من استدعاء كل من ‎‎Dimensions.get('window')‎‎، و‎‎Dimensions.get('screen')‎‎ على التوالي.

الخاصيات:

الاسم	النوع	الوصف
window‎‎	DisplayMetrics	حجم نافذة التطبيق الظاهرة.
‎‎screen‎‎	DisplayMetrics	حجم نافذة الجهاز.

DisplayMetrics

كائن له الخاصيات التالية:

الاسم	النوع
width	عدد number
height	عدد number
scale	عدد number
fontScale	عدد number

مصادر

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