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

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

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

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

يعمل Flexbox في React Native كما يعمل في CSS على الويب مع اختلافات طفيفة. إذ تختلف الإعدادات الافتراضية، إذ أنّ القيمة الافتراضيّة للخاصيّة ‎flexDirection‎ هي ‎column‎ عوضًا عن ‎row‎، وخاصيّة ‎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 الرسمي.