الارتفاع والعرض في React Native
الارتفاع والعرض
يحدد ارتفاع وعرض المكوّن حجمَه على الشاشة.
الأبعاد الثابتة (Fixed Dimensions)
أبسطُ طريقة لضبط أبعاد مكوّنٍ هي بإضافة عرضٍ 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
AppRegistry.registerComponent('AwesomeProject', () => JustifyContentBasics);
بعد تعلّمك كيفيّة التحكم في حجم المكوّن، انتقل إلى الخطوة التالية وتعلّم كيفيّة وضعه على الشاشة.