الارتفاع والعرض في React Native

الارتفاع والعرض

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

الأبعاد الثابتة

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

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

export default class FixedDimensionsBasics extends Component {
  render() {
    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>
    );
  }
}

// تخطّ هذا السطر إن كنت تستعمل أداة 
// Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);

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

أبعاد Flex

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

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

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

export default class FlexDimensionsBasics extends Component {
  render() {
    return (
      <View style={{flex: 1}}>
        <View style={{flex: 1, backgroundColor: 'powderblue'}} />
        <View style={{flex: 2, backgroundColor: 'skyblue'}} />
        <View style={{flex: 3, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
}

// تخطّ هذا السطر إن كنت تستعمل أداة 
// Create React Native App

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

مصادر

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