ReactNative/flexbox

التخطيط Layout باستخدام Flexbox

يمكن للمكوّن تحديد تخطيط أبنائه باستخدام خوارزمية Flexbox التي صُمِّمَت لتوفير تخطيط متناسق على أحجام شاشات مختلفة.

ستعتمد عادةً على كلّ من الخاصيّات ‎flexDirection‎، و‎alignItems‎، و‎justifyContent‎ للحصول على التصميم الصحيح.

يعمل Flexbox في React Native كما يعمل في CSS على الويب مع اختلافات طفيفة، حيث تختلف الإعدادات الافتراضية، إذ أنّ القيمة الافتراضيّة للخاصيّة ‎flexDirection‎ هي ‎column‎ عوضًا عن ‎row‎، والقيمة الافتراضيّة للخاصيّة ‎alignContent‎ هي ‎flex-start‎ عوضًا عن stretch‎، والقيمة الافتراضيّة للخاصيّة ‎flexShrink‎ هي ‎0‎ عوضًا عن 1‎، وخاصيّة ‎flex‎ لا تدعم إلّا عددًا واحدًا كقيمة.

الخاصية Flex

ستحدّد الخاصية flex كيف "تملأ" عناصرك المساحةَ المتاحة على طول المحور الرئيسي، حيث تُقسَم المساحة وفقًا للخاصية flex لكل عنصر.

تكون العروض views ذات اللون الأحمر والأصفر والأخضر في المثال التالي كلها عناصرًا أبناء في عرض الحاوية التي لها الخاصية flex: 1. يستخدم العرض ذو اللون الأحمر الخاصية flex: 1، ويستخدم العرض ذو اللون الأصفر الخاصية flex: 2، ويستخدم العرض ذو اللون الأخضر الخاصية flex: 3، أي 1 + 2 + 3 = 6، مما يعني أن العرض الأحمر سيحصل على 1/6 من المساحة، ويحصل العرض الأصفر على 2/6 من المساحة، والأخضر على 3/6 من اللمساحة.

import React from "react";
import { StyleSheet, Text, View } from "react-native";

const Flex = () => {
  return (
    <View style={[styles.container, {
      // ‫جرّب ضبط الخاصية flexDirection على القيمة row
      flexDirection: "column"
    }]}>
      <View style={{ flex: 1, backgroundColor: "red" }} />
      <View style={{ flex: 2, backgroundColor: "darkorange" }} />
      <View style={{ flex: 3, backgroundColor: "green" }} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
});

export default Flex;

الخاصية flexDirection

تتحكّم الخاصية flexDirection في اتجاه ترتيب أبناء عقدةٍ ما، حيث يُشار إلى هذا الاتجاه أيضًا بالمحور الرئيسي main axis. يُشمَّى المحور cross axis هو المحور المتعامد مع المحور الرئيسي، أو المحور الذي توضَع فيه الأسطر التي يمكنها الالتفاف.

• column (القيمة الافتراضية): تحاذي هذه القيمة العناصر الأبناء من الأعلى إلى الأسفل. إذا كان الالتفاف wrapping مفعَّلًا، فسيبدأ السطر التالي على يمين العنصر الأول أعلى الحاوية.
• row: تحاذي هذه القيمة العناصر الأبناء من اليسار إلى اليمين. إذا كان الالتفاف wrapping مفعَّلًا، فسيبدأ السطر التالي أسفل العنصر الأول على يسار الحاوية.
• column-reverse: تحاذي هذه القيمة العناصر الأبناء من الأسفل إلى الأعلى. إذا كان الالتفاف wrapping مفعَّلًا، فسيبدأ السطر التالي على يمين العنصر الأول في أسفل الحاوية.
• row-reverse: تحاذي هذه القيمة العناصر الأبناء من اليمين إلى اليسار. إذا كان الالتفاف wrapping مفعَّلًا، فسيبدأ السطر التالي أسفل العنصر الأول على يمين الحاوية.

اطّلع على المزيد من الخاصية flexDirection.

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

export default class FlexDirectionBasics extends Component {
  render() {
    return (
      <View style={{flex: 1, flexDirection: 'row'}}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

// تخطّ هذا السطر إن كنت تستعمل أداة 
// Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => FlexDirectionBasics);

الخاصية ‎justifyContent‎

تُحدِّد الخاصية ‎justifyContent‎ كيفيّة توزيع المسافة بين العناصر وحولها على امتداد المحور الرئيسي. هل تريد توزيع الأطفال بجوار بعضها بدءًا من بداية المحور الرئيسي، أو المركز، أو في النهاية، أو متباعدةً بالتساوي؟ الخيارات المتاحة هي ‎flex-start‎، و‎center‎، و‎flex-end‎، و‎space-around‎، و‎space-between‎، ‎space-evenly‎. جرّب تعديل قيمة الخاصيّة ‎justifyContent‎ وانظر النتيجة لتفهم آلية التنسيق، يُمكنك كذلك تغيير قيمة ‎flexDirection‎ إلى ‎row‎ لتفهم أكثر:

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

export default class JustifyContentBasics extends Component {
  render() {
    return (
      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-between',
      }}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

// تخطّ هذا السطر إن كنت تستعمل أداة 
// Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => JustifyContentBasics);

الخاصية ‎alignItems‎

تؤدي إضافة ‎alignItems‎ إلى نمطِ مكونٍ إلى تحديد محاذاة الأطفال على طول المحور الثانوي (إذا كان المحور الأساسي صفًا (‎row‎)، فسيكون المحور الثانوي هو العمود (‎column‎) والعكس صحيح). هل تريد مُحاذاة الأطفال في البداية، أو المركز، أو النهاية، أو أن تمتدّ لملء المساحة؟ الخيارات المتاحة هي ‎flex-start‎، و‎center‎، و‎flex-end‎، و‎stretch‎.

ملاحظة: ليكون للخاصيّة ‎stretch‎ (التي تتحكّم بالتمدّد) تأثير، يجب ألا يكون للأطفال بعدٌ ثابت على طول المحور الثانوي. في المثال التالي، ضبط ‎alignItems: stretch‎ لا تأثير له حتى تُزالَ القيمة ‎width: 50‎ من الأطفال (جرّب تغيير مختلف القيم وانظر النّتيجة):

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

export default class AlignItemsBasics extends Component {
  render() {
    return (
      // Try setting `alignItems` to 'flex-start'
      // Try setting `justifyContent` to `flex-end`.
      // Try setting `flexDirection` to `row`.
      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'stretch',
      }}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{height: 50, backgroundColor: 'skyblue'}} />
        <View style={{height: 100, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

// تخطّ هذا السطر إن كنت تستعمل أداة 
// Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);

المزيد من المعلومات

هذه هي الأساسيات، لكن هناك عدّة أنماط أخرى قد تحتاج إليها لتخطيط تطبيقاتك. اطّلع على قائمة خاصيّات التخطيط الكاملة هنا.

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

مصادر

• صفحة Layout with Flexbox في توثيق React Native الرسمي.