الفرق بين المراجعتين ل"ReactNative/height and width"

مراجعة 18:50، 5 مارس 2021

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

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

الأبعاد الثابتة (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 الرسمي.

@@ سطر 7: / سطر 7: @@
 أبسطُ طريقة لضبط أبعاد مكوّنٍ هي بإضافة عرضٍ ‎<code>width</code>‎ وارتفاعٍ ‎<code>height</code>‎ ثابتين إلى النمط ‎<code>style</code>‎. جميع الأبعاد في React Native لاوحداتيّة (unitless)، وتمثّل وحدات بكسل مستقلة عن الكثافة  (density-independent pixels):
 <syntaxhighlight lang="javascript">
-import React, { Component } from 'react';
+import React from 'react';
-import { AppRegistry, View } from 'react-native';
+import { View } from 'react-native';
-export default class FixedDimensionsBasics extends Component {
+const FixedDimensionsBasics = () => {
-  render() {
      return (
        <View>
@@ سطر 19: / سطر 18: @@
        </View>
      );
-  }
+};
-}
-// تخطّ هذا السطر إن كنت تستعمل أداة
+export default FixedDimensionsBasics;
-// Create React Native App
-AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);
 </syntaxhighlight>
-من الشّائع ضبط الأبعاد بهذه الطريقة للمكوّنات التي يجب أن تظهر دائمًا بنفس الحجم تمامًا بغضّ النظر عن أبعاد الشّاشة.
+من الشّائع ضبط الأبعاد بهذه الطريقة للمكوّنات التي يجب تصييرها دائمًا بنفس الحجم تمامًا بغضّ النظر عن أبعاد الشّاشة.
 ==أبعاد Flex==
-اِستعمل الخاصيّة ‎<code>flex</code>‎ في نمط المكوّن لتوسيع المكوّن وتقليصه ديناميكيًا حسب المساحة المتوفرة. عادةً ما ستَستَخدِم ‎<code>flex: 1</code>‎، والتي تُخبر المكوّن بملء كل المساحة المتاحة بالتّساوي مع المكونات الأخرى التي تشترك في نفس المكوّن الأب. كلما زادت قيمة ‎<code>flex</code>‎، كلما ارتفعت نسبة المساحة التي سيأخذها المكوّن مقارنة بأشقّائه من المكوّنات ذات نفس الأب.
+اِستعمل الخاصيّة ‎<code>flex</code>‎ في نمط المكوّن لتوسيع المكوّن وتقليصه ديناميكيًا حسب المساحة المتوفرة. عادةً ما ستَستَخدِم ‎<code>flex: 1</code>‎، والتي تُخبر المكوّن بملء كل المساحة المتاحة بالتّساوي مع المكونات الأخرى التي تشترك في نفس المكوّن الأب. كلما زادت قيمة ‎<code>flex</code>‎ ارتفعت نسبة المساحة التي سيأخذها المكوّن مقارنة بأشقّائه من المكوّنات ذات نفس الأب.
-'''ملاحظة:''' يمكن للمكوّن أن يتوسع لملء المساحة المتاحة فقط إذا كان المكّون الأب ذا أبعادٍ أكبر من ‎<code>0</code>‎. إذا لم يكن للمكوّن الأب عرضٌ ‎<code>width</code>‎ ثابت أو ارتفاعٌ ‎<code>height</code>‎ ثابت أو خاصيّةُ ‎<code>flex</code>‎، فستُساوي أبعاده‎<code>0</code>‎ ولن تكون المكوّنات الأطفال التي تمتلك خاصيّة  ‎<code>flex</code>‎مرئيّةً. على سبيل المثال، جرّب حذف <code>flex: 1</code> من على المكوّن <code>View</code> الأب أسفله. لن يكون للمكوّن الأب أي أبعاد، لذا لا يُمكن لأطفاله التوسّع. ماذا لو أضفت <code>height: 300</code> عوضًا عن <code>flex: 1</code>؟
+'''ملاحظة:''' يمكن للمكوّن أن يتوسع لملء المساحة المتاحة فقط إذا كان المكّون الأب ذا أبعادٍ أكبر من ‎0‎. إذا لم يكن للمكوّن الأب عرضٌ ‎<code>width</code>‎ ثابت أو ارتفاعٌ ‎<code>height</code>‎ ثابت أو خاصيّةُ ‎<code>flex</code>‎، فستُساوي أبعاده‎0‎ ولن تكون المكوّنات الأبناء التي تمتلك خاصيّة  ‎<code>flex</code>‎مرئيّةً.
 <syntaxhighlight lang="javascript">
-import React, { Component } from 'react';
+import React from 'react';
-import { AppRegistry, View } from 'react-native';
+import { View } from 'react-native';
-export default class FlexDimensionsBasics extends Component {
+const FlexDimensionsBasics = () => {
-  render() {
      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'}} />
@@ سطر 47: / سطر 45: @@
        </View>
      );
-  }
+};
-}
-// تخطّ هذا السطر إن كنت تستعمل أداة
+export default FlexDimensionsBasics;
-// Create React Native App
-AppRegistry.registerComponent('AwesomeProject', () => JustifyContentBasics);
 </syntaxhighlight>
 بعد تعلّمك كيفيّة التحكم في حجم المكوّن، انتقل إلى الخطوة التالية و<nowiki/>[[ReactNative/flexbox|تعلّم كيفيّة وضعه على الشاشة]].