التنسيق والأنماط في React Native
الأنماط
في React Native، لا تُستخدَم لغةٌ أو بنيةٌ خاصّة لتعريف الأنماط (styles). إذ تُنسِّق تطبيقك باستخدام JavaScript فقط لا غير. تقبل جميع المكوّنات الأساسيّة خاصيّةً تُسمّى style يُمكنك تمرير قيمٍ لها لتحديد تنسيق المكوّن. تتطابق أسماء وقيم الأنماط مع طريقة عملCSS على الويب في أغلب الأحيان، باستثناء أنّ كتابة الأسماء تُكتَب بصيغة camel case للأحرف، إذ نكتُب مثلًا backgroundColor بدلاً من background-color.
يُمكن لخاصيّة style أن تكون كائن JavaScript عاديّ. وهذه أبسط طريقةٍ، وهي الطريقة التي سنعتمدها عادةً في الأمثلة هذا التوثيق. لكن يمكنك كذلك تمرير مصفوفة من الأنماط، بحيث يكون للنمط الأخير في المصفوفة أسبقية على الأنماط التي تسبقه، لذا يمكنك استخدام هذه الطريقة لتوريث الأنماط.
لأنّ ازداد المكوّنات تزداد تعقيدًا أثناء التطوير، فغالباً ما سيكون استخدام StyleSheet.create لتحديد أنماط متعددة في مكان واحد طريقة أفضل وأنظف للحفاظ على شيفرة قابلة للصيانة والتعديل بسهولة. مثلًا:
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
const styles = StyleSheet.create({
bigblue: {
color: 'blue',
fontWeight: 'bold',
fontSize: 30,
},
red: {
color: 'red',
},
});
export default class LotsOfStyles extends Component {
render() {
return (
<View>
<Text style={styles.red}>just red</Text>
<Text style={styles.bigblue}>just bigblue</Text>
<Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
<Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
</View>
);
}
}
// تخطّ هذا السطر إن كنت تستعمل أداة
// Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => LotsOfStyles);
من الشائع جعلُ المكون الخاص بك يقبل خاصيّةً باسم style تُستخدم بدورها لتنسيق المكوّنات الأبناء. يمكنك اعتماد هذه الفكرة لجعل الأنماط "تنسابُ (cascade)" كما في CSS.
هناك عدّة طرائق لتخصيص نمط وتنسيق النصوص. انظر صفحة المكوّن Text لقائمة كاملة.
يمكنك الآن تجميل النصوص في تطبيقك. الخطوة التالية هي تعلّم كيفية التحكم في أحجام المكونات.