الفرق بين المراجعتين ل"ReactNative/components and apis"
اذهب إلى التنقل
اذهب إلى البحث
(إضافة الصّفحة) |
جميل-بيلوني (نقاش | مساهمات) ط |
||
| (3 مراجعات متوسطة بواسطة 3 مستخدمين غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:المكونات والواجهات البرمجية في React Native}}</noinclude> | <noinclude>{{DISPLAYTITLE:المكونات والواجهات البرمجية في React Native}}</noinclude> | ||
| − | يوفر React Native عددًا من المكونات | + | يوفر React Native عددًا من المكونات المضمنة، ستجد قائمة كاملة بالمكونات وواجهات برمجة التطبيقات على الصفحة الرئيسيّة للتوثيق، إذا لم تكن متأكدًا من أين تبدأ، فألقِ نظرة على الفئات آتية الذكر.<blockquote>مُجتمع React Native مجتمعٌ يضمّ آلاف المطورين، إذا كنت تبحث عن مكتبة تؤدّي مهمّة معينة فيمكنك ذلك من [[ReactNative/libraries#.D8.A7.D9.84.D8.A8.D8.AD.D8.AB .D8.B9.D9.86 .D9.85.D9.83.D8.AA.D8.A8.D8.A7.D8.AA|دليل إيجاد المكتبات]].</blockquote> |
| − | + | ==المكونات الأساسية== | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | ==المكونات | ||
تستخدم معظم التطبيقات أحد هذه المكونات الأساسية، ستحتاج إلى التعرف عليها لبناء تطبيقات React Native: | تستخدم معظم التطبيقات أحد هذه المكونات الأساسية، ستحتاج إلى التعرف عليها لبناء تطبيقات React Native: | ||
| − | * <code>View</code>: المكون الأساسي لبناء واجهة المستخدم. | + | * [[ReactNative/view|<code>View</code>]]: المكون الأساسي لبناء واجهة المستخدم. |
| − | * :<code>Text</code>مُكوّنٌ لعرض النص. | + | * :<code>[[ReactNative/text|Text]]</code>مُكوّنٌ لعرض النص. |
| − | * <code>Image</code>: مُكوّنٌ لعرض الصور. | + | * <code>[[ReactNative/image|Image]]</code>: مُكوّنٌ لعرض الصور. |
| − | * <code>TextInput</code>: مُكوّنٌ لإدخال النص في التطبيق عبر لوحة المفاتيح. | + | * [[ReactNative/textinput|<code>TextInput</code>]]: مُكوّنٌ لإدخال النص في التطبيق عبر لوحة المفاتيح. |
| − | * <code>ScrollView</code>: يوفرُ حاوية تمرير يمكنها احتواء عدّة مكونات. | + | * <code>[[ReactNative/scrollview|ScrollView]]</code>: يوفرُ حاوية تمرير يمكنها احتواء عدّة مكونات. |
| − | * <code>StyleSheet</code>: يوفر طبقة تجريد مشابهة لأنماط CSS. | + | * [[ReactNative/stylesheet|<code>StyleSheet</code>]]: يوفر طبقة تجريد مشابهة لأنماط [[CSS]]. |
==واجهة المستخدم== | ==واجهة المستخدم== | ||
| − | * <code>Button</code>: زر للتعامل مع اللمسات. | + | * [[ReactNative/button|<code>Button</code>]]: زر للتعامل مع اللمسات التي تصيّر بشكلٍ جميلٍ في أيّ منصّة. |
| − | * | + | * [[ReactNative/switch|<code>Switch</code>]]: يصير دخلًا ذا قيمة منطقيّة (boolean input). |
| − | + | ==القوائم== | |
| − | |||
| − | == | ||
على النّقيض من مكوّن <code>[[ReactNative/scrollview|ScrollView]]</code> الأكثر عمومية، فالمُكوّنات التالية تعرض العناصر الظاهرة على الشاشة فقط. ما يجعلها مناسبة لعرض قوائم طويلة من البيانات. | على النّقيض من مكوّن <code>[[ReactNative/scrollview|ScrollView]]</code> الأكثر عمومية، فالمُكوّنات التالية تعرض العناصر الظاهرة على الشاشة فقط. ما يجعلها مناسبة لعرض قوائم طويلة من البيانات. | ||
| − | * <code>FlatList</code>: | + | * [[ReactNative/flatlist|<code>FlatList</code>]]: لتصيير قائمة قابلة للتمرير بشكلٍ فعّالٍ. |
| − | * <code>SectionList</code>: | + | * [[ReactNative/sectionlist|<code>SectionList</code>]]: يُستخدَم للقوائم المُقسَّمة. |
| − | + | ||
| − | + | == ميزات خاصة بمنصة Android == | |
| − | + | توفر العديد من المكونات التالية أغلفةً لأصناف Android شائعة الاستخدام. | |
| − | + | *[[ReactNative/backhandler|<code>BackHandler</code>]]: التعرّف على ضغط زر الجهاز الخاصّ بالتنقّل إلى الوراء. | |
| − | + | *[[ReactNative/drawerlayoutandroid|<code>DrawerLayoutAndroid</code>]]: يُصيِّر واجهة <code>DrawerLayout</code>. | |
| − | + | * <code>[[ReactNative/permissionsandroid|PermissionsAndroid]]</code>: يوفر الوصول إلى نموذج الصلاحيات الذي ظهر في نسخة Android M. | |
| − | + | *[[ReactNative/toastandroid|<code>ToastAndroid</code>]]: إنشاء تنبيه Android Toast. | |
| − | + | ==ميزات خاصة بمنصة iOS== | |
| − | + | توفر العديد من المكونات التالية أغلفةً لأصناف UIKit شائعة الاستخدام. | |
| − | + | * [[ReactNative/actionsheetios|<code>ActionSheetIOS</code>]]: واجهة برمجة تطبيقاتٍ (API) لعرض ورقة إجراءات في iOS أو ورقة مشاركة. | |
| − | + | ==ميزات أخرى== | |
| − | == | ||
| − | توفر العديد من المكونات التالية أغلفةً | ||
| − | * <code>BackHandler</code>: التعرّف على | ||
| − | * | ||
| − | |||
| − | * <code>PermissionsAndroid</code>: يوفر الوصول إلى نموذج الصلاحيات الذي ظهر في نسخة Android M | ||
| − | |||
| − | * | ||
| − | |||
| − | |||
| − | * <code> | ||
| − | == | ||
قد تكون هذه المكونات مفيدة في بعض التطبيقات. للحصول على قائمة شاملة بالمكونات وواجهات برمجة التطبيقات، انظر الصفحة الرئيسيّة للتوثيق. | قد تكون هذه المكونات مفيدة في بعض التطبيقات. للحصول على قائمة شاملة بالمكونات وواجهات برمجة التطبيقات، انظر الصفحة الرئيسيّة للتوثيق. | ||
| − | * <code>ActivityIndicator</code>: يعرض مؤشر تحميلٍ دائري. | + | * <code>[[ReactNative/activityindicator|ActivityIndicator]]</code>: يعرض مؤشر تحميلٍ دائري. |
| − | * <code>Alert</code>: يطلق مربع حوار تنبيه مع العنوان والرسالة المحددين. | + | * [[ReactNative/alert|<code>Alert</code>]]: يطلق مربع حوار تنبيه مع العنوان والرسالة المحددين. |
| − | * <code>Animated</code>: مكتبة لإنشاء تحريكات مرنة وفعالة يسهل بناءها وصيانتها. | + | * [[ReactNative/animated|<code>Animated</code>]]: مكتبة لإنشاء تحريكات مرنة وفعالة يسهل بناءها وصيانتها. |
| − | * | + | * [[ReactNative/dimensions|<code>Dimensions</code>]]: يوفر واجهة للحصول على أبعاد الجهاز. |
| − | + | * [[ReactNative/keyboardavoidingview|<code>KeyboardAvoidingView</code>]]: يوفر واجهة تتنقل تلقائيًا بعيدًا عن لوحة المفاتيح الافتراضيّة. | |
| − | + | * [[ReactNative/linking|<code>Linking</code>]]: يوفر واجهة عامة للتفاعل مع كل من روابط التطبيقات الواردة والصادرة. | |
| − | * <code>KeyboardAvoidingView</code>: يوفر | + | * [[ReactNative/modal|<code>Modal</code>]]: يوفر طريقة بسيطة لتقديم المحتوى فوق واجهة تحتويه. |
| − | * <code>Linking</code>: يوفر واجهة عامة للتفاعل مع كل من روابط التطبيقات الواردة والصادرة. | + | * [[ReactNative/pixelratio|<code>PixelRatio</code>]]: يوفر الوصول إلى كثافة البكسل (pixel density) الخاصّة بالجهاز. |
| − | * <code>Modal</code>: يوفر طريقة بسيطة لتقديم المحتوى فوق | + | * [[ReactNative/refreshcontrol|<code>RefreshControl</code>]]: يُستخدَم هذا المكون داخل <code>[[ReactNative/scrollview|ScrollView]]</code> لإضافة وظيفة السحب للتحديث (pull to refresh). |
| − | * <code>PixelRatio</code>: يوفر الوصول إلى كثافة البكسل (pixel density) الخاصّة بالجهاز. | + | * <code>[[ReactNative/statusbar|StatusBar]]</code>: مكون للتحكم في شريط حالة التطبيق. |
| − | * <code>RefreshControl</code>: يُستخدَم هذا المكون داخل ScrollView لإضافة وظيفة السحب للتحديث (pull to refresh). | ||
| − | * <code>StatusBar</code>: مكون للتحكم في شريط حالة | ||
| − | |||
== مصادر == | == مصادر == | ||
* [https://facebook.github.io/react-native/docs/components-and-apis صفحة Components and APIs في توثيق React Native الرسمي.] | * [https://facebook.github.io/react-native/docs/components-and-apis صفحة Components and APIs في توثيق React Native الرسمي.] | ||
[[تصنيف:ReactNative]] | [[تصنيف:ReactNative]] | ||
| + | [[تصنيف:React Native Component]] | ||
المراجعة الحالية بتاريخ 14:07، 9 أكتوبر 2021
يوفر React Native عددًا من المكونات المضمنة، ستجد قائمة كاملة بالمكونات وواجهات برمجة التطبيقات على الصفحة الرئيسيّة للتوثيق، إذا لم تكن متأكدًا من أين تبدأ، فألقِ نظرة على الفئات آتية الذكر.
مُجتمع React Native مجتمعٌ يضمّ آلاف المطورين، إذا كنت تبحث عن مكتبة تؤدّي مهمّة معينة فيمكنك ذلك من دليل إيجاد المكتبات.
المكونات الأساسية
تستخدم معظم التطبيقات أحد هذه المكونات الأساسية، ستحتاج إلى التعرف عليها لبناء تطبيقات React Native:
-
View: المكون الأساسي لبناء واجهة المستخدم. - :
Textمُكوّنٌ لعرض النص. -
Image: مُكوّنٌ لعرض الصور. -
TextInput: مُكوّنٌ لإدخال النص في التطبيق عبر لوحة المفاتيح. -
ScrollView: يوفرُ حاوية تمرير يمكنها احتواء عدّة مكونات. -
StyleSheet: يوفر طبقة تجريد مشابهة لأنماط CSS.
واجهة المستخدم
-
Button: زر للتعامل مع اللمسات التي تصيّر بشكلٍ جميلٍ في أيّ منصّة. -
Switch: يصير دخلًا ذا قيمة منطقيّة (boolean input).
القوائم
على النّقيض من مكوّن ScrollView الأكثر عمومية، فالمُكوّنات التالية تعرض العناصر الظاهرة على الشاشة فقط. ما يجعلها مناسبة لعرض قوائم طويلة من البيانات.
-
FlatList: لتصيير قائمة قابلة للتمرير بشكلٍ فعّالٍ. -
SectionList: يُستخدَم للقوائم المُقسَّمة.
ميزات خاصة بمنصة Android
توفر العديد من المكونات التالية أغلفةً لأصناف Android شائعة الاستخدام.
-
BackHandler: التعرّف على ضغط زر الجهاز الخاصّ بالتنقّل إلى الوراء. -
DrawerLayoutAndroid: يُصيِّر واجهة DrawerLayout. -
PermissionsAndroid: يوفر الوصول إلى نموذج الصلاحيات الذي ظهر في نسخة Android M. -
ToastAndroid: إنشاء تنبيه Android Toast.
ميزات خاصة بمنصة iOS
توفر العديد من المكونات التالية أغلفةً لأصناف UIKit شائعة الاستخدام.
-
ActionSheetIOS: واجهة برمجة تطبيقاتٍ (API) لعرض ورقة إجراءات في iOS أو ورقة مشاركة.
ميزات أخرى
قد تكون هذه المكونات مفيدة في بعض التطبيقات. للحصول على قائمة شاملة بالمكونات وواجهات برمجة التطبيقات، انظر الصفحة الرئيسيّة للتوثيق.
-
ActivityIndicator: يعرض مؤشر تحميلٍ دائري. -
Alert: يطلق مربع حوار تنبيه مع العنوان والرسالة المحددين. -
Animated: مكتبة لإنشاء تحريكات مرنة وفعالة يسهل بناءها وصيانتها. -
Dimensions: يوفر واجهة للحصول على أبعاد الجهاز. -
KeyboardAvoidingView: يوفر واجهة تتنقل تلقائيًا بعيدًا عن لوحة المفاتيح الافتراضيّة. -
Linking: يوفر واجهة عامة للتفاعل مع كل من روابط التطبيقات الواردة والصادرة. -
Modal: يوفر طريقة بسيطة لتقديم المحتوى فوق واجهة تحتويه. -
PixelRatio: يوفر الوصول إلى كثافة البكسل (pixel density) الخاصّة بالجهاز. -
RefreshControl: يُستخدَم هذا المكون داخلScrollViewلإضافة وظيفة السحب للتحديث (pull to refresh). -
StatusBar: مكون للتحكم في شريط حالة التطبيق.