الفرق بين المراجعتين ل"ReactNative/dimensions"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
(مراجعة)
ط
 
سطر 201: سطر 201:
 
* [https://reactnative.dev/docs/dimensions صفحة Dimensions في توثيق React Native الرسمي.]
 
* [https://reactnative.dev/docs/dimensions صفحة Dimensions في توثيق React Native الرسمي.]
 
[[تصنيف:ReactNative]]
 
[[تصنيف:ReactNative]]
 +
[[تصنيف:React Native API]]

المراجعة الحالية بتاريخ 14:12، 9 أكتوبر 2021

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

import { Dimensions } from 'react-native';

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

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

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

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

مثال

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;
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

مصادر