الفرق بين المراجعتين لصفحة: «ReactNative/height and width»

من موسوعة حسوب
لا ملخص تعديل
سطر 7: سطر 7:
أبسطُ طريقة لضبط أبعاد مكوّنٍ هي بإضافة عرضٍ ‎<code>width</code>‎ وارتفاعٍ ‎<code>height</code>‎ ثابتين إلى النمط ‎<code>style</code>‎. جميع الأبعاد في React Native لاوحداتيّة (unitless)، وتمثّل وحدات بكسل مستقلة عن الكثافة  (density-independent pixels):
أبسطُ طريقة لضبط أبعاد مكوّنٍ هي بإضافة عرضٍ ‎<code>width</code>‎ وارتفاعٍ ‎<code>height</code>‎ ثابتين إلى النمط ‎<code>style</code>‎. جميع الأبعاد في React Native لاوحداتيّة (unitless)، وتمثّل وحدات بكسل مستقلة عن الكثافة  (density-independent pixels):
<syntaxhighlight lang="javascript">
<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 (
     return (
       <View>
       <View>
سطر 19: سطر 18:
       </View>
       </View>
     );
     );
  }
};
}


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


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


==أبعاد Flex==
==أبعاد 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">
<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 (
     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}}>
         <View style={{flex: 1, backgroundColor: 'powderblue'}} />
         <View style={{flex: 1, backgroundColor: 'powderblue'}} />
سطر 47: سطر 45:
       </View>
       </View>
     );
     );
  }
};
}


// تخطّ هذا السطر إن كنت تستعمل أداة
export default FlexDimensionsBasics;
// Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => JustifyContentBasics);
</syntaxhighlight>
</syntaxhighlight>
بعد تعلّمك كيفيّة التحكم في حجم المكوّن، انتقل إلى الخطوة التالية و<nowiki/>[[ReactNative/flexbox|تعلّم كيفيّة وضعه على الشاشة]].
بعد تعلّمك كيفيّة التحكم في حجم المكوّن، انتقل إلى الخطوة التالية و<nowiki/>[[ReactNative/flexbox|تعلّم كيفيّة وضعه على الشاشة]].

مراجعة 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;

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

مصادر