حجم المكونات وأبعادها في React Native

يحدد ارتفاع وعرض المكوّن حجمَه على الشاشة.

الأبعاد الثابتة (Fixed Dimensions)

أبسطُ طريقة لضبط أبعاد مكوّنٍ هي بإضافة عرضٍ ‎width‎ وارتفاعٍ ‎height‎ ثابتين إلى النمط ‎style‎. جميع الأبعاد في React Native لا تعتمد على الوحدات (unitless)، وتمثّل بكسلات مستقلةً عن الكثافة (density-independent pixels)

انظر المثال التالي (تجربة حية):

import React from 'react';
import { View } from 'react-native';

const FixedDimensionsBasics = () => {
    return (
      <View>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
        <View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />
      </View>
    );
};

export default FixedDimensionsBasics;

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

ملاحظة: لا توجد طريقة موحدة للتحويل من النقط إلى وحدات فيزيائية للقياس، وهذا يعني أن المكونات ثابتة الأبعاد قد لا تملك الأبعاد الفيزيائية نفسها على مختلف أحجمة الأجهزة والشاشات، ولكن على أي حال هذا الاختلاف غير ملحوظ في مختلف الحالات.

أبعاد Flex

تستعمل الخاصيّة ‎flex‎ في نمط المكوّن لتوسيعه وتقليصه ديناميكيًا حسب المساحة المتوفرة، عادةً تستَخدم ‎flex: 1‎ والتي تُخبر المكوّن بملء المساحة المتاحة كلها بالتّساوي مع المكونات الأخرى التي تشترك في المكوّن الأب نفسه. كلما زادت قيمة ‎flex‎ ارتفعت نسبة المساحة التي سيأخذها المكوّن مقارنة بأشقّائه من المكوّنات ذات الأب نفسه.

ملاحظة: يمكن للمكوّن أن يتوسع لملء المساحة المتاحة فقط إذا كان المكّون الأب ذا أبعادٍ أكبر من ‎0‎. إذا لم يكن للمكوّن الأب عرضٌ ‎width‎ أو ارتفاعٌ ‎height‎ ثابتان أو خاصيّةُ ‎flex‎ فإن أبعاده ستساوي ‎،0‎ ولن تكون المكوّنات الأبناء التي تمتلك خاصيّة ‎flex‎مرئيّةً.

انظر المثال التالي (تجربة حية):

import React from 'react';
import { View } from 'react-native';

const FlexDimensionsBasics = () => {
    return (
      // Try removing the `flex: 1` on the parent View.
      // The parent will not have dimensions, so the children can't expand.
      // What if you add `height: 300` instead of `flex: 1`?
      <View style={{flex: 1}}>
        <View style={{flex: 1, backgroundColor: 'powderblue'}} />
        <View style={{flex: 2, backgroundColor: 'skyblue'}} />
        <View style={{flex: 3, backgroundColor: 'steelblue'}} />
      </View>
    );
};

export default FlexDimensionsBasics;

بعد تعلّمك كيفيّة التحكم في حجم المكوّن انتقل إلى الخطوة التالية وتعلّم كيفيّة وضعه على الشاشة.

مصادر

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