التخطيط باستخدام Flexbox في React Native

التخطيط 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;

اتّجاه Flex

إضافة الخاصيّة ‎flexDirection‎ إلى نمط مُكوِّن (أي الخاصيّةُ ‎style‎) يُحدِّد المحور الرئيسي (primary axis) لتخطيطه. أي ما إذا كان تنظيم الأطفال أفقياً (صف، ‎row‎) أم رأسياً (عمود، ‎column‎). مع ‎column‎ كقيمة افتراضيّة، أي أنّ الأطفال يُنظّمون رأسيًّا إن لم تُحدّد قيمة لهذه الخاصيّة. مثال (جرّب تغيير قيمة ‎flexDirection‎ إلى ‎column‎ أسفله):

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 الرسمي.