التخطيط باستخدام 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;
الخاصية 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.