الفرق بين المراجعتين ل"ReactNative/layout props"
رقية-بورية (نقاش | مساهمات) ط (مراجعة) |
جميل-بيلوني (نقاش | مساهمات) ط (مراجعة) |
||
سطر 1: | سطر 1: | ||
− | <noinclude>{{DISPLAYTITLE:Layout Props في React Native}}</noinclude> | + | <noinclude>{{DISPLAYTITLE:خاصيات تخطيط الواجهة (Layout Props) في React Native}}</noinclude> |
<blockquote>لمزيد من المعلومات حول هذه الخاصيَّات يمكن زيارة الصّفحة [[ReactNative/flexbox|التخطيط باستخدام Flexbox]].</blockquote> | <blockquote>لمزيد من المعلومات حول هذه الخاصيَّات يمكن زيارة الصّفحة [[ReactNative/flexbox|التخطيط باستخدام Flexbox]].</blockquote> | ||
__toc__ | __toc__ | ||
== مثال == | == مثال == | ||
− | يبين المثال التّالي كيف يمكن للخاصيَّات المختلفة تشكيل تخطيط [[ReactNative|React Native]]، أو تؤثّر عليه، فمثلًا يمكن تجريب إضافة المربعات، أو إزالتها من واجهة المستخدم (UI)، مع تغيير قيم الخاصيّة <code>flexWrap</code>.<syntaxhighlight lang="javascript"> | + | |
+ | يبين المثال التّالي كيف يمكن للخاصيَّات المختلفة تشكيل تخطيط [[ReactNative|React Native]]، أو تؤثّر عليه، فمثلًا يمكن تجريب إضافة المربعات، أو إزالتها من واجهة المستخدم (UI)، مع تغيير قيم الخاصيّة <code>flexWrap</code>. | ||
+ | |||
+ | إليك المثال ([https://snack.expo.dev/@hsoubwiki/layoutprops-example تجربة حية]):<syntaxhighlight lang="javascript"> | ||
import React, { useState } from 'react'; | import React, { useState } from 'react'; | ||
− | import { Button, ScrollView, StyleSheet, Text, View } from 'react-native'; | + | import { Button, ScrollView, StatusBar, StyleSheet, Text, View } from 'react-native'; |
− | + | ||
− | |||
const App = () => { | const App = () => { | ||
− | + | const flexDirections = ['row', 'row-reverse', 'column', 'column-reverse']; | |
− | + | const justifyContents = [ | |
− | + | 'flex-start', | |
− | + | 'flex-end', | |
− | + | 'center', | |
− | + | 'space-between', | |
− | + | 'space-around', | |
− | + | 'space-evenly', | |
]; | ]; | ||
− | + | const alignItemsArr = [ | |
− | + | 'flex-start', | |
− | + | 'flex-end', | |
− | + | 'center', | |
− | + | 'stretch', | |
− | + | 'baseline', | |
]; | ]; | ||
− | + | const wraps = ['nowrap', 'wrap', 'wrap-reverse']; | |
− | + | const directions = ['inherit', 'ltr', 'rtl']; | |
− | + | const [flexDirection, setFlexDirection] = useState(0); | |
− | + | const [justifyContent, setJustifyContent] = useState(0); | |
− | + | const [alignItems, setAlignItems] = useState(0); | |
− | + | const [direction, setDirection] = useState(0); | |
− | + | const [wrap, setWrap] = useState(0); | |
− | + | ||
− | + | const hookedStyles = { | |
− | + | flexDirection: flexDirections[flexDirection], | |
− | + | justifyContent: justifyContents[justifyContent], | |
− | + | alignItems: alignItemsArr[alignItems], | |
− | + | direction: directions[direction], | |
− | + | flexWrap: wraps[wrap], | |
}; | }; | ||
− | + | ||
− | + | const changeSetting = (value, options, setterFunction) => { | |
− | + | if (value == options.length - 1) { | |
− | + | setterFunction(0); | |
− | + | return; | |
− | + | } | |
− | + | setterFunction(value + 1); | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
}; | }; | ||
− | + | const [squares, setSquares] = useState([<Square />, <Square />, <Square />]); | |
− | + | return ( | |
− | + | <> | |
− | + | <View style={{ paddingTop: StatusBar.currentHeight }} /> | |
− | + | <View style={[styles.container, styles.playingSpace, hookedStyles]}> | |
− | + | {squares.map(elem => elem)} | |
− | + | </View> | |
− | + | <ScrollView style={[styles.container]}> | |
− | + | <View style={[styles.controlSpace]}> | |
− | + | <View style={styles.buttonView}> | |
− | + | <Button | |
− | + | title="Change Flex Direction" | |
− | + | onPress={() => | |
− | + | changeSetting(flexDirection, flexDirections, setFlexDirection) | |
− | + | } | |
− | + | /> | |
− | + | <Text style={styles.text}>{flexDirections[flexDirection]}</Text> | |
− | + | </View> | |
− | + | <View style={styles.buttonView}> | |
− | + | <Button | |
− | + | title="Change Justify Content" | |
− | + | onPress={() => | |
− | + | changeSetting( | |
− | + | justifyContent, | |
− | + | justifyContents, | |
− | + | setJustifyContent | |
− | + | ) | |
− | + | } | |
− | + | /> | |
− | + | <Text style={styles.text}>{justifyContents[justifyContent]}</Text> | |
− | + | </View> | |
− | + | <View style={styles.buttonView}> | |
− | + | <Button | |
− | + | title="Change Align Items" | |
− | + | onPress={() => | |
− | + | changeSetting(alignItems, alignItemsArr, setAlignItems) | |
− | + | } | |
− | + | /> | |
− | + | <Text style={styles.text}>{alignItemsArr[alignItems]}</Text> | |
− | + | </View> | |
− | + | <View style={styles.buttonView}> | |
− | + | <Button | |
− | + | title="Change Direction" | |
− | + | onPress={() => changeSetting(direction, directions, setDirection)} | |
− | + | /> | |
− | + | <Text style={styles.text}>{directions[direction]}</Text> | |
− | + | </View> | |
− | + | <View style={styles.buttonView}> | |
− | + | <Button | |
− | + | title="Change Flex Wrap" | |
− | + | onPress={() => changeSetting(wrap, wraps, setWrap)} | |
− | + | /> | |
− | + | <Text style={styles.text}>{wraps[wrap]}</Text> | |
− | + | </View> | |
− | + | <View style={styles.buttonView}> | |
− | + | <Button | |
− | + | title="Add Square" | |
− | + | onPress={() => setSquares([...squares, <Square/>])} | |
− | + | /> | |
− | + | </View> | |
− | + | <View style={styles.buttonView}> | |
− | + | <Button | |
− | + | title="Delete Square" | |
− | + | onPress={() => | |
− | + | setSquares(squares.filter((v, i) => i != squares.length - 1)) | |
− | + | } | |
− | + | /> | |
− | + | </View> | |
− | + | </View> | |
− | + | </ScrollView> | |
− | + | </> | |
); | ); | ||
}; | }; | ||
− | + | ||
const styles = StyleSheet.create({ | const styles = StyleSheet.create({ | ||
− | + | container: { | |
− | + | height: '50%', | |
}, | }, | ||
− | + | playingSpace: { | |
− | + | backgroundColor: 'white', | |
− | + | borderColor: 'blue', | |
− | + | borderWidth: 3, | |
}, | }, | ||
− | + | controlSpace: { | |
− | + | flexDirection: 'row', | |
− | + | flexWrap: 'wrap', | |
− | + | backgroundColor: '#F5F5F5', | |
}, | }, | ||
− | + | buttonView: { | |
− | + | width: '50%', | |
− | + | padding: 10, | |
}, | }, | ||
− | + | text: { textAlign: 'center' }, | |
}); | }); | ||
− | + | ||
+ | const Square = () => ( | ||
+ | <View style={{ | ||
+ | width: 50, | ||
+ | height: 50, | ||
+ | backgroundColor: randomHexColor(), | ||
+ | }} /> | ||
+ | ); | ||
+ | |||
const randomHexColor = () => { | const randomHexColor = () => { | ||
− | + | return '#000000'.replace(/0/g, () => { | |
− | + | return (~~(Math.random() * 16)).toString(16); | |
}); | }); | ||
}; | }; | ||
− | + | ||
export default App; | export default App; | ||
</syntaxhighlight> | </syntaxhighlight> | ||
سطر 164: | سطر 165: | ||
=== <code>alignContent</code> === | === <code>alignContent</code> === | ||
− | تتحكّم | + | تتحكّم بكيفيّة محاذاة الصّفوف وفق الاتجاه الآخر العموديّ عليه (cross direction)، متجاهلةً <code>alignContent</code> للأب (parent)، ولمزيد من المعلومات يمكن زيارة الصفحة [[CSS/align-content|<code>align-content</code>]]. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
!مطلوب | !مطلوب | ||
|- | |- | ||
− | | | + | |('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around') |
|لا | |لا | ||
|} | |} | ||
=== <code>alignItems</code> === | === <code>alignItems</code> === | ||
− | تحاذي | + | تحاذي المكونات الأبناء (children) وفق الاتجاه المتعامد مع اتجاه الصف، حيث تتحكّم الخاصيّة <code>alignItems</code> بكيفيّة محاذاة المكوّنات الأبناء أفقيًّا، في حال كانت مصفوفةً عموديًّا، وتعمل بشكلٍ مشابهٍ للخاصيّة <code>align-items</code> في (CSS (default:stretch، ويمكن زيارة الصّفحة [[CSS/align-items|<code>align-items</code>]] لمزيدٍ من المعلومات. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
!مطلوب | !مطلوب | ||
|- | |- | ||
− | | | + | |('flex-start', 'flex-end', 'center', 'stretch', 'baseline') |
|لا | |لا | ||
|} | |} | ||
=== <code>alignSelf</code> === | === <code>alignSelf</code> === | ||
− | تتحكّم الخاصية | + | تتحكّم هذه الخاصية بكيفيّة محاذاة المكوّن الابن وفق الاتجاه المتعامد مع اتجاه الصف متجاهلةً <code>alignItems</code> للمكوّن الأب، وتعمل بشكلٍ مشابهٍ للخاصيّة <code>[[CSS/align-self|align-self]]</code> في (CSS (default:auto، ويمكن زيارة الصّفحة [[CSS/align-self|<code>align-self</code>]] لمزيدٍ من المعلومات. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
!مطلوب | !مطلوب | ||
|- | |- | ||
− | | | + | |('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline') |
|لا | |لا | ||
|} | |} | ||
=== <code>aspectRatio</code> === | === <code>aspectRatio</code> === | ||
− | تتحكم | + | تتحكم بمقاس بُعد (dimension) العقدة غير المحدَّد، وهذه الخاصّيّة غير معياريّةٍ، حيث تُستخدم فقط في [[ReactNative|React Native]]، ولا تُستخدم في [[CSS]]. |
− | * تتحكم <code>aspectRatio</code> بمقاس البُعد غير المحدد في العقد التي حُدد فيها العرض، أو الارتفاع. | + | * تتحكم <code>aspectRatio</code> بمقاس البُعد غير المحدد (unset dimension) في العقد التي حُدد فيها العرض، أو الارتفاع. |
− | * تتحكم | + | * تتحكم بمقاس العقدة وفق المحور المتعامد مع المحور الرئيسي (cross axis)، في حال لم يكن محددًا في العقد التي حدّد فيها الأساس المرن (flex basis). |
− | * تقيس | + | * تقيس الأساس المرن من خلال دالّة القياس في العقد المزودة بدالّة قياسٍ. |
− | * تتحكم | + | * تتحكم بمقاس العقدة وفق المحور المتعامد مع المحور الرئيسيّ، في حال لم يكن محدّدًا في العقد المزودة بالتصغير (shrink)، أو التّكبير (grow) المرن. |
− | * تأخذ | + | * تأخذ الأبعاد الأصغرية، أو الأعظمية بعين الاعتبار. |
{| class="wikitable" | {| class="wikitable" | ||
سطر 211: | سطر 212: | ||
=== <code>borderBottomWidth</code> === | === <code>borderBottomWidth</code> === | ||
− | تعمل | + | تعمل بكيفية مشابهة للخاصيّة <code>border-bottom-width</code> في CSS، ويمكن زيارة الصّفحة [[CSS/border-bottom-width|<code>border-bottom-width</code>]] لمزيدٍ من المعلومات. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 221: | سطر 222: | ||
=== <code>borderEndWidth</code> === | === <code>borderEndWidth</code> === | ||
− | تكافئ | + | تكافئ الخاصيّة <code>borderRightWidth</code> عندما يكون الاتّجاه من اليسار إلى اليمين <code>ltr</code>، بينما تكافئ الخاصيّة <code>borderLeftWidth</code> عندما يكون الاتّجاه من اليمين إلى اليسار <code>rtl</code>. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 231: | سطر 232: | ||
=== <code>borderLeftWidth</code> === | === <code>borderLeftWidth</code> === | ||
− | تعمل | + | تعمل بكيفيةمشابهة للخاصيّة <code>border-left-width</code> في CSS، ويمكن زيارة الصّفحة [[CSS/border-left-width|<code>border-left-width</code>]] لمزيدٍ من المعلومات. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 241: | سطر 242: | ||
=== <code>borderRightWidth</code> === | === <code>borderRightWidth</code> === | ||
− | تعمل | + | تعمل بكيفية مشابهة للخاصيّة <code>border-right-width</code> في CSS، ويمكن زيارة الصّفحة [[CSS/border-right-width|<code>border-right-width</code>]] لمزيدٍ من المعلومات. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 251: | سطر 252: | ||
=== <code>borderStartWidth</code> === | === <code>borderStartWidth</code> === | ||
− | تكافئ | + | تكافئ الخاصيّة <code>borderLeftWidth</code> عندما يكون الاتّجاه من اليسار إلى اليمين <code>ltr</code>، بينما تكافئ الخاصيّة <code>borderRightWidth</code> عندما يكون الاتّجاه من اليمين إلى اليسار <code>rtl</code>. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 261: | سطر 262: | ||
=== <code>borderTopWidth</code> === | === <code>borderTopWidth</code> === | ||
− | تعمل | + | تعمل بكيفيةمشابهة للخاصيّة <code>border-top-width</code> في CSS، ويمكن زيارة الصفحة [[CSS/border-top-width|<code>border-top-width</code>]] لمزيدٍ من المعلومات. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 281: | سطر 282: | ||
=== <code>bottom</code> === | === <code>bottom</code> === | ||
− | تحدد | + | تحدد مقدار إزاحة الحافّة السّفليّة للمكوّن بالبكسلات (pixels)، وتعمل بشكلٍ مشابهٍ للخاصيّة <code>bottom</code> في CSS، إلا أنّه يجب استعمال عدد النقاط، أو النّسبة المئويّة فقط في React Native، ولا تُقبل الوحدة em، أو الوحدات الأخرى، ويمكن زيارة الصّفحة [[CSS/bottom|<code>bottom</code>]] لمزيدٍ من المعلومات. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 291: | سطر 292: | ||
=== <code>direction</code> === | === <code>direction</code> === | ||
− | تحدد | + | تحدد اتجاه المحتوى (directional flow) لواجهة المستخدم، وقيمتها الافتراضية هي دائمًا <code>inherit</code>، باستثناء عقدة الجذر (root node)، والتّي ستكون قيمتها قائمةً على أساس الموقع الحالي، ويمكن زيارة الصّفحة [https://yogalayout.com/docs/layout-direction layout-direction] لمزيدٍ من المعلومات. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 297: | سطر 298: | ||
!المنصة | !المنصة | ||
|- | |- | ||
− | | | + | |('inherit', 'ltr', 'rtl') |
|لا | |لا | ||
|iOS | |iOS | ||
سطر 303: | سطر 304: | ||
=== <code>display</code> === | === <code>display</code> === | ||
− | تحدّد | + | تحدّد نمط إظهار المكوّن، وتعمل بكيفيةمشابهة للخاصيّة <code>display</code> في CSS، إلا أنها تدعم <code>flex</code>، و<code>non</code>، حيث <code>flex</code> هو النّمط الافتراضيّ. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
!مطلوب | !مطلوب | ||
|- | |- | ||
− | | | + | |('none', 'flex') |
|لا | |لا | ||
|} | |} | ||
=== <code>end</code> === | === <code>end</code> === | ||
− | تكافئ | + | تكافئ الخاصيّة <code>right</code> عندما يكون الاتجاه من اليسار إلى اليمين <code>ltr</code>، بينما تكافئ الخاصيّة <code>left</code> عندما يكون الاتجاه من اليمين إلى اليسار <code>rtl</code>، ولهذا التنسيق أولويّةٌ على التنسيقين <code>left</code>، و <code>right</code>. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 341: | سطر 342: | ||
=== <code>flexBasis</code> === | === <code>flexBasis</code> === | ||
− | + | هي طريقةٌ مستقلّةٌ عن المحاور (axis-independent) لإعطاء العنصر حجمًا افتراضيًّا على طول المحور الرئيسي، ويتشابه إعداد <code>flexBasis</code> للمكوّن الابن مع إعداد <code>width</code> للمكوّن الابن، إذا كان الأب حاويةً ذات <code>flexDirection: row</code>، أو مع إعداد <code>height</code> للمكوّن الابن، إذا كان الأب عبارة عن حاويةً ذات <code>flexDirection: column</code>. وتمثّل الخاصية <code>flexBasis</code> الحجم الافتراضيّ للعنصر قبل أن تطبّق عليه الخاصيّات <code>flexShrink</code>، و<code>flexGrow</code>. | |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 351: | سطر 352: | ||
=== <code>flexDirection</code> === | === <code>flexDirection</code> === | ||
− | تحدد | + | تحدد الاتجاه الذي سيتحرك به المكون الابن في الحاوية، فإذا كانت قيمتها <code>row</code> فإنه سيتحرك من اليسار إلى اليمين، وإذا كانت <code>column</code> فإنه سيتحرك من الأعلى إلى الأسفل، وتعمل <code>flexDirection</code> بشكلٍ مشابهٍ للخاصيّة <code>flex-direction</code> في CSS. |
يمكنك زيارة الصّفحة [[CSS/flex-direction|<code>flex-direction</code>]] لمزيدٍ من المعلومات. | يمكنك زيارة الصّفحة [[CSS/flex-direction|<code>flex-direction</code>]] لمزيدٍ من المعلومات. | ||
سطر 358: | سطر 359: | ||
!مطلوب | !مطلوب | ||
|- | |- | ||
− | | | + | |('row', 'row-reverse', 'column', 'column-reverse') |
|لا | |لا | ||
|} | |} | ||
=== <code>flexGrow</code> === | === <code>flexGrow</code> === | ||
− | تصف | + | تصف كيفيّة توزيع الفراغ بين المكوّنات الأبناء ضمن الحاوية على طول المحور الرئيسيّ، حيث توزّع الحاوية -بعد وضع المكونات الأبناء- الفراغات المتبقية بينها، بناءً على قيمة <code>flexGrow</code> الخاصّة بكلّ مكوّن ابن، وتقبل <code>flexGrow</code> أيّ قيمةٍ عشريّةٍ أكبر من الصفر، أو تساويها، والصفر هو قيمتها الافتراضيّة. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 373: | سطر 374: | ||
=== <code>flexShrink</code> === | === <code>flexShrink</code> === | ||
− | تصف | + | تصف كيفيّة تصغير المكونات الأبناء على طول المحور الرئيسي عندما يكون الحجم الكليّ للمكوّنات الأبناء يفوق حجم الحاوية على طول المحور الرئيسيّ، وهذه الخاصيّة شبيهةٌ جدًا بالخاصيّة <code>flexGrow</code> عند اعتبار الحجم الزائد بمثابة فراغٍ متبقٍّ سالب القيمة، وتتعاون هاتان الخاصيتان فيما بينهما للسماح للمكونات الأبناء بالتمدد والتقلص حسب الحاجة، وتقبل <code>flexGrow</code> أيّ قيمةٍ عشريّةٍ أكبر من الصفر أو تساويها، والواحد هو قيمتها الافتراضيّة، وتقلص الحاوية المكونات الأبناء بشكلٍ متناسبٍ مع قيمة <code>flexShrink</code>. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 383: | سطر 384: | ||
=== <code>flexWrap</code> === | === <code>flexWrap</code> === | ||
− | تتحكم | + | تتحكم بقدرة المكوّنات الأبناء على الالتفاف عند بلوغها حافة الحاوية، وتعمل بشكلٍ مشابهٍ للخاصيّة <code>flex-wrap</code> في CSS (default: nowrap)، ويمكن زيارة الصّفحة [[CSS/flex-wrap|<code>flex-wrap</code>]] لمزيدٍ من المعلومات. |
لاحظ أنه لم تعد هذه الخاصية تعمل مع <code>alignItems: stretch</code>، لذا يمكن استخدام <code>alignItems: flex-start</code> (تفاصيل التغيير العاجل: [https://github.com/facebook/react-native/releases/tag/v0.28.0 react-native/releases] ). | لاحظ أنه لم تعد هذه الخاصية تعمل مع <code>alignItems: stretch</code>، لذا يمكن استخدام <code>alignItems: flex-start</code> (تفاصيل التغيير العاجل: [https://github.com/facebook/react-native/releases/tag/v0.28.0 react-native/releases] ). | ||
سطر 390: | سطر 391: | ||
!مطلوب | !مطلوب | ||
|- | |- | ||
− | | | + | |('wrap', 'nowrap', 'wrap-reverse') |
|لا | |لا | ||
|} | |} | ||
=== <code>height</code> === | === <code>height</code> === | ||
− | تحدد | + | تحدد ارتفاع المكوّن، و تعمل بكيفيةمشابهة للخاصيّة <code>height</code> في CSS، إلا أنه يجب استعمال عدد النقاط، أو النسبة المئوية فقط في React Native، ولا تُقبل الوحدات em، أو الوحدات الأخرى. ويمكن زيارة الصّفحة [[CSS/height|<code>height</code>]] لمزيدٍ من المعلومات. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 405: | سطر 406: | ||
=== <code>justifyContent</code> === | === <code>justifyContent</code> === | ||
− | تحاذي | + | تحاذي المكوّنات الأبناء وفق الاتّجاه الرئيسيّ، مثلاً تتحكّم هذه الخاصيّة بطريقة محاذاة المكونات الأبناء عموديّاً، إذا كانت منتشرةً عمودياً، وهي تشابه الخاصيّة <code>justify-content</code> في (CSS (default: flex-start، ويمكن زيارة الصّفحة [[CSS/justify-content|<code>justifi-content</code>]] لمزيدٍ من المعلومات. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
!مطلوب | !مطلوب | ||
|- | |- | ||
− | | | + | |('flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly') |
|لا | |لا | ||
|} | |} | ||
=== <code>left</code> === | === <code>left</code> === | ||
− | تحدّد | + | تحدّد مقدار إزاحة حافّة المكوّن اليسرى بالبكسلات، وتعمل بكيفيةمشابهة للخاصيّة <code>left</code> في CSS، إلا أنه يجب استعمال عدد النقاط، أو النسبة المئوية فقط في React Native، ولا تُقبل الوحدات em، أو الوحدات الأخرى. ويمكن زيارة الصّفحة [[CSS/left|<code>left</code>]] لمزيدٍ من المعلومات عن تأثير <code>left</code> على التخطيط. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 425: | سطر 426: | ||
=== <code>margin</code> === | === <code>margin</code> === | ||
− | + | لهذه الخاصية تأثير كلٍّ من الخاصيّات <code>marginTop</code>، و<code>marginLeft</code>، و<code>marginBottom</code>، و<code>marginRight</code>. ويمكن زيارة الصّفحة [[CSS/margin|<code>margin</code>]] لمزيدٍ من المعلومات. | |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 435: | سطر 436: | ||
=== <code>marginBottom</code> === | === <code>marginBottom</code> === | ||
− | تعمل | + | تعمل بشكلٍ مشابهٍ للخاصيّة <code>margin-bottom</code> في CSS، ويمكن زيارة الصّفحة [[CSS/margin-bottom|<code>margin-bottom</code>]] لمزيدٍ من المعلومات. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 445: | سطر 446: | ||
=== <code>marginEnd</code> === | === <code>marginEnd</code> === | ||
− | تكافئ | + | تكافئ الخاصيّة <code>marginRight</code> عندما يكون الاتجاه من اليسار إلى اليمين <code>ltr</code>، بينما تكافئ الخاصيّة <code>marginLeft</code>، عندما يكون الاتجاه من اليمين إلى اليسار <code>rtl</code>. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 455: | سطر 456: | ||
=== <code>marginHorizontal</code> === | === <code>marginHorizontal</code> === | ||
− | + | لهذه الخاصية تأثير كلا الخاصيّتين <code>marginLeft</code>، و<code>marginRight</code>. | |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 465: | سطر 466: | ||
=== <code>marginLeft</code> === | === <code>marginLeft</code> === | ||
− | تعمل | + | تعمل بشكلٍ مشابهٍ للخاصيّة <code>margin-left</code> في CSS، ويمكن زيارة الصّفحة [[CSS/margin-left|<code>margin-left</code>]] لمزيدٍ من المعلومات. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 475: | سطر 476: | ||
=== <code>marginRight</code> === | === <code>marginRight</code> === | ||
− | تعمل | + | تعمل بشكلٍ مشابهٍ للخاصيّة <code>margin-right</code> في CSS، ويمكن زيارة الصّفحة [[CSS/margin-right|<code>margin-right</code>]] لمزيدٍ من المعلومات. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 485: | سطر 486: | ||
=== <code>marginStart</code> === | === <code>marginStart</code> === | ||
− | تكافئ | + | تكافئ الخاصيّة <code>marginLeft</code> عندما يكون الاتجاه من اليسار إلى اليمين <code>ltr</code>، بينما تكافئ الخاصيّة <code>marginRight</code> عندما يكون الاتجاه من اليمين إلى اليسار <code>rtl</code>. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 495: | سطر 496: | ||
=== <code>marginTop</code> === | === <code>marginTop</code> === | ||
− | تعمل | + | تعمل بشكلٍ مشابهٍ للخاصيّة <code>margin-top</code> في CSS، ويمكن زيارة الصّفحة [[CSS/margin-top|<code>margin-top</code>]] لمزيدٍ من المعلومات. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 505: | سطر 506: | ||
=== <code>marginVertical</code> === | === <code>marginVertical</code> === | ||
− | + | لهذه الخاصية تأثير كلا الخاصيّتين <code>marginTop</code>، و<code>marginBottom</code>. | |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 515: | سطر 516: | ||
=== <code>maxHeight</code> === | === <code>maxHeight</code> === | ||
− | تحدّد | + | تحدّد مقدار الارتفاع الأكبر للمكوّن بالبكسلات، وتعمل بكيفيةمشابهة للخاصيّة <code>max-height</code> في CSS، إلا أنه يجب استعمال عدد النقاط، أو النسبة المئوية فقط في React Native، ولا تُقبل الوحدات em، أو الوحدات الأخرى، ويمكن زيارة الصّفحة [[CSS/max-height|<code>max-height</code>]] لمزيدٍ من المعلومات. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 525: | سطر 526: | ||
=== <code>maxWidth</code> === | === <code>maxWidth</code> === | ||
− | تحدّد | + | تحدّد مقدار العرض الأكبر للمكوّن بالبكسلات، وتعمل بكيفيةمشابهة للخاصيّة <code>max-width</code> في CSS، إلا أنه يجب استعمال عدد النقاط، أو النسبة المئوية فقط في React Native، ولا تُقبل الوحدات em أو الوحدات الأخرى، ويمكن زيارة الصّفحة [[CSS/max-width|<code>max-width</code>]] لمزيدٍ من المعلومات. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 535: | سطر 536: | ||
=== <code>minHeight</code> === | === <code>minHeight</code> === | ||
− | تحدد | + | تحدد مقدار الارتفاع الأصغر للمكوّن بالبكسلات، وتعمل بكيفيةمشابهة للخاصيّة <code>min-height</code> في CSS، إلا أنه يجب استعمال عدد النقاط، أو النسبة المئوية فقط في React Native، ولا تُقبل الوحدات em، أو الوحدات الأخرى، ويمكن زيارة الصّفحة [[CSS/min-height|<code>min-height</code>]] لمزيدٍ من المعلومات. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 545: | سطر 546: | ||
=== <code>minWidth</code> === | === <code>minWidth</code> === | ||
− | تحدّد | + | تحدّد مقدار العرض الأصغر للمكوّن بالبكسلات، وتعمل بكيفيةمشابهة للخاصيّة <code>min-width</code> في CSS، إلا أنه يجب استعمال عدد النقاط، أو النسبة المئوية فقط في React Native، ولا تُقبل الوحدات em، أو الوحدات الأخرى، ويمكن زيارة الصّفحة [[CSS/min-width|<code>min-width</code>]] لمزيدٍ من المعلومات. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 555: | سطر 556: | ||
=== <code>overflow</code> === | === <code>overflow</code> === | ||
− | تتحكم | + | تتحكم بمَقاس المكونات الأبناء وطريقة إظهارها، حيث تجعل الواجهات مقصوصةً (clipped) عندما تكون قيمتها <code>overflow: hidden</code>، بينما تجعل مَقاس إظهار المكوّنات الأبناء مستقلًا عن الأبعاد الأصغرية للمكونات الآباء إذا كانت قيمتها <code>overflow: scroll</code>، وهي تشابه الخاصيّة <code>overflow</code> في (CSS (default: visible. ويمكن زيارة الصّفحة [[CSS/overflow|<code>overflow</code>]] لمزيدٍ من المعلومات. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
!مطلوب | !مطلوب | ||
|- | |- | ||
− | | | + | |('visible', 'hidden', 'scroll') |
|لا | |لا | ||
|} | |} | ||
=== <code>padding</code> === | === <code>padding</code> === | ||
− | + | لهذه الخاصية تأثير كلٍّ من الخاصيّات <code>paddingTop</code>، و<code>paddingLeft</code>، و<code>paddingBottom</code>،و<code>paddingRight</code>، ويمكن زيارة الصّفحة [[CSS/padding|<code>padding</code>]] لمزيدٍ من المعلومات. | |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 575: | سطر 576: | ||
=== <code>paddingBottom</code> === | === <code>paddingBottom</code> === | ||
− | تعمل | + | تعمل بكيفية مشابهة للخاصيّة <code>padding-Bottom</code> في CSS، ويمكن زيارة الصّفحة [[CSS/padding-bottom|<code>padding-bottom</code>]] لمزيدٍ من المعلومات. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 585: | سطر 586: | ||
=== <code>paddingEnd</code> === | === <code>paddingEnd</code> === | ||
− | تكافئ | + | تكافئ الخاصيّة <code>paddingRight</code> عندما يكون الاتجاه من اليسار إلى اليمين <code>ltr</code>، بينما تكافئ الخاصيّة <code>paddingLeft</code> عندما يكون الاتجاه من اليمين إلى اليسار <code>rtl</code>. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 595: | سطر 596: | ||
=== <code>paddingHorizontal</code> === | === <code>paddingHorizontal</code> === | ||
− | + | لهذه الخاصية تأثير كلا الخاصيّتين <code>paddingLeft</code>، و<code>paddingRight</code>. | |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 605: | سطر 606: | ||
=== <code>paddingLeft</code> === | === <code>paddingLeft</code> === | ||
− | تعمل | + | تعمل بكيفية مشابهة للخاصيّة <code>padding-left</code> في CSS، ويمكن زيارة الصّفحة [[CSS/padding-left|<code>padding-left</code>]] لمزيدٍ من المعلومات. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 615: | سطر 616: | ||
=== <code>paddingRight</code> === | === <code>paddingRight</code> === | ||
− | تعمل | + | تعمل بكيفية مشابهة للخاصيّة <code>padding-right</code> في CSS، ويمكن زيارة الصّفحة [[CSS/padding-right|<code>padding-right</code>]] لمزيدٍ من المعلومات. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 625: | سطر 626: | ||
=== <code>paddingStart</code> === | === <code>paddingStart</code> === | ||
− | تكافئ | + | تكافئ الخاصيّة <code>paddingLeft</code> عندما يكون الاتجاه من اليسار إلى اليمين <code>ltr</code>, بينما تكافئ الخاصيّة <code>paddingRight</code> عندما يكون الاتجاه من اليمين إلى اليسار <code>rtl</code>. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 635: | سطر 636: | ||
=== <code>paddingTop</code> === | === <code>paddingTop</code> === | ||
− | تعمل | + | تعمل بكيفيةمشابهة للخاصيّة <code>padding-top</code> في CSS، ويمكن زيارة الصّفحة [[CSS/padding-top|<code>padding-top</code>]] لمزيدٍ من المعلومات. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 645: | سطر 646: | ||
=== <code>paddingVertical</code> === | === <code>paddingVertical</code> === | ||
− | + | لهذه الخاصية تأثير كلا الخاصيّتين <code>paddingTop</code>، و<code>paddingBottom</code>. | |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 655: | سطر 656: | ||
=== <code>position</code> === | === <code>position</code> === | ||
− | تتشابه | + | تتشابه في عملها في React Native، وCSS عدا في طريقة توضّع المكونات، والتي تتم افتراضيًا بشكلٍ نسبيٍّ <code>relative</code> للمكوّن الأب، وبالتالي سيؤول التوضّع المطلق <code>absolute</code> دومًا إلى التوضّع النسبيّ، أي يجب وضع الخاصيّة <code>position</code> على القيمة <code>absolute</code> في المكون الابن، عند الرغبة بوضعه على بعدٍ محدّدٍ من البكسلات بالنسبة للمكون الأب. |
عند الرغبة بوضع المكون الابن بالنسبة لشيءٍ غير المكوّن الأب يجب عدم استخدام التنسيق، بل استخدام شجرة المكوّن (component tree)، ويمكن زيارة الصّفحة [https://github.com/facebook/yoga yoga] لمزيدٍ من المعلومات حول اختلاف الخاصيّة <code>position</code> بين React Native، وCSS. | عند الرغبة بوضع المكون الابن بالنسبة لشيءٍ غير المكوّن الأب يجب عدم استخدام التنسيق، بل استخدام شجرة المكوّن (component tree)، ويمكن زيارة الصّفحة [https://github.com/facebook/yoga yoga] لمزيدٍ من المعلومات حول اختلاف الخاصيّة <code>position</code> بين React Native، وCSS. | ||
سطر 662: | سطر 663: | ||
!مطلوب | !مطلوب | ||
|- | |- | ||
− | | | + | | ('absolute', 'relative') |
|لا | |لا | ||
|} | |} | ||
=== <code>right</code> === | === <code>right</code> === | ||
− | تحدّد | + | تحدّد مقدار إزاحة حافة المكوّن اليمنى بالبكسلات، وتعمل بشكلٍ مشابهٍ للخاصيّة <code>right</code> في CSS، إلا أنه يجب استعمال عدد النقاط، أو النسبة المئوية فقط في React Native، ولا تُقبل الوحدات em، أو الوحدات الأخرى، ويمكن زيارة الصّفحة [[CSS/right|<code>right</code>]] لمزيدٍ من المعلومات عن تأثير <code>right</code> على التخطيط. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 677: | سطر 678: | ||
=== <code>start</code> === | === <code>start</code> === | ||
− | تكافئ | + | تكافئ الخاصيّة <code>left</code> عندما يكون الاتجاه من اليسار إلى اليمين <code>ltr</code>، بينما تكافئ الخاصيّة <code>right</code> عندما يكون الاتجاه من اليمين إلى اليسار <code>rtl</code>، ولهذا التنسيق أولوية (precedence) على التنسيقين <code>left</code>، و<code>right</code>. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 687: | سطر 688: | ||
=== <code>top</code> === | === <code>top</code> === | ||
− | تحدد | + | تحدد مقدار إزاحة حافة المكوّن العُليا بالبكسلات، وتعمل بشكلٍ مشابهٍ للخاصيّة <code>top</code> في CSS، إلا أنه يجب استعمال عدد النقاط، أو النسبة المئوية فقط في React Native، ولا تُقبل الوحدات em، أو الوحدات الأخرى. ويمكن زيارة الصّفحة [[CSS/top|top]] لمزيدٍ من المعلومات عن تأثير <code>top</code> على التخطيط. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 697: | سطر 698: | ||
=== <code>width</code> === | === <code>width</code> === | ||
− | تحدد | + | تحدد عرض المكوّن، وتعمل بكيفيةمشابهة للخاصيّة <code>width</code> في CSS، إلا أنه يجب استعمال عدد النقاط، أو النسبة المئوية فقطفي React Native، ولا تُقبل الوحدات em، أو الوحدات الأخرى، ويمكن زيارة الصّفحة [[CSS/width|<code>width</code>]] لمزيدٍ من المعلومات. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 707: | سطر 708: | ||
=== <code>zIndex</code> === | === <code>zIndex</code> === | ||
− | تتحكم | + | تتحكم بطريقة عرض المكونات بعضها فوق بعض، ولا تستخدم في الحالات الطبيعية، حيث تظهر المكونات وفقًا لشجرة المستند (document tree) بعرض المكونات الأقدم فوق الأحدث، وقد تُستخدم هذه الخاصية عند تنفيذ الحركات، أو في واجهات المستخدم الخاصة التي تتطلب نمط إظهارٍ خاصٍّ. |
وتعمل بكيفيةمشابهة للخاصيّة <code>z-index</code> في CSS، حيث تظهر المكونات ذات <code>zIndex</code> الأكبر في الأعلى، ويمكن التفكير بهذه الخاصية كأنها تتوجّه من الهاتف المحمول إلى عين المستخدم، ويمكن زيارة الصّفحة [[CSS/z-index|<code>z-index</code>]] لمزيدٍ من المعلومات. | وتعمل بكيفيةمشابهة للخاصيّة <code>z-index</code> في CSS، حيث تظهر المكونات ذات <code>zIndex</code> الأكبر في الأعلى، ويمكن التفكير بهذه الخاصية كأنها تتوجّه من الهاتف المحمول إلى عين المستخدم، ويمكن زيارة الصّفحة [[CSS/z-index|<code>z-index</code>]] لمزيدٍ من المعلومات. | ||
− | عند استخدام هذه الخاصيّة على منصة IOS تحتاج أن تكون المكوّنات [[ReactNative/view|View]] المستخدمة إخوةً (siblings) لتعمل كما ينبغي. | + | عند استخدام هذه الخاصيّة على منصة IOS تحتاج أن تكون المكوّنات [[ReactNative/view|<code>View</code>]] المستخدمة إخوةً (siblings) لتعمل كما ينبغي. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع |
مراجعة 19:47، 4 أكتوبر 2021
لمزيد من المعلومات حول هذه الخاصيَّات يمكن زيارة الصّفحة التخطيط باستخدام Flexbox.
مثال
يبين المثال التّالي كيف يمكن للخاصيَّات المختلفة تشكيل تخطيط React Native، أو تؤثّر عليه، فمثلًا يمكن تجريب إضافة المربعات، أو إزالتها من واجهة المستخدم (UI)، مع تغيير قيم الخاصيّة flexWrap
.
إليك المثال (تجربة حية):
import React, { useState } from 'react';
import { Button, ScrollView, StatusBar, StyleSheet, Text, View } from 'react-native';
const App = () => {
const flexDirections = ['row', 'row-reverse', 'column', 'column-reverse'];
const justifyContents = [
'flex-start',
'flex-end',
'center',
'space-between',
'space-around',
'space-evenly',
];
const alignItemsArr = [
'flex-start',
'flex-end',
'center',
'stretch',
'baseline',
];
const wraps = ['nowrap', 'wrap', 'wrap-reverse'];
const directions = ['inherit', 'ltr', 'rtl'];
const [flexDirection, setFlexDirection] = useState(0);
const [justifyContent, setJustifyContent] = useState(0);
const [alignItems, setAlignItems] = useState(0);
const [direction, setDirection] = useState(0);
const [wrap, setWrap] = useState(0);
const hookedStyles = {
flexDirection: flexDirections[flexDirection],
justifyContent: justifyContents[justifyContent],
alignItems: alignItemsArr[alignItems],
direction: directions[direction],
flexWrap: wraps[wrap],
};
const changeSetting = (value, options, setterFunction) => {
if (value == options.length - 1) {
setterFunction(0);
return;
}
setterFunction(value + 1);
};
const [squares, setSquares] = useState([<Square />, <Square />, <Square />]);
return (
<>
<View style={{ paddingTop: StatusBar.currentHeight }} />
<View style={[styles.container, styles.playingSpace, hookedStyles]}>
{squares.map(elem => elem)}
</View>
<ScrollView style={[styles.container]}>
<View style={[styles.controlSpace]}>
<View style={styles.buttonView}>
<Button
title="Change Flex Direction"
onPress={() =>
changeSetting(flexDirection, flexDirections, setFlexDirection)
}
/>
<Text style={styles.text}>{flexDirections[flexDirection]}</Text>
</View>
<View style={styles.buttonView}>
<Button
title="Change Justify Content"
onPress={() =>
changeSetting(
justifyContent,
justifyContents,
setJustifyContent
)
}
/>
<Text style={styles.text}>{justifyContents[justifyContent]}</Text>
</View>
<View style={styles.buttonView}>
<Button
title="Change Align Items"
onPress={() =>
changeSetting(alignItems, alignItemsArr, setAlignItems)
}
/>
<Text style={styles.text}>{alignItemsArr[alignItems]}</Text>
</View>
<View style={styles.buttonView}>
<Button
title="Change Direction"
onPress={() => changeSetting(direction, directions, setDirection)}
/>
<Text style={styles.text}>{directions[direction]}</Text>
</View>
<View style={styles.buttonView}>
<Button
title="Change Flex Wrap"
onPress={() => changeSetting(wrap, wraps, setWrap)}
/>
<Text style={styles.text}>{wraps[wrap]}</Text>
</View>
<View style={styles.buttonView}>
<Button
title="Add Square"
onPress={() => setSquares([...squares, <Square/>])}
/>
</View>
<View style={styles.buttonView}>
<Button
title="Delete Square"
onPress={() =>
setSquares(squares.filter((v, i) => i != squares.length - 1))
}
/>
</View>
</View>
</ScrollView>
</>
);
};
const styles = StyleSheet.create({
container: {
height: '50%',
},
playingSpace: {
backgroundColor: 'white',
borderColor: 'blue',
borderWidth: 3,
},
controlSpace: {
flexDirection: 'row',
flexWrap: 'wrap',
backgroundColor: '#F5F5F5',
},
buttonView: {
width: '50%',
padding: 10,
},
text: { textAlign: 'center' },
});
const Square = () => (
<View style={{
width: 50,
height: 50,
backgroundColor: randomHexColor(),
}} />
);
const randomHexColor = () => {
return '#000000'.replace(/0/g, () => {
return (~~(Math.random() * 16)).toString(16);
});
};
export default App;
الخاصيات
alignContent
تتحكّم بكيفيّة محاذاة الصّفوف وفق الاتجاه الآخر العموديّ عليه (cross direction)، متجاهلةً alignContent
للأب (parent)، ولمزيد من المعلومات يمكن زيارة الصفحة align-content
.
النوع | مطلوب |
---|---|
('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around') | لا |
alignItems
تحاذي المكونات الأبناء (children) وفق الاتجاه المتعامد مع اتجاه الصف، حيث تتحكّم الخاصيّة alignItems
بكيفيّة محاذاة المكوّنات الأبناء أفقيًّا، في حال كانت مصفوفةً عموديًّا، وتعمل بشكلٍ مشابهٍ للخاصيّة align-items
في (CSS (default:stretch، ويمكن زيارة الصّفحة align-items
لمزيدٍ من المعلومات.
النوع | مطلوب |
---|---|
('flex-start', 'flex-end', 'center', 'stretch', 'baseline') | لا |
alignSelf
تتحكّم هذه الخاصية بكيفيّة محاذاة المكوّن الابن وفق الاتجاه المتعامد مع اتجاه الصف متجاهلةً alignItems
للمكوّن الأب، وتعمل بشكلٍ مشابهٍ للخاصيّة align-self
في (CSS (default:auto، ويمكن زيارة الصّفحة align-self
لمزيدٍ من المعلومات.
النوع | مطلوب |
---|---|
('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline') | لا |
aspectRatio
تتحكم بمقاس بُعد (dimension) العقدة غير المحدَّد، وهذه الخاصّيّة غير معياريّةٍ، حيث تُستخدم فقط في React Native، ولا تُستخدم في CSS.
- تتحكم
aspectRatio
بمقاس البُعد غير المحدد (unset dimension) في العقد التي حُدد فيها العرض، أو الارتفاع. - تتحكم بمقاس العقدة وفق المحور المتعامد مع المحور الرئيسي (cross axis)، في حال لم يكن محددًا في العقد التي حدّد فيها الأساس المرن (flex basis).
- تقيس الأساس المرن من خلال دالّة القياس في العقد المزودة بدالّة قياسٍ.
- تتحكم بمقاس العقدة وفق المحور المتعامد مع المحور الرئيسيّ، في حال لم يكن محدّدًا في العقد المزودة بالتصغير (shrink)، أو التّكبير (grow) المرن.
- تأخذ الأبعاد الأصغرية، أو الأعظمية بعين الاعتبار.
النوع | مطلوب |
---|---|
عدد (number) | لا |
borderBottomWidth
تعمل بكيفية مشابهة للخاصيّة border-bottom-width
في CSS، ويمكن زيارة الصّفحة border-bottom-width
لمزيدٍ من المعلومات.
النوع | مطلوب |
---|---|
عدد (number) | لا |
borderEndWidth
تكافئ الخاصيّة borderRightWidth
عندما يكون الاتّجاه من اليسار إلى اليمين ltr
، بينما تكافئ الخاصيّة borderLeftWidth
عندما يكون الاتّجاه من اليمين إلى اليسار rtl
.
النوع | مطلوب |
---|---|
عدد (number) | لا |
borderLeftWidth
تعمل بكيفيةمشابهة للخاصيّة border-left-width
في CSS، ويمكن زيارة الصّفحة border-left-width
لمزيدٍ من المعلومات.
النوع | مطلوب |
---|---|
عدد (number) | لا |
borderRightWidth
تعمل بكيفية مشابهة للخاصيّة border-right-width
في CSS، ويمكن زيارة الصّفحة border-right-width
لمزيدٍ من المعلومات.
النوع | مطلوب |
---|---|
عدد (number) | لا |
borderStartWidth
تكافئ الخاصيّة borderLeftWidth
عندما يكون الاتّجاه من اليسار إلى اليمين ltr
، بينما تكافئ الخاصيّة borderRightWidth
عندما يكون الاتّجاه من اليمين إلى اليسار rtl
.
النوع | مطلوب |
---|---|
عدد (number) | لا |
borderTopWidth
تعمل بكيفيةمشابهة للخاصيّة border-top-width
في CSS، ويمكن زيارة الصفحة border-top-width
لمزيدٍ من المعلومات.
النوع | مطلوب |
---|---|
عدد (number) | لا |
borderWidth
تعمل borderWidth
بكيفيةمشابهة للخاصيّة border-width
في CSS، ويمكن زيارة الصّفحة border-width
لمزيدٍ من المعلومات.
النوع | مطلوب |
---|---|
عدد (number) | لا |
bottom
تحدد مقدار إزاحة الحافّة السّفليّة للمكوّن بالبكسلات (pixels)، وتعمل بشكلٍ مشابهٍ للخاصيّة bottom
في CSS، إلا أنّه يجب استعمال عدد النقاط، أو النّسبة المئويّة فقط في React Native، ولا تُقبل الوحدة em، أو الوحدات الأخرى، ويمكن زيارة الصّفحة bottom
لمزيدٍ من المعلومات.
النوع | مطلوب |
---|---|
سلسلة نصية، عدد (number, string) | لا |
direction
تحدد اتجاه المحتوى (directional flow) لواجهة المستخدم، وقيمتها الافتراضية هي دائمًا inherit
، باستثناء عقدة الجذر (root node)، والتّي ستكون قيمتها قائمةً على أساس الموقع الحالي، ويمكن زيارة الصّفحة layout-direction لمزيدٍ من المعلومات.
النوع | مطلوب | المنصة |
---|---|---|
('inherit', 'ltr', 'rtl') | لا | iOS |
display
تحدّد نمط إظهار المكوّن، وتعمل بكيفيةمشابهة للخاصيّة display
في CSS، إلا أنها تدعم flex
، وnon
، حيث flex
هو النّمط الافتراضيّ.
النوع | مطلوب |
---|---|
('none', 'flex') | لا |
end
تكافئ الخاصيّة right
عندما يكون الاتجاه من اليسار إلى اليمين ltr
، بينما تكافئ الخاصيّة left
عندما يكون الاتجاه من اليمين إلى اليسار rtl
، ولهذا التنسيق أولويّةٌ على التنسيقين left
، و right
.
النوع | مطلوب |
---|---|
سلسلة نصية، عدد (number, string) | لا |
flex
تعمل flex
في React Native بكيفيةمختلفة عن عملها في CSS، فهي عددٌ وليست سلسلةً نصيّةً، وتعمل وفق Yoga.
- عندما تكون قيمة الخاصيّة
flex
عددًا موجبًا، فإنها تجعل المكوِّن مرنًا، ويتغيّر حجمه بشكلٍ يتناسب مع هذه القيمة، وبالتالي فالمكوِّن الذي تكون قيمةflex
= 2 سيَشغل حيّزًا مضاعفًا مقارنة بالمكون الذي تكون قيمةflex
= 1، وتكون القيمةflex: <positive number>
مساويةً للقيمةflexGrow: <positive number>, flexShrink: 1, flexBasis: 0
.
- عندما تكون قيمة الخاصيّة
flex
مساوية للصفر يصبح المكوّن غير مرنٍ، ويكون حجمه حسبwidth
، وheight
.
- عندما تكون قيمة الخاصيّة
flex
مساوية -1 يكون حجم المكوّن قائمًا علىwidth
، وheight
، إلا أنه يمكن تصغير القيمminWidth
، وminHeight
عند عدم توفّر حيّز كافٍ.
تعمل الخاصيّات flexGrow
، وflexShrink
، وflexBasis
بشكلٍ مشابهٍ لعملها في CSS.
النوع | مطلوب |
---|---|
عدد (number) | لا |
flexBasis
هي طريقةٌ مستقلّةٌ عن المحاور (axis-independent) لإعطاء العنصر حجمًا افتراضيًّا على طول المحور الرئيسي، ويتشابه إعداد flexBasis
للمكوّن الابن مع إعداد width
للمكوّن الابن، إذا كان الأب حاويةً ذات flexDirection: row
، أو مع إعداد height
للمكوّن الابن، إذا كان الأب عبارة عن حاويةً ذات flexDirection: column
. وتمثّل الخاصية flexBasis
الحجم الافتراضيّ للعنصر قبل أن تطبّق عليه الخاصيّات flexShrink
، وflexGrow
.
النوع | مطلوب |
---|---|
سلسلة نصية، عدد (number, string) | لا |
flexDirection
تحدد الاتجاه الذي سيتحرك به المكون الابن في الحاوية، فإذا كانت قيمتها row
فإنه سيتحرك من اليسار إلى اليمين، وإذا كانت column
فإنه سيتحرك من الأعلى إلى الأسفل، وتعمل flexDirection
بشكلٍ مشابهٍ للخاصيّة flex-direction
في CSS.
يمكنك زيارة الصّفحة flex-direction
لمزيدٍ من المعلومات.
النوع | مطلوب |
---|---|
('row', 'row-reverse', 'column', 'column-reverse') | لا |
flexGrow
تصف كيفيّة توزيع الفراغ بين المكوّنات الأبناء ضمن الحاوية على طول المحور الرئيسيّ، حيث توزّع الحاوية -بعد وضع المكونات الأبناء- الفراغات المتبقية بينها، بناءً على قيمة flexGrow
الخاصّة بكلّ مكوّن ابن، وتقبل flexGrow
أيّ قيمةٍ عشريّةٍ أكبر من الصفر، أو تساويها، والصفر هو قيمتها الافتراضيّة.
النوع | مطلوب |
---|---|
عدد (number) | لا |
flexShrink
تصف كيفيّة تصغير المكونات الأبناء على طول المحور الرئيسي عندما يكون الحجم الكليّ للمكوّنات الأبناء يفوق حجم الحاوية على طول المحور الرئيسيّ، وهذه الخاصيّة شبيهةٌ جدًا بالخاصيّة flexGrow
عند اعتبار الحجم الزائد بمثابة فراغٍ متبقٍّ سالب القيمة، وتتعاون هاتان الخاصيتان فيما بينهما للسماح للمكونات الأبناء بالتمدد والتقلص حسب الحاجة، وتقبل flexGrow
أيّ قيمةٍ عشريّةٍ أكبر من الصفر أو تساويها، والواحد هو قيمتها الافتراضيّة، وتقلص الحاوية المكونات الأبناء بشكلٍ متناسبٍ مع قيمة flexShrink
.
النوع | مطلوب |
---|---|
عدد (number) | لا |
flexWrap
تتحكم بقدرة المكوّنات الأبناء على الالتفاف عند بلوغها حافة الحاوية، وتعمل بشكلٍ مشابهٍ للخاصيّة flex-wrap
في CSS (default: nowrap)، ويمكن زيارة الصّفحة flex-wrap
لمزيدٍ من المعلومات.
لاحظ أنه لم تعد هذه الخاصية تعمل مع alignItems: stretch
، لذا يمكن استخدام alignItems: flex-start
(تفاصيل التغيير العاجل: react-native/releases ).
النوع | مطلوب |
---|---|
('wrap', 'nowrap', 'wrap-reverse') | لا |
height
تحدد ارتفاع المكوّن، و تعمل بكيفيةمشابهة للخاصيّة height
في CSS، إلا أنه يجب استعمال عدد النقاط، أو النسبة المئوية فقط في React Native، ولا تُقبل الوحدات em، أو الوحدات الأخرى. ويمكن زيارة الصّفحة height
لمزيدٍ من المعلومات.
النوع | مطلوب |
---|---|
سلسلة نصية، عدد (number, string) | لا |
justifyContent
تحاذي المكوّنات الأبناء وفق الاتّجاه الرئيسيّ، مثلاً تتحكّم هذه الخاصيّة بطريقة محاذاة المكونات الأبناء عموديّاً، إذا كانت منتشرةً عمودياً، وهي تشابه الخاصيّة justify-content
في (CSS (default: flex-start، ويمكن زيارة الصّفحة justifi-content
لمزيدٍ من المعلومات.
النوع | مطلوب |
---|---|
('flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly') | لا |
left
تحدّد مقدار إزاحة حافّة المكوّن اليسرى بالبكسلات، وتعمل بكيفيةمشابهة للخاصيّة left
في CSS، إلا أنه يجب استعمال عدد النقاط، أو النسبة المئوية فقط في React Native، ولا تُقبل الوحدات em، أو الوحدات الأخرى. ويمكن زيارة الصّفحة left
لمزيدٍ من المعلومات عن تأثير left
على التخطيط.
النوع | مطلوب |
---|---|
سلسلة نصية، عدد (number, string) | لا |
margin
لهذه الخاصية تأثير كلٍّ من الخاصيّات marginTop
، وmarginLeft
، وmarginBottom
، وmarginRight
. ويمكن زيارة الصّفحة margin
لمزيدٍ من المعلومات.
النوع | مطلوب |
---|---|
سلسلة نصية، عدد (number, string) | لا |
marginBottom
تعمل بشكلٍ مشابهٍ للخاصيّة margin-bottom
في CSS، ويمكن زيارة الصّفحة margin-bottom
لمزيدٍ من المعلومات.
النوع | مطلوب |
---|---|
سلسلة نصية، عدد (number, string) | لا |
marginEnd
تكافئ الخاصيّة marginRight
عندما يكون الاتجاه من اليسار إلى اليمين ltr
، بينما تكافئ الخاصيّة marginLeft
، عندما يكون الاتجاه من اليمين إلى اليسار rtl
.
النوع | مطلوب |
---|---|
سلسلة نصية، عدد (number, string) | لا |
marginHorizontal
لهذه الخاصية تأثير كلا الخاصيّتين marginLeft
، وmarginRight
.
النوع | مطلوب |
---|---|
سلسلة نصية، عدد (number, string) | لا |
marginLeft
تعمل بشكلٍ مشابهٍ للخاصيّة margin-left
في CSS، ويمكن زيارة الصّفحة margin-left
لمزيدٍ من المعلومات.
النوع | مطلوب |
---|---|
سلسلة نصية، عدد (number, string) | لا |
marginRight
تعمل بشكلٍ مشابهٍ للخاصيّة margin-right
في CSS، ويمكن زيارة الصّفحة margin-right
لمزيدٍ من المعلومات.
النوع | مطلوب |
---|---|
سلسلة نصية، عدد (number, string) | لا |
marginStart
تكافئ الخاصيّة marginLeft
عندما يكون الاتجاه من اليسار إلى اليمين ltr
، بينما تكافئ الخاصيّة marginRight
عندما يكون الاتجاه من اليمين إلى اليسار rtl
.
النوع | مطلوب |
---|---|
سلسلة نصية، عدد (number, string) | لا |
marginTop
تعمل بشكلٍ مشابهٍ للخاصيّة margin-top
في CSS، ويمكن زيارة الصّفحة margin-top
لمزيدٍ من المعلومات.
النوع | مطلوب |
---|---|
سلسلة نصية، عدد (number, string) | لا |
marginVertical
لهذه الخاصية تأثير كلا الخاصيّتين marginTop
، وmarginBottom
.
النوع | مطلوب |
---|---|
سلسلة نصية، عدد (number, string) | لا |
maxHeight
تحدّد مقدار الارتفاع الأكبر للمكوّن بالبكسلات، وتعمل بكيفيةمشابهة للخاصيّة max-height
في CSS، إلا أنه يجب استعمال عدد النقاط، أو النسبة المئوية فقط في React Native، ولا تُقبل الوحدات em، أو الوحدات الأخرى، ويمكن زيارة الصّفحة max-height
لمزيدٍ من المعلومات.
النوع | مطلوب |
---|---|
سلسلة نصية، عدد (number, string) | لا |
maxWidth
تحدّد مقدار العرض الأكبر للمكوّن بالبكسلات، وتعمل بكيفيةمشابهة للخاصيّة max-width
في CSS، إلا أنه يجب استعمال عدد النقاط، أو النسبة المئوية فقط في React Native، ولا تُقبل الوحدات em أو الوحدات الأخرى، ويمكن زيارة الصّفحة max-width
لمزيدٍ من المعلومات.
النوع | مطلوب |
---|---|
سلسلة نصية، عدد (number, string) | لا |
minHeight
تحدد مقدار الارتفاع الأصغر للمكوّن بالبكسلات، وتعمل بكيفيةمشابهة للخاصيّة min-height
في CSS، إلا أنه يجب استعمال عدد النقاط، أو النسبة المئوية فقط في React Native، ولا تُقبل الوحدات em، أو الوحدات الأخرى، ويمكن زيارة الصّفحة min-height
لمزيدٍ من المعلومات.
النوع | مطلوب |
---|---|
سلسلة نصية، عدد (number, string) | لا |
minWidth
تحدّد مقدار العرض الأصغر للمكوّن بالبكسلات، وتعمل بكيفيةمشابهة للخاصيّة min-width
في CSS، إلا أنه يجب استعمال عدد النقاط، أو النسبة المئوية فقط في React Native، ولا تُقبل الوحدات em، أو الوحدات الأخرى، ويمكن زيارة الصّفحة min-width
لمزيدٍ من المعلومات.
النوع | مطلوب |
---|---|
سلسلة نصية، عدد (number, string) | لا |
overflow
تتحكم بمَقاس المكونات الأبناء وطريقة إظهارها، حيث تجعل الواجهات مقصوصةً (clipped) عندما تكون قيمتها overflow: hidden
، بينما تجعل مَقاس إظهار المكوّنات الأبناء مستقلًا عن الأبعاد الأصغرية للمكونات الآباء إذا كانت قيمتها overflow: scroll
، وهي تشابه الخاصيّة overflow
في (CSS (default: visible. ويمكن زيارة الصّفحة overflow
لمزيدٍ من المعلومات.
النوع | مطلوب |
---|---|
('visible', 'hidden', 'scroll') | لا |
padding
لهذه الخاصية تأثير كلٍّ من الخاصيّات paddingTop
، وpaddingLeft
، وpaddingBottom
،وpaddingRight
، ويمكن زيارة الصّفحة padding
لمزيدٍ من المعلومات.
النوع | مطلوب |
---|---|
سلسلة نصية، عدد (number, string) | لا |
paddingBottom
تعمل بكيفية مشابهة للخاصيّة padding-Bottom
في CSS، ويمكن زيارة الصّفحة padding-bottom
لمزيدٍ من المعلومات.
النوع | مطلوب |
---|---|
سلسلة نصية، عدد (number, string) | لا |
paddingEnd
تكافئ الخاصيّة paddingRight
عندما يكون الاتجاه من اليسار إلى اليمين ltr
، بينما تكافئ الخاصيّة paddingLeft
عندما يكون الاتجاه من اليمين إلى اليسار rtl
.
النوع | مطلوب |
---|---|
سلسلة نصية، عدد (number, string) | لا |
paddingHorizontal
لهذه الخاصية تأثير كلا الخاصيّتين paddingLeft
، وpaddingRight
.
النوع | مطلوب |
---|---|
سلسلة نصية، عدد (number, string) | لا |
paddingLeft
تعمل بكيفية مشابهة للخاصيّة padding-left
في CSS، ويمكن زيارة الصّفحة padding-left
لمزيدٍ من المعلومات.
النوع | مطلوب |
---|---|
سلسلة نصية، عدد (number, string) | لا |
paddingRight
تعمل بكيفية مشابهة للخاصيّة padding-right
في CSS، ويمكن زيارة الصّفحة padding-right
لمزيدٍ من المعلومات.
النوع | مطلوب |
---|---|
سلسلة نصية، عدد (number, string) | لا |
paddingStart
تكافئ الخاصيّة paddingLeft
عندما يكون الاتجاه من اليسار إلى اليمين ltr
, بينما تكافئ الخاصيّة paddingRight
عندما يكون الاتجاه من اليمين إلى اليسار rtl
.
النوع | مطلوب |
---|---|
سلسلة نصية، عدد (number, string) | لا |
paddingTop
تعمل بكيفيةمشابهة للخاصيّة padding-top
في CSS، ويمكن زيارة الصّفحة padding-top
لمزيدٍ من المعلومات.
النوع | مطلوب |
---|---|
سلسلة نصية، عدد (number, string) | لا |
paddingVertical
لهذه الخاصية تأثير كلا الخاصيّتين paddingTop
، وpaddingBottom
.
النوع | مطلوب |
---|---|
سلسلة نصية، عدد (number, string) | لا |
position
تتشابه في عملها في React Native، وCSS عدا في طريقة توضّع المكونات، والتي تتم افتراضيًا بشكلٍ نسبيٍّ relative
للمكوّن الأب، وبالتالي سيؤول التوضّع المطلق absolute
دومًا إلى التوضّع النسبيّ، أي يجب وضع الخاصيّة position
على القيمة absolute
في المكون الابن، عند الرغبة بوضعه على بعدٍ محدّدٍ من البكسلات بالنسبة للمكون الأب.
عند الرغبة بوضع المكون الابن بالنسبة لشيءٍ غير المكوّن الأب يجب عدم استخدام التنسيق، بل استخدام شجرة المكوّن (component tree)، ويمكن زيارة الصّفحة yoga لمزيدٍ من المعلومات حول اختلاف الخاصيّة position
بين React Native، وCSS.
النوع | مطلوب |
---|---|
('absolute', 'relative') | لا |
right
تحدّد مقدار إزاحة حافة المكوّن اليمنى بالبكسلات، وتعمل بشكلٍ مشابهٍ للخاصيّة right
في CSS، إلا أنه يجب استعمال عدد النقاط، أو النسبة المئوية فقط في React Native، ولا تُقبل الوحدات em، أو الوحدات الأخرى، ويمكن زيارة الصّفحة right
لمزيدٍ من المعلومات عن تأثير right
على التخطيط.
النوع | مطلوب |
---|---|
سلسلة نصية، عدد (number, string) | لا |
start
تكافئ الخاصيّة left
عندما يكون الاتجاه من اليسار إلى اليمين ltr
، بينما تكافئ الخاصيّة right
عندما يكون الاتجاه من اليمين إلى اليسار rtl
، ولهذا التنسيق أولوية (precedence) على التنسيقين left
، وright
.
النوع | مطلوب |
---|---|
سلسلة نصية، عدد (number, string) | لا |
top
تحدد مقدار إزاحة حافة المكوّن العُليا بالبكسلات، وتعمل بشكلٍ مشابهٍ للخاصيّة top
في CSS، إلا أنه يجب استعمال عدد النقاط، أو النسبة المئوية فقط في React Native، ولا تُقبل الوحدات em، أو الوحدات الأخرى. ويمكن زيارة الصّفحة top لمزيدٍ من المعلومات عن تأثير top
على التخطيط.
النوع | مطلوب |
---|---|
سلسلة نصية، عدد (number, string) | لا |
width
تحدد عرض المكوّن، وتعمل بكيفيةمشابهة للخاصيّة width
في CSS، إلا أنه يجب استعمال عدد النقاط، أو النسبة المئوية فقطفي React Native، ولا تُقبل الوحدات em، أو الوحدات الأخرى، ويمكن زيارة الصّفحة width
لمزيدٍ من المعلومات.
النوع | مطلوب |
---|---|
سلسلة نصية، عدد (number, string) | لا |
zIndex
تتحكم بطريقة عرض المكونات بعضها فوق بعض، ولا تستخدم في الحالات الطبيعية، حيث تظهر المكونات وفقًا لشجرة المستند (document tree) بعرض المكونات الأقدم فوق الأحدث، وقد تُستخدم هذه الخاصية عند تنفيذ الحركات، أو في واجهات المستخدم الخاصة التي تتطلب نمط إظهارٍ خاصٍّ.
وتعمل بكيفيةمشابهة للخاصيّة z-index
في CSS، حيث تظهر المكونات ذات zIndex
الأكبر في الأعلى، ويمكن التفكير بهذه الخاصية كأنها تتوجّه من الهاتف المحمول إلى عين المستخدم، ويمكن زيارة الصّفحة z-index
لمزيدٍ من المعلومات.
عند استخدام هذه الخاصيّة على منصة IOS تحتاج أن تكون المكوّنات View
المستخدمة إخوةً (siblings) لتعمل كما ينبغي.
النوع | مطلوب |
---|---|
عدد (number) | لا |