الخاصيات في React Native

الخاصيات (Props)

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

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

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

export default class Bananas extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      <Image source={pic} style={{width: 193, height: 110}}/>
    );
  }
}

// تخطّ هذا السطر إن كنت تستعمل أداة 
// Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => Bananas);

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

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

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

class Greeting extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Text>Hello {this.props.name}!</Text>
      </View>
    );
  }
}

export default class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

// تخطّ هذا السطر إن كنت تستعمل أداة 
// Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => LotsOfGreetings);

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

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

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

مصادر

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