ReactNative/props

الخاصيات (Props)

يمكن تخصيص معظم المكونات أثناء إنشائها، وذلك باستخدام معاملاتٍ (parameters) مختلفةٍ، تسمى هذه المعاملاتُ بالخاصيّات (properties) ويُرمز إليها بالرمز ‎props‎.

على سبيل المثال، المُكوّن ‎Image‎ أحد مكوّنات React Native الأساسية، عند إنشاء صورة بهذا المكوّن يمكن استخدام خاصيّةٍ باسم ‎source‎ للتحكم في الصورة التي تريد عرضها عبر تمرير مصدرها كقيمة للخاصيّة:

import React from 'react';
import { Image } from 'react-native';

const Bananas = () => {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      <Image source={pic} style={{width: 193, height: 110, marginTop:50}}/>
    );
}

export default Bananas;

لاحظ الأقواس المعقوفة التي تُحيط ‎{pic}‎، تُضمِّن هذه الأقواس المتغيرَ ‎pic‎ في JSX. يمكنك وضع أي تعبير JavaScript داخل الأقواس في JSX.

يمكن استخدام ‎props‎ في المكوّنات الخاصة بك كذلك. مما يتيح لك إنشاء مكوّنٍ واحدٍ قابلٍ للاستعمال في عدّة أماكن مختلفةٍ في تطبيقك، مع تخصيص الخاصّيات لتكون مختلفةً حسب رغبتك. يمكنك الوصول إلى المُعاملات التي تُمرَّر إلى مُكوِّنك كخاصيّات عبر ‎الإحالة إلى props‎ في دالّة ‎render‎ الخاصة بالمكوّن. مثلًا:

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

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

const Greeting = (props) => {
    return (
      <View style={{alignItems: 'center'}}>
        <Text>Hello {props.name}!</Text>
      </View>
    );
}

export default LotsOfGreetings = () => {
    return (
      <View style={{alignItems: 'center', top: 50}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
}

يُمكن تخصيص ما يعرضه المكوّن ‎Greeting‎ باستخدام ‎name‎ كخاصيّة، لذا تمكّنّا من إعادة استخدام هذا المكون باسمٍ مختلفٍ في كل مرّة، يستخدم هذا المثال أيضًا المكوّن ‎Greeting‎ الذي أنشأناه في JSX تمامًا كما نستخدم المكونات المُضمَّنَة، وهذا ما يجعل React مكتبةً مذهلةً، فإذا وجدت أنّك بحاجةٍ إلى مجموعةٍ مختلفةٍ من المكوّنات الأولية في واجهة المستخدم التي تبنيها، فكلّ ما عليك فعله هو اختراع مكوّنات أخرى جديدة واستعمالها تمامًا مثل تلك المتوفّرة افتراضيًّا.

الشيء الجديد الآخر هنا هو المكوّن ‎View‎. وهو مكوّن مفيدٌ يعمل كحاويةٍ لاحتواء المكوّنات الأخرى للتحكم في تنسيقها وتخطيطها.

يمكنك إنشاء مجموعةٍ متنوعةٍ من الشاشات الثابتة (static screens) باستعمال الخاصيّات وما تعلّمته حتى الآن من مكوّناتٍ أساسيّةٍ مثل ‎Text‎، و‎Image‎، و‎View‎. لمعرفة كيفية جعل تطبيقك يتغيّر بمرور الوقت، ستحتاج إلى تعلّم كيفيّة التعامل مع الحالة.

مصادر

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