الارتفاع والعرض في 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 الرسمي.