الفرق بين المراجعتين ل"ReactNative/height and width"
اذهب إلى التنقل
اذهب إلى البحث
Basema-bakleh (نقاش | مساهمات) |
Basema-bakleh (نقاش | مساهمات) |
||
| سطر 5: | سطر 5: | ||
==الأبعاد الثابتة (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): |
<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> | + | '''ملاحظة:''' يمكن للمكوّن أن يتوسع لملء المساحة المتاحة فقط إذا كان المكّون الأب ذا أبعادٍ أكبر من 0. إذا لم يكن للمكوّن الأب عرضٌ <code>width</code> أو ارتفاعٌ <code>height</code> ثابتان أو خاصيّةُ <code>flex</code> فإن أبعاده ستساوي ،0 ولن تكون المكوّنات الأبناء التي تمتلك خاصيّة <code>flex</code>مرئيّةً. |
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
| سطر 49: | سطر 49: | ||
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]] | ||
مراجعة 20:30، 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;
بعد تعلّمك كيفيّة التحكم في حجم المكوّن انتقل إلى الخطوة التالية وتعلّم كيفيّة وضعه على الشاشة.