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

من موسوعة حسوب
→ التعديل السابق
مرئينص الويكي
لا ملخص تعديل
طلا ملخص تعديل
 
(5 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة)
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:الارتفاع والعرض في React Native}}</noinclude>
<noinclude>{{DISPLAYTITLE:حجم المكونات وأبعادها في React Native}}</noinclude>
 
==الارتفاع والعرض==
يحدد ارتفاع وعرض المكوّن حجمَه على الشاشة.
يحدد ارتفاع وعرض المكوّن حجمَه على الشاشة.


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