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