استفد من flexbox لإنشاء تخطيطات مرنة وسريعة الاستجابة في React Native.

Flexbox هي أداة CSS تتيح لك إنشاء تخطيطات مرنة أحادية البعد. يمكّنك من التحكم في موضع العناصر داخل الحاوية بحيث تتمتع بمزيد من التحكم في عرض المحتوى الخاص بك على الشاشة.

يوضح هذا البرنامج التعليمي كيفية استخدام flexbox في React Native لبناء تخطيطات مرنة وسريعة الاستجابة. ستتعلم كيفية وضع العناصر الفرعية لعنصر الحاوية باستخدام خصائص flexbox.

مقارنة سلوك Flexbox في React Native وتطوير الويب

إذا كنت ترغب في تنظيم محتوى عنصر الحاوية باستخدام flexbox في CSS العادي ، فأنت بحاجة إلى استخدام ملف العرض: فليكس ملكية.

حاوية { عرض: ثني؛ }

ولكن مع React Native ، لا تحتاج إلى ضبط العرض: فليكس ملكية. هذا لأن React Native يستخدم flexbox افتراضيًا لبناء التخطيطات.

فيما يلي بعض الاختلافات التي يجب وضعها في الاعتبار كيف يتصرف flexbox عند استخدامه لمحاذاة عناصر HTML في تطبيقات الويب مقابل سلوكها في React Native:

  • الاتجاه المرن التخلف عن السداد صف في تطبيقات الويب ولكنها الإعدادات الافتراضية عمود في React Native.
  • محاذاة المحتوى التخلف عن السداد تمتد في تطبيقات الويب و بداية مرنة في React Native.
    • instagram viewer
  • فليكس الافتراضي هو 1 في الويب و 0 في React Native.

استخدام خصائص Flexbox في React Native

تتيح لك خصائص Flexbox وصف كيفية محاذاة العناصر الفرعية لعنصر الحاوية. تحتاج إلى فهم هذه الخصائص لإنشاء تخطيطات معقدة تناسب احتياجات التطبيق الخاص بك.

1. استخدام الخاصية المرنة في React Native

ال ثني تحدد الخاصية كيفية عمل منظر مكون يملأ الشاشة. تقبل هذه الخاصية قيمة عدد صحيح أكبر من أو يساوي 0. تحدد القيمة جزء الشاشة الذي يحتوي على منظر يجب أن يأخذ المكون.

في هذا المثال ، تقوم بإنشاء شاشة ذات عرض واحد من ملف مكتبة مكونات React Native:

يستورد تتفاعل من"تتفاعل"
يستورد {StyleSheet، View} من"رد فعل أصلي"
يصدّرتقصيروظيفةبرنامج() {
يعود (
 <>
الخلفية: "# A020F0", ثني: 1}} /> 
 </>
 )
}

ها هو الناتج:

هنا قمت بتعيين 1 كقيمة مرنة لـ منظر عنصر. ال منظر يشغل المكون الشاشة بالكامل (100٪) لأنك قمت بتقسيم المساحة إلى مجموعة واحدة.

دعنا نلقي نظرة على مثال آخر:

يستورد تتفاعل من"تتفاعل"
يستورد {StyleSheet، View} من"رد فعل أصلي"
يصدّرتقصيروظيفةبرنامج() {
يعود (

الخلفية: "# A020F0", ثني: 1}} />
لون الخلفية: "# 7cb48f", ثني: 3 }} /> 
 </View>
 )
}

ها هي النتيجة:

هنا لديك اثنان منظر عناصر داخل آخر منظر عنصر. تم تعيين الطفل الأول على المرن: 1، والثاني مضبوط على المرن: 3. هذه القيم تقسم المسافة بين الطفلين. الأول يشغل 1/4 من الشاشة بينما يحتل الثاني 3/4 من الشاشة (تنقسم الشاشة إلى 4 كتل لأن 1 + 3 = 4).

2. استخدام خاصية flexDirection في React Native

إذا نظرت إلى لقطة الشاشة أعلاه ، سترى أن العناصر الفرعية فوق بعضها البعض. هذا هو السلوك الافتراضي لـ flexbox في React Native (الاتجاه المرن التخلف عن السداد إلى عمود قيمة).

يمكنك أيضًا ضبط ملف الاتجاه المرن ملكية ل صف, العمود العكسي، و صف عكس. في المثال التالي ، الاتجاه المرن تم تعيينه على صف، لذلك يتم وضع العناصر الفرعية جنبًا إلى جنب:

يستورد تتفاعل من"تتفاعل"
يستورد {StyleSheet، View} من"رد فعل أصلي"
مقدار ثابت الأنماط = StyleSheet.create ({
 حاوية: {
 لون الخلفية: "# 00FF00",
 ثني: 1,
 العناصر: "مركز",
 الاتجاه المرن: "صف",
 },
 مربع: {
 لون الخلفية: "# FF0000",
 عرض: 98,
 ارتفاع: 98,
 هامِش: 4,
 },
});
يصدّرتقصيروظيفةبرنامج() {
يعود (




 </View>
 )
}

ها هي النتيجة:

وضع الاتجاه المرن ل صف عكس يضع الأطفال جنبًا إلى جنب ، لكنه يعكس الترتيب. وبالمثل ، فإن العمود العكسي يضع الأطفال فوق بعضهم البعض ولكن في التسلسل المعاكس للتسلسل المحدد بواسطة عمود.

3. استخدام justifyContent في React Native

ال تبرير المحتوى تقوم الخاصية بمحاذاة العناصر الفرعية لحاوية flexbox على طول المحور الأساسي. إذا كان الاتجاه المرن تم تعيينه على عمود، فالمحور الأساسي هو المحور الرأسي. إذا تم التعيين على صف، ثم يكون أفقيًا.

القيم المحتملة لـ تبرير المحتوىنكون بداية مرنة, نهاية مرنة, مركز, الفضاء بين, حول الفضاء، و مسافات متساوية.

في المثال التالي ، الاتجاه المرن تم تعيينه للصف و تبرير المحتوىتم تعيينه على بداية مرنة:

يستورد تتفاعل من"تتفاعل"
يستورد {StyleSheet، View} من"رد فعل أصلي"
مقدار ثابت الأنماط = StyleSheet.create ({
 حاوية: {
 لون الخلفية: "# 00FF00",
 ثني: 1,
 تبرير المحتوى: "بداية مرنة",
 الاتجاه المرن: "صف",
 },
 مربع: {
 لون الخلفية: "# FF0000",
 عرض: 98,
 ارتفاع: 98,
 هامِش: 6,
 },
});
يصدّرتقصيروظيفةبرنامج() {
يعود (




 </View>
 )
}

ها هو الناتج:

إذا قمت بتغيير ملف الاتجاه المرن ل عمود, بداية مرنة سيطبق على المحور الرأسي. لذلك سوف تكون الصناديق مكدسة فوق بعضها البعض.

جلسة تبرير المحتوى إلى المركز (بينما المحور الأساسي هو ملف عمود) مراكز صناديق الأطفال الثلاثة.

4. استخدام alignItems في React Native

ال محاذاة العناصر تحدد الخاصية موضع العناصر في حاوية flexbox على طول المحور الثانوي. هذا هو عكس تبرير المحتوى. تماما مثل تبرير المحتوى يعتني بالمحاذاة الرأسية ، محاذاة العناصر يعالج المحاذاة الأفقية. القيم المحتملة لـ محاذاة العناصر نكون بداية مرنة, نهاية مرنة, مركز، و حدود.

في المثال التالي ، الاتجاه المرن تم تعيينه على صف و محاذاة العناصرتم تعيينه على بداية مرنة:

يستورد تتفاعل من"تتفاعل"
يستورد {StyleSheet، View} من"رد فعل أصلي"
مقدار ثابت الأنماط = StyleSheet.create ({
 حاوية: {
 لون الخلفية: "# 00FF00",
 ثني: 1,
 العناصر: "بداية مرنة",
 الاتجاه المرن: "صف",
 },
 مربع: {
 لون الخلفية: "# FF0000",
 عرض: 98,
 ارتفاع: 98,
 هامِش: 6,
 },
});
يصدّرتقصيروظيفةبرنامج() {
يعود (





 </View>
 )
}

ها هو الناتج:

إذا قمت بتعيين ملف الاتجاه المرن ملكية ل عمود و محاذاة العناصر ل مركز، سيتم وضع المربعات فوق بعضها البعض ، وسيتم محاذاة العناصر الفرعية للوسط.

5. استخدام alignSelf في React Native

ال محاذاة الذات تحدد الخاصية كيف يجب على الطفل الفردي محاذاة نفسه في الحاوية. يتجاوز محاذاة العناصر، والقيم الممكنة بداية مرنة, نهاية مرنة, مركز، و حدود.

في المثال التالي ، قمنا بتعيين افتراضي محاذاة العناصر الملكية وتجاوزها باستخدام محاذاة الذات:

يستورد تتفاعل من"تتفاعل"
يستورد {StyleSheet، View} من"رد فعل أصلي"
مقدار ثابت الأنماط = StyleSheet.create ({
 حاوية: {
 لون الخلفية: "# 00FF00",
 ثني: 1,
 العناصر: "مركز", 
 تبرير المحتوى: "مركز", 
 الاتجاه المرن: "صف",
 },
 مربع: {
 لون الخلفية: "# FF0000",
 عرض: 98,
 ارتفاع: 98,
 هامِش: 6,
 },
});
يصدّرتقصيروظيفةبرنامج() {
يعود (


محاذاة الذات: "نهاية مرنة" }]} />
محاذاة الذات: "بداية مرنة" }]} /> 
 )
}

ها هي النتيجة:

خصائص Flexbox الأخرى

هناك خاصيتان أخريان يمكنك استخدامهما عند إنشاء تخطيط flexbox في React Native:

  • فليكس راب: في حالة فائض أطفال الحاوية منه. يستخدم فليكس راب لتحديد ما إذا كان ينبغي تقليصها في سطر واحد أو لفها في سطور متعددة. القيم الممكنة لـ فليكس راب نكون نراب و طَوّق.
  • فجوة: أنت تستخدم ملف فجوة لإضافة فجوات بين عناصر الشبكة في الحاوية. يجب أن تكون قيمتها هي حجم الفجوة التي تريدها بين العناصر. يمكنك تحديد فجوة ملكية باستخدام وحدات CSS مثل px أو em أو rem.

تعرف على المزيد حول React Native

الآن بعد أن فهمت flexbox وتعرفت على كيفية استخدامه في تطبيق React Native الخاص بك لإنشاء تخطيطات مرنة وسريعة الاستجابة ، فقد حان الوقت لتتعمق في التفاصيل الدقيقة لـ React Native.