الفرق بين المراجعتين لصفحة: «ReactNative/height and width»
أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:الارتفاع والعرض في React Native}}</noinclude> ==الارتفاع والعرض== يحدد ارتفاع وعرض المكوّن...' |
لا ملخص تعديل |
||
| سطر 2: | سطر 2: | ||
==الارتفاع والعرض== | ==الارتفاع والعرض== | ||
يحدد ارتفاع وعرض المكوّن | يحدد ارتفاع وعرض المكوّن حجمَه على الشاشة. | ||
==الأبعاد الثابتة== | ==الأبعاد الثابتة (Fixed Dimensions)== | ||
أبسطُ طريقة لضبط أبعاد مكوّنٍ هي بإضافة عرضٍ <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, { Component } from 'react'; | ||
| سطر 27: | سطر 27: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
من الشّائع ضبط الأبعاد بهذه الطريقة للمكوّنات التي يجب أن تظهر دائمًا بنفس الحجم تمامًا بغضّ النظر عن أبعاد | من الشّائع ضبط الأبعاد بهذه الطريقة للمكوّنات التي يجب أن تظهر دائمًا بنفس الحجم تمامًا بغضّ النظر عن أبعاد الشّاشة. | ||
==أبعاد Flex== | ==أبعاد Flex== | ||
اِستعمل الخاصيّة <code>flex</code> في نمط المكوّن لتوسيع المكوّن وتقليصه ديناميكيًا حسب المساحة المتوفرة. عادةً ما ستَستَخدِم <code>flex: 1</code>، والتي تُخبر المكوّن بملء كل المساحة المتاحة بالتّساوي مع المكونات الأخرى التي تشترك في نفس المكوّن الأب. كلما زادت قيمة <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>؟ | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
| سطر 52: | سطر 52: | ||
// تخطّ هذا السطر إن كنت تستعمل أداة | // تخطّ هذا السطر إن كنت تستعمل أداة | ||
// Create React Native App | // Create React Native App | ||
AppRegistry.registerComponent('AwesomeProject', () => JustifyContentBasics); | |||
</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]] | ||
مراجعة 10:22، 24 يناير 2019
الارتفاع والعرض
يحدد ارتفاع وعرض المكوّن حجمَه على الشاشة.
الأبعاد الثابتة (Fixed Dimensions)
أبسطُ طريقة لضبط أبعاد مكوّنٍ هي بإضافة عرضٍ width وارتفاعٍ height ثابتين إلى النمط style. جميع الأبعاد في React Native لاوحداتيّة (unitless)، وتمثّل وحدات بكسل مستقلة عن الكثافة (density-independent pixels):
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
export default class FixedDimensionsBasics extends Component {
render() {
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>
);
}
}
// تخطّ هذا السطر إن كنت تستعمل أداة
// Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);
من الشّائع ضبط الأبعاد بهذه الطريقة للمكوّنات التي يجب أن تظهر دائمًا بنفس الحجم تمامًا بغضّ النظر عن أبعاد الشّاشة.
أبعاد Flex
اِستعمل الخاصيّة flex في نمط المكوّن لتوسيع المكوّن وتقليصه ديناميكيًا حسب المساحة المتوفرة. عادةً ما ستَستَخدِم flex: 1، والتي تُخبر المكوّن بملء كل المساحة المتاحة بالتّساوي مع المكونات الأخرى التي تشترك في نفس المكوّن الأب. كلما زادت قيمة flex، كلما ارتفعت نسبة المساحة التي سيأخذها المكوّن مقارنة بأشقّائه من المكوّنات ذات نفس الأب.
ملاحظة: يمكن للمكوّن أن يتوسع لملء المساحة المتاحة فقط إذا كان المكّون الأب ذا أبعادٍ أكبر من 0. إذا لم يكن للمكوّن الأب عرضٌ width ثابت أو ارتفاعٌ height ثابت أو خاصيّةُ flex، فستُساوي أبعاده0 ولن تكون المكوّنات الأطفال التي تمتلك خاصيّة flexمرئيّةً. على سبيل المثال، جرّب حذف flex: 1 من على المكوّن View الأب أسفله. لن يكون للمكوّن الأب أي أبعاد، لذا لا يُمكن لأطفاله التوسّع. ماذا لو أضفت height: 300 عوضًا عن flex: 1؟
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
export default class FlexDimensionsBasics extends Component {
render() {
return (
<View style={{flex: 1}}>
<View style={{flex: 1, backgroundColor: 'powderblue'}} />
<View style={{flex: 2, backgroundColor: 'skyblue'}} />
<View style={{flex: 3, backgroundColor: 'steelblue'}} />
</View>
);
}
}
// تخطّ هذا السطر إن كنت تستعمل أداة
// Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => JustifyContentBasics);
بعد تعلّمك كيفيّة التحكم في حجم المكوّن، انتقل إلى الخطوة التالية وتعلّم كيفيّة وضعه على الشاشة.