ورقة الأنماط (StyleSheet) في React Native

السلام عليكم و رحمة الله، 

اليوم معنا درس جديد في سلسلة أسميتها (React Native .. تعلمها معنا في عالم البرمجة)، و كما أشرت سابقاً قد كتبت مقالين حول مكتبة رياكت أشرح فيها الأساسيات المهمة لكل مبتدئ .. 

دروس سابقة:

https://3alam.pro/index.php/articles/javascript/jsx-in-react-reactnative

https://3alam.pro/index.php/articles/javascript/react-component-types-syntax

 

ننتقل الآن لنبدأ درسنا في رياكت نيتف باللغة العربية، مع أول شرح في بعنوان ( ورقة الأنماط StyleSheet ) لنبدأ على بركة الله:

تقبل مكونات الواجهة في React Native استدعاء خاصية تسمى بـ الأنماط (style) تحوي اسماً (name) وقيمة (value) تشبه الى حد ورقة الأنماط في ترميز CSS StyleSheets  مع استثناء واحد هو أنها أسماء تعريفها لا تحوي وجود مسافات أو علامات ترقيم أو علامة (-) كتضمين Css في شفرات الجافاسكربت . 

فمثلاً، في خصائص CSS نجد تسمية : border-radius لكن اذا ما نقلناها الى رياكت نيتف تصبح: borderRadius مع ملاحظة الحرف الكبير لكلمة Radius. 

لاستخدام و قراءة الأنماط في رياكت نيتف، يجب عليك تضمين مكون StyleSheet في رأس الملف الذي تحرره ليكون بامكانك التعامل معه بكل اريحية بأسلوب (render) .

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

اقتباس

الخطوة الأولى التي أنبهك عليها، أنه عند برمجتك لمشاريع كبيرة أنصحك بفصل ملفات الأنماط (style sheet) عن ملفاتك الخاصة بالجافاسكربت (JavaScript) لتكون أسهل قراءة من تضمينها في نفس الملف.

دعونا نلقي نظرة حول أنواع تضمين ملفات الأنماط مع/ و خاج ملفات الجافسكربت: (هذه الشفرات الصغيرة هي للشرح فقط، نفسها نفس حال كتابتها في مشاريعك البرمجية)

الأنماط المضمنة (Inline styles)

النمط المضمن هو أسلوب يتم تعريفه ضمن شفراتك البرمجية الخاصة بك مباشرة داخل نفس المكوّن (Component) كإدراجك للنمط داخل تعليمات HTML. 

class Tasks extends Component { 
  render () { 
    return ( 
      <View style = {{ flex: 1, justifyContent: 'center',  
        alignItems: 'center', backgroundColor: '#F5FCFF'  
      }}> 
        <Text style = {{ fontSize: 20, textAlign:  
          'center', margin: 10 }}> 
          Welcome to React Native! 
        </Text> 
      </View> 
    ) 
  } 
} 

كما ترى في في الشفرة السابقة، اضفنا التنسيقات لكن شفرتنا أصبحت غير واضحة تماماً و صعب قراءتها بسهولة و تحليلها. ماذا لو قمنا تضمين تنسيقات كبيرة و متعددة! هل سيصبح بامكانك تعديلها بسرعة! اذا دعونا لنستعمل أسلوبا مختلفاً في تحرير الأنماط خارج المكونات الرئيسة و شفراتك البرمجية داخل نفس الملف.

أسلوب (StyleSheet)، في نفس الملف

class Tasks extends Component { 
  render () { 
    return ( 
      <View style = { styles.container }> 
        <Text style = { styles.welcome }> 
          Welcome to React Native! 
        </Text> 
      </View> 
    ) 
  } 
} 

const styles = StyleSheet.create({ 
  container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF' 
  }, 
  welcome: { 
    fontSize: 20, 
    textAlign: 'center', 
    margin: 10 
  } 
)}; 

ماذا تلاحظ الآن، هذا أفضل بكثير من سابقه. قمنا بنقل أنماط المكون بعيدا عن شفراتك البرمجية و صنعنا له مرجعاً (reference) يقوم بتعريف تنسيقه دون الحاجة إلى إعادة كتابة نفس الأنماط المضمنة مراراً وتكراراً. 

و مع ذلك، فإن المشكلة التي نواجهها هو ملف طويل للغاية من تنسيقات قد تطول و تكبر كلما أضفنا مكونات أكبر و أكبر؛ هل سنضطر الى النزول للأسفل دائما لنعيد صياغة التنسيقات! لا طبعاً يمكننا استخدام أسلوب ثانٍ لنجعل تطبيقنا سهل التعديل و الاضافة عن طريق استيراد الملف لوحده.

الأنماط (StyleSheet) كملف مستورد!

قم بانشاء ملف .JS خاص و سمّه كما تشاء (styles.js):

const styles = StyleSheet.create({ 
  container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF' 
  }, 
  welcome: { 
    fontSize: 20, 
    textAlign: 'center', 
    margin: 10 
  } 
)}; 

export default styles; 

و استدعه في ملفك الرئيسي الخاص بالتطبيق كالآتي:

import styles from './styles.js'; 

class Tasks extends Component { 
  render(){ 
    return ( 
      <View style = { styles.container }> 
        <Text style = { styles.welcome }> 
          Welcome to React Native! 
        </Text> 
      </View> 
    ) 
  } 
} 

هذا أفضل بكثير من سابقيه. صح! جعلنا هذا التطبيق سهلا و بسيطا يقرؤه أي شخص و يفهمه دون الحاجة لتضييع الوقت. 

بعض النصائح:

هناك بعض الأساليب لا يعرفها البعض في جعل مكونك الخاص يقبل عدة تنسيقات بنفس النمط، كأن مثلا تعرف text1 و text2 بحجمين مختلفين لكن لهما نفس اللون عن طريق المصفوفات (Array)

export default class Tasks 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>
    );
  }
}

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

دائماً اجعل متغيراتك معرّفة باسم واضح سهلة القراءة. لا تضيع وقتك و أنت تائه بين الأسماء ان لم تكتبها بشكل جيد. 

نصل الى نهاية مقال اليوم، أي استفسار أو جملة مبهمة لا يردكم الكيبورد نحن متواجون باذن الله للرد على استفساراتكم. دعواتكم لنا. 

كلمات دليلية: react تعلم رياكت