الفرق بين المراجعتين لصفحة: «ReactNative/props»
لا ملخص تعديل |
|||
| سطر 3: | سطر 3: | ||
يمكن تخصيص معظم المكونات أثناء إنشائها، وذلك باستخدام معاملات (parameters) مختلفة. تسمى هذه المعاملاتُ بالخاصيّات (properties) ويُرمز إليها بالرمز <code>props</code>. | يمكن تخصيص معظم المكونات أثناء إنشائها، وذلك باستخدام معاملات (parameters) مختلفة. تسمى هذه المعاملاتُ بالخاصيّات (properties) ويُرمز إليها بالرمز <code>props</code>. | ||
على سبيل المثال، المُكوّن <code>Image</code> أحد مكوّنات React Native الأساسية. عند إنشاء صورة بهذا المكوّن، يمكنك استخدام خاصيّة باسم <code>source</code> للتحكم في الصورة التي تريد عرضها عبر تمرير مصدرها كقيمة للخاصيّة: | على سبيل المثال، المُكوّن [[ReactNative/image|<code>Image</code>]] أحد مكوّنات React Native الأساسية. عند إنشاء صورة بهذا المكوّن، يمكنك استخدام خاصيّة باسم <code>source</code> للتحكم في الصورة التي تريد عرضها عبر تمرير مصدرها كقيمة للخاصيّة: | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
import React, { Component } from 'react'; | import React, { Component } from 'react'; | ||
| سطر 58: | سطر 58: | ||
يُمكن تخصيص ما يعرضه المكوّن <code>Greeting</code> باستخدام <code>name</code> كخاصيّة، لذا تمكّنّا من إعادة استخدام هذا المكون في كل مرّة باسم مختلف. يستخدم هذا المثال أيضًا المكوّن <code>Greeting</code> الذي أنشأناه في JSX تمامًا كما نستخدم المكونات المُضمَّنَة. هذا ما يجعل React مكتبة مذهلة، فإذا وجدت أنّك بحاجة إلى مجموعة مختلفة من المكوّنات الأولية في واجهة المستخدم التي تبنيها، فكلّ ما عليك فعله هو اختراع مكوّنات أخرى جديدة واستعمالها تمامًا مثل تلك المتوفّرة افتراضيًّا. | يُمكن تخصيص ما يعرضه المكوّن <code>Greeting</code> باستخدام <code>name</code> كخاصيّة، لذا تمكّنّا من إعادة استخدام هذا المكون في كل مرّة باسم مختلف. يستخدم هذا المثال أيضًا المكوّن <code>Greeting</code> الذي أنشأناه في JSX تمامًا كما نستخدم المكونات المُضمَّنَة. هذا ما يجعل React مكتبة مذهلة، فإذا وجدت أنّك بحاجة إلى مجموعة مختلفة من المكوّنات الأولية في واجهة المستخدم التي تبنيها، فكلّ ما عليك فعله هو اختراع مكوّنات أخرى جديدة واستعمالها تمامًا مثل تلك المتوفّرة افتراضيًّا. | ||
الشيء الجديد الآخر هنا هو المكوّن <code>View</code>. وهو مكوّن مفيدٌ يعمل كحاوية لاحتواء المكونات الأخرى للتحكم في تنسيقها وتخطيطها. | الشيء الجديد الآخر هنا هو المكوّن <code>[[ReactNative/view|View]]</code>. وهو مكوّن مفيدٌ يعمل كحاوية لاحتواء المكونات الأخرى للتحكم في تنسيقها وتخطيطها. | ||
يمكنك إنشاء مجموعة متنوعة من الشاشات الثابتة (static screens) باستعمال الخاصيّات وما تعلّمته حتى الآن من مكوّنات أساسيّة مثل <code>Text</code> | يمكنك إنشاء مجموعة متنوعة من الشاشات الثابتة (static screens) باستعمال الخاصيّات وما تعلّمته حتى الآن من مكوّنات أساسيّة مثل [[ReactNative/text|<code>Text</code>]]، و<code>[[ReactNative/image|Image]]</code>، و<code>[[ReactNative/view|View]]</code>. لمعرفة كيفية جعل تطبيقك يتغيّر بمرور الوقت، ستحتاج إلى تعلّم [[ReactNative/state|كيفيّة التعامل مع الحالة]]. | ||
== مصادر == | == مصادر == | ||
* [https://facebook.github.io/react-native/docs/props صفحة Props في توثيق React Native الرسمي.] | * [https://facebook.github.io/react-native/docs/props صفحة Props في توثيق React Native الرسمي.] | ||
[[تصنيف:ReactNative]] | [[تصنيف:ReactNative]] | ||
مراجعة 14:32، 23 يناير 2019
الخاصيات (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. لمعرفة كيفية جعل تطبيقك يتغيّر بمرور الوقت، ستحتاج إلى تعلّم كيفيّة التعامل مع الحالة.