الفرق بين المراجعتين ل"ReactNative/height and width"
Basema-bakleh (نقاش | مساهمات) |
جميل-بيلوني (نقاش | مساهمات) ط |
||
| (3 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 1: | سطر 1: | ||
| − | <noinclude>{{DISPLAYTITLE: | + | <noinclude>{{DISPLAYTITLE:حجم المكونات وأبعادها في React Native}}</noinclude> |
| − | |||
| − | |||
يحدد ارتفاع وعرض المكوّن حجمَه على الشاشة. | يحدد ارتفاع وعرض المكوّن حجمَه على الشاشة. | ||
==الأبعاد الثابتة (Fixed Dimensions)== | ==الأبعاد الثابتة (Fixed Dimensions)== | ||
| − | أبسطُ طريقة لضبط أبعاد مكوّنٍ هي بإضافة عرضٍ <code>width</code> وارتفاعٍ <code>height</code> ثابتين إلى النمط <code>style</code>. جميع الأبعاد في React Native | + | أبسطُ طريقة لضبط أبعاد مكوّنٍ هي بإضافة عرضٍ <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 from 'react'; | import React from 'react'; | ||
| سطر 23: | سطر 23: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| − | من الشّائع | + | من الشّائع استخدام هذخ الطريقة لضبط أبعاد المكوّنات التي يجب تصييرها دائمًا بنفس الحجم بغضّ النظر عن أبعاد الشّاشة. |
| + | |||
| + | '''ملاحظة''': لا توجد طريقة موحدة للتحويل من النقط إلى وحدات فيزيائية للقياس، وهذا يعني أن المكونات ثابتة الأبعاد قد لا تملك الأبعاد الفيزيائية نفسها على مختلف أحجمة الأجهزة والشاشات، ولكن على أي حال هذا الاختلاف غير ملحوظ في مختلف الحالات. | ||
==أبعاد Flex== | ==أبعاد Flex== | ||
| − | + | تستعمل الخاصيّة <code>flex</code> في نمط المكوّن لتوسيعه وتقليصه ديناميكيًا حسب المساحة المتوفرة، عادةً تستَخدم <code>flex: 1</code> والتي تُخبر المكوّن بملء المساحة المتاحة كلها بالتّساوي مع المكونات الأخرى التي تشترك في المكوّن الأب نفسه. كلما زادت قيمة <code>flex</code> ارتفعت نسبة المساحة التي سيأخذها المكوّن مقارنة بأشقّائه من المكوّنات ذات الأب نفسه. | |
| + | |||
| + | '''ملاحظة:''' يمكن للمكوّن أن يتوسع لملء المساحة المتاحة فقط إذا كان المكّون الأب ذا أبعادٍ أكبر من 0. إذا لم يكن للمكوّن الأب عرضٌ <code>width</code> أو ارتفاعٌ <code>height</code> ثابتان أو خاصيّةُ <code>flex</code> فإن أبعاده ستساوي ،0 ولن تكون المكوّنات الأبناء التي تمتلك خاصيّة <code>flex</code>مرئيّةً. | ||
| − | + | انظر المثال التالي ([https://snack.expo.dev/@hsoubwiki/height-and-width تجربة حية]): | |
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
| سطر 49: | سطر 53: | ||
export default FlexDimensionsBasics; | export default FlexDimensionsBasics; | ||
</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;
بعد تعلّمك كيفيّة التحكم في حجم المكوّن انتقل إلى الخطوة التالية وتعلّم كيفيّة وضعه على الشاشة.