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

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
(أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:الارتفاع والعرض في React Native}}</noinclude> ==الارتفاع والعرض== يحدد ارتفاع وعرض المكوّن...')
 
ط
 
(6 مراجعات متوسطة بواسطة 3 مستخدمين غير معروضة)
سطر 1: سطر 1:
−
<noinclude>{{DISPLAYTITLE:الارتفاع والعرض في React Native}}</noinclude>
+
<noinclude>{{DISPLAYTITLE:حجم المكونات وأبعادها في React Native}}</noinclude>
 +
يحدد ارتفاع وعرض المكوّن حجمَه على الشاشة.
  
−
==الارتفاع والعرض==
+
==الأبعاد الثابتة (Fixed Dimensions)==
−
يحدد ارتفاع وعرض المكوّن حجمه على الشاشة.
+
أبسطُ طريقة لضبط أبعاد مكوّنٍ هي بإضافة عرضٍ ‎<code>width</code>‎ وارتفاعٍ ‎<code>height</code>‎ ثابتين إلى النمط ‎<code>style</code>‎. جميع الأبعاد في React Native لا تعتمد على الوحدات (unitless)، وتمثّل بكسلات مستقلةً عن الكثافة  (density-independent pixels)
  
−
==الأبعاد الثابتة==
+
انظر المثال التالي ([https://snack.expo.dev/@hsoubwiki/height-and-width تجربة حية]):
−
أبسط طريقة لضبط أبعاد مكوّنٍ هي بإضافة عرضٍ ‎<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>‎ ارتفعت نسبة المساحة التي سيأخذها المكوّن مقارنة بأشقّائه من المكوّنات ذات الأب نفسه.
 +
 
 +
'''ملاحظة:''' يمكن للمكوّن أن يتوسع لملء المساحة المتاحة فقط إذا كان المكّون الأب ذا أبعادٍ أكبر من ‎0‎. إذا لم يكن للمكوّن الأب عرضٌ ‎<code>width</code>‎ أو ارتفاعٌ ‎<code>height</code>‎ ثابتان أو خاصيّةُ ‎<code>flex</code>‎ فإن  أبعاده ستساوي ‎،0‎ ولن تكون المكوّنات الأبناء التي تمتلك خاصيّة ‎<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>؟
+
انظر المثال التالي ([https://snack.expo.dev/@hsoubwiki/height-and-width تجربة حية]):
  
 
<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: سطر 49:
 
       </View>
 
       </View>
 
     );
 
     );
−
  }
+
};
−
}
 
  
−
// تخطّ هذا السطر إن كنت تستعمل أداة
+
export default FlexDimensionsBasics;
−
// Create React Native App
 
 
</syntaxhighlight>
 
</syntaxhighlight>
−
بعد تعلّمك كيفيّة التحكم في حجم المكوّن، انتقل إلى الخطوة التالية وتعلّم كيفيّة وضعه على الشاشة.
+
بعد تعلّمك كيفيّة التحكم في حجم المكوّن انتقل إلى الخطوة التالية و<nowiki/>[[ReactNative/flexbox|تعلّم كيفيّة وضعه على الشاشة]].
  
 
== مصادر ==
 
== مصادر ==
 
* [https://facebook.github.io/react-native/docs/height-and-width صفحة Height and Width في توثيق React Native الرسمي.]
 
* [https://facebook.github.io/react-native/docs/height-and-width صفحة Height and Width في توثيق React Native الرسمي.]
 
[[تصنيف:ReactNative]]
 
[[تصنيف:ReactNative]]
 +
[[تصنيف:React Native Docs]]

المراجعة الحالية بتاريخ 13:40، 9 أكتوبر 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;

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

مصادر

مجلوبة من "https://wiki.hsoub.com/index.php?title=ReactNative/height_and_width&oldid=31475"