الفرق بين المراجعتين لصفحة: «ReactNative/height and width»
لا ملخص تعديل |
Basema-bakleh (نقاش | مساهمات) |
||
سطر 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 | import React from 'react'; | ||
import { | import { View } from 'react-native'; | ||
const FixedDimensionsBasics = () => { | |||
return ( | return ( | ||
<View> | <View> | ||
سطر 19: | سطر 18: | ||
</View> | </View> | ||
); | ); | ||
}; | |||
} | |||
export default 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>مرئيّةً. | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
import React | import React from 'react'; | ||
import { | import { View } from 'react-native'; | ||
const FlexDimensionsBasics = () => { | |||
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; | |||
</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;
بعد تعلّمك كيفيّة التحكم في حجم المكوّن، انتقل إلى الخطوة التالية وتعلّم كيفيّة وضعه على الشاشة.