التنسيق والأنماط في React Native

ينسَّق التطبيق في React Native باستخدام JavaScript ، تقبل جميع المكوّنات الأساسيّة خاصيّةً تُسمّى ‎style‎ تحدد تنسيق المكوّن بتمرير قيمٍ لها. تتطابق أسماء وقيم الأنماط مع طريقة عملCSS على الويب في أغلب الأحيان، باستثناء أنّ الأسماء تُكتَب بصيغة سنام الجمل camelCase للأحرف، إذ نكتُب مثلًا ‎backgroundColor‎ بدلاً من ‎background-color‎.

يُمكن لخاصيّة ‎style‎ أن تكون كائن JavaScript بسيطًا عاديًّا، وهي الطريقة التي سنعتمدها عادةً في أمثلة هذا التوثيق. لكن يمكنك كذلك تمرير مصفوفة من الأنماط، بحيث يكون للنمط الأخير في المصفوفة أسبقيةً على الأنماط التي قبله، لذا يمكنك استخدام هذه الطريقة لتوريث الأنماط.

ولأنّ المكوّنات تزداد تعقيدًا أثناء التطوير غالباً ما سيكون استخدام ‎StyleSheet.create‎ لتجميع أنماطٍ متعددةٍ في مكانٍ واحدٍ طريقةً أفضل وأنظف للحفاظ على شيفرةٍ قابلةٍ للصيانة سهلة التعديل، انظر مثلًا الشيفرة التالية (تجربة حية):

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

const LotsOfStyles = () => {
    return (
      <View style={styles.container}>
        <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>
    );
};

const styles = StyleSheet.create({
  container: {
    marginTop: 50,
  },
  bigBlue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

export default LotsOfStyles;

من الشائع جعلُ المكون الخاص بك يقبل خاصيّةً باسم ‎ style‎ تُستخدَم بدورها لتنسيق المكوّنات الأبناء. يمكنك اعتماد هذه الفكرة لجعل الأنماط "تنسابُ (cascade)" أي تورَّث للأبناء كما في CSS.

هناك عدّة طرائق لتخصيص نمطِ وتنسيقِ النصوص، انظر صفحة تنسيق المكوّن ‎‎Text‎‎ لقائمةٍ كاملة، يمكنك الآن تجميل النصوص في تطبيقك!

الخطوة التالية هي تعلّم كيفية التحكم في أحجام المكونات.

مصادر

• صفحة Style في توثيق React Native الرسمي.