خاصيات تخطيط المكونات (Layout Props) في React Native

لمزيد من المعلومات حول هذه الخاصيَّات يمكن زيارة الصّفحة التخطيط باستخدام 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)	لا

مصادر

صفحة Layout Props في توثيق React Native الرسميّ

خاصيات تخطيط المكونات (Layout Props) في React Native

مثال

الخاصيات

alignContent

alignItems

alignSelf

aspectRatio

borderBottomWidth

borderEndWidth

borderLeftWidth

borderRightWidth

borderStartWidth

borderTopWidth

borderWidth

bottom

direction

display

end

flex

flexBasis

flexDirection

flexGrow

flexShrink

flexWrap

height

justifyContent

left

margin

marginBottom

marginEnd

marginHorizontal

marginLeft

marginRight

marginStart

marginTop

marginVertical

maxHeight

maxWidth

minHeight

minWidth

overflow

padding

paddingBottom

paddingEnd

paddingHorizontal

paddingLeft

paddingRight

paddingStart

paddingTop

paddingVertical

position

right

start

top

width

zIndex