الفرق بين المراجعتين لصفحة: «ReactNative/components and apis»
إضافة الصّفحة |
لا ملخص تعديل |
||
| سطر 2: | سطر 2: | ||
يوفر React Native عددًا من المكونات المضمنة. ستجد قائمة كاملة بالمكونات وواجهات برمجة التطبيقات على الصفحة الرئيسيّة للتوثيق. إذا لم تكن متأكدًا من أين تبدأ، فألقِ نظرة على الفئات التالية: | يوفر React Native عددًا من المكونات المضمنة. ستجد قائمة كاملة بالمكونات وواجهات برمجة التطبيقات على الصفحة الرئيسيّة للتوثيق. إذا لم تكن متأكدًا من أين تبدأ، فألقِ نظرة على الفئات التالية: | ||
* المكونات الأساسيّة | * [[ReactNative/components and apis#.D8.A7.D9.84.D9.85.D9.83.D9.88.D9.86.D8.A7.D8.AA .D8.A7.D9.84.D8.A3.D8.B3.D8.A7.D8.B3.D9.8A.D9.91.D8.A9|المكونات الأساسيّة]] | ||
* واجهة المستخدم | * [[ReactNative/components and apis#.D9.88.D8.A7.D8.AC.D9.87.D8.A9 .D8.A7.D9.84.D9.85.D8.B3.D8.AA.D8.AE.D8.AF.D9.85|واجهة المستخدم]] | ||
* عروض القوائم | * [[ReactNative/components and apis#.D8.B9.D8.B1.D9.88.D8.B6 .D8.A7.D9.84.D9.82.D9.88.D8.A7.D8.A6.D9.85|عروض القوائم]] | ||
* ميّزات خاصّة بمنصّة iOS | * [[ReactNative/components and apis#.D9.85.D9.8A.D9.91.D8.B2.D8.A7.D8.AA .D8.AE.D8.A7.D8.B5.D9.91.D8.A9 .D8.A8.D9.85.D9.86.D8.B5.D9.91.D8.A9 iOS|ميّزات خاصّة بمنصّة iOS]] | ||
* ميّزات خاصّة بمنصّة Android | * [[ReactNative/components and apis#.D9.85.D9.8A.D9.91.D8.B2.D8.A7.D8.AA .D8.AE.D8.A7.D8.B5.D9.91.D8.A9 .D8.A8.D9.85.D9.86.D8.B5.D9.91.D8.A9 Android|ميّزات خاصّة بمنصّة Android]] | ||
* ميّزات أخرى | * [[ReactNative/components and apis#.D9.85.D9.8A.D9.91.D8.B2.D8.A7.D8.AA .D8.A3.D8.AE.D8.B1.D9.89|ميّزات أخرى]] | ||
مُجتمع React Native مجتمعٌ يضمّ آلاف المطورين. إذا كنت تبحث عن مكتبة تؤدّي مهمّة معينة، فابحث على سجل npm للحزم التي تشير إلى [https://www.npmjs.com/search?q=react-native&page=1&ranking=optimal <code>react-native</code>]، أو انظر مشروع [http://www.awesome-react-native.com/ Awesome React Native] الذي يوفّر قائمة منسّقة تحتوي على العديد من المكونات، والدروس، والأمثلة، ومواد أخرى.. | مُجتمع React Native مجتمعٌ يضمّ آلاف المطورين. إذا كنت تبحث عن مكتبة تؤدّي مهمّة معينة، فابحث على سجل npm للحزم التي تشير إلى [https://www.npmjs.com/search?q=react-native&page=1&ranking=optimal <code>react-native</code>]، أو انظر مشروع [http://www.awesome-react-native.com/ Awesome React Native] الذي يوفّر قائمة منسّقة تحتوي على العديد من المكونات، والدروس، والأمثلة، ومواد أخرى.. | ||
| سطر 14: | سطر 14: | ||
تستخدم معظم التطبيقات أحد هذه المكونات الأساسية، ستحتاج إلى التعرف عليها لبناء تطبيقات 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>]]: زر للتعامل مع اللمسات. | ||
* <code>Picker</code>: يُصيِّر مكونَ الانتقاء الأصيلٍ على iOS و Android. | * [[ReactNative/picker|<code>Picker</code>]]: يُصيِّر مكونَ الانتقاء الأصيلٍ على iOS و Android. | ||
* <code>Slider</code>: مكون يُستخدَم لتحديد قيمة واحدةٍ من بين مجموعة من القيم. | * [[ReactNative/slider|<code>Slider</code>]]: مكون يُستخدَم لتحديد قيمة واحدةٍ من بين مجموعة من القيم. | ||
* <code>Switch</code>: مُكوّن لإدخال قيمة منطقيّة (boolean input). | * [[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>: مشابه للمكوّن <code>FlatList</code> لكنّه يُستخدَم للقوائم المُقسَّمة إلى أقسام. | * [[ReactNative/sectionlist|<code>SectionList</code>]]: مشابه للمكوّن <code>FlatList</code> لكنّه يُستخدَم للقوائم المُقسَّمة إلى أقسام. | ||
==ميّزات خاصّة بمنصّة iOS== | ==ميّزات خاصّة بمنصّة iOS== | ||
توفر العديد من المكونات التالية أغلفةً لأصنافUIKit شائعة الاستخدام. | توفر العديد من المكونات التالية أغلفةً لأصنافUIKit شائعة الاستخدام. | ||
* <code>ActionSheetIOS</code>: واجهة برمجة تطبيقاتٍ (API) لعرض ورقة إجراءات في iOS أو ورقة مشاركة. | * [[ReactNative/actionsheetios|<code>ActionSheetIOS</code>]]: واجهة برمجة تطبيقاتٍ (API) لعرض ورقة إجراءات في iOS أو ورقة مشاركة. | ||
* <code>AlertIOS</code>: إنشاء مربع حوار تنبيه iOS مع رسالة أو إنشاء محثّ (prompt) للحصول على مدخلات من المستخدم. | * [[ReactNative/alertios|<code>AlertIOS</code>]]: إنشاء مربع حوار تنبيه iOS مع رسالة أو إنشاء محثّ (prompt) للحصول على مدخلات من المستخدم. | ||
* <code>DatePickerIOS</code>: مكون لاختيار التاريخ والوقت على iOS. | * [[ReactNative/datepickerios|<code>DatePickerIOS</code>]]: مكون لاختيار التاريخ والوقت على iOS. | ||
* <code>ImagePickerIOS</code>: اختيار صورة. | * [[ReactNative/imagepickerios|<code>ImagePickerIOS</code>]]: اختيار صورة. | ||
* <code>NavigatorIOS</code>: مكون تنقّل يُغلّف الصنف <code>UINavigationController</code>. | * [[ReactNative/navigatorios|<code>NavigatorIOS</code>]]: مكون تنقّل يُغلّف الصنف <code>UINavigationController</code>. | ||
* <code>ProgressViewIOS</code>: يُصيِّر عرض <code>UIProgressView</code>. | * [[ReactNative/progressviewios|<code>ProgressViewIOS</code>]]: يُصيِّر عرض <code>UIProgressView</code>. | ||
* <code>PushNotificationIOS</code>: التعامل مع التنبيهات، ما يشمل الصلاحيات وعلامة عدد التنبيهات فوق الأيقونة. | * [[ReactNative/pushnotificationios|<code>PushNotificationIOS</code>]]: التعامل مع التنبيهات، ما يشمل الصلاحيات وعلامة عدد التنبيهات فوق الأيقونة. | ||
* <code>SegmentedControlIOS</code>: يُصيِّر عرض <code>UISegmentedControl</code>. | * [[ReactNative/segmentedcontrolios|<code>SegmentedControlIOS</code>]]: يُصيِّر عرض <code>UISegmentedControl</code>. | ||
* <code>TabBarIOS</code>: يُصيِّر عرض <code>UITabViewController</code>. استعمله مع <code>TabBarIOS.Item</code>. | * [[ReactNative/tabbarios|<code>TabBarIOS</code>]]: يُصيِّر عرض <code>UITabViewController</code>. استعمله مع <code>TabBarIOS.Item</code>. | ||
==ميّزات خاصّة بمنصّة Android == | ==ميّزات خاصّة بمنصّة Android == | ||
توفر العديد من المكونات التالية أغلفةً لأصنافAndroid شائعة الاستخدام. | توفر العديد من المكونات التالية أغلفةً لأصنافAndroid شائعة الاستخدام. | ||
* <code>BackHandler</code>: التعرّف على ضغطة زر الجهاز الخاصّ بالتنقّل إلى الوراء. | * [[ReactNative/backhandler|<code>BackHandler</code>]]: التعرّف على ضغطة زر الجهاز الخاصّ بالتنقّل إلى الوراء. | ||
* <code>DatePickerAndroid</code>: مربع حوار اختيار التاريخ العادي في Android. | * [[ReactNative/datepickerandroid|<code>DatePickerAndroid</code>]]: مربع حوار اختيار التاريخ العادي في Android. | ||
* <code>DrawerLayoutAndroid</code>: يُصيِّر عرض <code>DrawerLayout</code>. | * [[ReactNative/drawerlayoutandroid|<code>DrawerLayoutAndroid</code>]]: يُصيِّر عرض <code>DrawerLayout</code>. | ||
* <code>PermissionsAndroid</code>: يوفر الوصول إلى نموذج الصلاحيات الذي ظهر في نسخة Android M.. | * <code>[[ReactNative/permissionsandroid|PermissionsAndroid]]</code>: يوفر الوصول إلى نموذج الصلاحيات الذي ظهر في نسخة Android M.. | ||
* <code>ProgressBarAndroid</code>: يُصيِّر عرض <code>ProgressBar</code>. | * [[ReactNative/progressbarandroid|<code>ProgressBarAndroid</code>]]: يُصيِّر عرض <code>ProgressBar</code>. | ||
* <code>TimePickerAndroid</code>: مربع حوار اختيار الوقت العادي في Android. | * [[ReactNative/timepickerandroid|<code>TimePickerAndroid</code>]]: مربع حوار اختيار الوقت العادي في Android. | ||
* <code>ToastAndroid</code>: إنشاء تنبيه Android Toast. | * [[ReactNative/toastandroid|<code>ToastAndroid</code>]]: إنشاء تنبيه Android Toast. | ||
* <code>ToolbarAndroid</code>: يُصيِّر عرض <code>Toolbar</code>. | * [[ReactNative/toolbarandroid|<code>ToolbarAndroid</code>]]: يُصيِّر عرض <code>Toolbar</code>. | ||
* <code>ViewPagerAndroid</code>: حاوية تسمح بالتنقل يسارًا ويمينًا بين العروض الأطفال (child views). | * [[ReactNative/viewpagerandroid|<code>ViewPagerAndroid</code>]]: حاوية تسمح بالتنقل يسارًا ويمينًا بين العروض الأطفال (child views). | ||
==ميّزات أخرى== | ==ميّزات أخرى== | ||
قد تكون هذه المكونات مفيدة في بعض التطبيقات. للحصول على قائمة شاملة بالمكونات وواجهات برمجة التطبيقات، انظر الصفحة الرئيسيّة للتوثيق. | قد تكون هذه المكونات مفيدة في بعض التطبيقات. للحصول على قائمة شاملة بالمكونات وواجهات برمجة التطبيقات، انظر الصفحة الرئيسيّة للتوثيق. | ||
* <code>ActivityIndicator</code>: يعرض مؤشر تحميلٍ دائري. | * <code>[[ReactNative/activityindicator|ActivityIndicator]]</code>: يعرض مؤشر تحميلٍ دائري. | ||
* <code>Alert</code>: يطلق مربع حوار تنبيه مع العنوان والرسالة المحددين. | * [[ReactNative/alert|<code>Alert</code>]]: يطلق مربع حوار تنبيه مع العنوان والرسالة المحددين. | ||
* <code>Animated</code>: مكتبة لإنشاء تحريكات مرنة وفعالة يسهل بناءها وصيانتها. | * [[ReactNative/animated|<code>Animated</code>]]: مكتبة لإنشاء تحريكات مرنة وفعالة يسهل بناءها وصيانتها. | ||
* <code>CameraRoll</code>: يوفر الوصول إلى معرض الكاميرا المحلي. | * [[ReactNative/cameraroll|<code>CameraRoll</code>]]: يوفر الوصول إلى معرض الكاميرا المحلي. | ||
* <code>Clipboard</code>: يوفر واجهة لضبط المحتوى والحصول عليه من الحافظة (clipboard) على كل من iOS و Android. | * [[ReactNative/clipboard|<code>Clipboard</code>]]: يوفر واجهة لضبط المحتوى والحصول عليه من الحافظة (clipboard) على كل من iOS و Android. | ||
* <code>Dimensions</code>: يوفر واجهة للحصول على أبعاد الجهاز. | * [[ReactNative/dimensions|<code>Dimensions</code>]]: يوفر واجهة للحصول على أبعاد الجهاز. | ||
* <code>KeyboardAvoidingView</code>: يوفر عرضًا يتنقل تلقائيًا بعيدًا عن لوحة المفاتيح الوهميّة. | * [[ReactNative/keyboardavoidingview|<code>KeyboardAvoidingView</code>]]: يوفر عرضًا يتنقل تلقائيًا بعيدًا عن لوحة المفاتيح الوهميّة. | ||
* <code>Linking</code>: يوفر واجهة عامة للتفاعل مع كل من روابط التطبيقات الواردة والصادرة. | * [[ReactNative/linking|<code>Linking</code>]]: يوفر واجهة عامة للتفاعل مع كل من روابط التطبيقات الواردة والصادرة. | ||
* <code>Modal</code>: يوفر طريقة بسيطة لتقديم المحتوى فوق عرضٍ مُطوَّق. | * [[ReactNative/modal|<code>Modal</code>]]: يوفر طريقة بسيطة لتقديم المحتوى فوق عرضٍ مُطوَّق. | ||
* <code>PixelRatio</code>: يوفر الوصول إلى كثافة البكسل (pixel density) الخاصّة بالجهاز. | * [[ReactNative/pixelratio|<code>PixelRatio</code>]]: يوفر الوصول إلى كثافة البكسل (pixel density) الخاصّة بالجهاز. | ||
* <code>RefreshControl</code>: يُستخدَم هذا المكون داخل ScrollView لإضافة وظيفة السحب للتحديث (pull to refresh). | * [[ReactNative/refreshcontrol|<code>RefreshControl</code>]]: يُستخدَم هذا المكون داخل ScrollView لإضافة وظيفة السحب للتحديث (pull to refresh). | ||
* <code>StatusBar</code>: مكون للتحكم في شريط حالة التطبيقات. | * <code>[[ReactNative/statusbar|StatusBar]]</code>: مكون للتحكم في شريط حالة التطبيقات. | ||
* <code>WebView</code>: مكون يعرض محتوى الويب في عرض أصيل (native view). | * [[ReactNative/webview|<code>WebView</code>]]: مكون يعرض محتوى الويب في عرض أصيل (native view). | ||
== مصادر == | == مصادر == | ||
* [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]] | ||
مراجعة 12:45، 2 فبراير 2019
يوفر React Native عددًا من المكونات المضمنة. ستجد قائمة كاملة بالمكونات وواجهات برمجة التطبيقات على الصفحة الرئيسيّة للتوثيق. إذا لم تكن متأكدًا من أين تبدأ، فألقِ نظرة على الفئات التالية:
- المكونات الأساسيّة
- واجهة المستخدم
- عروض القوائم
- ميّزات خاصّة بمنصّة iOS
- ميّزات خاصّة بمنصّة Android
- ميّزات أخرى
مُجتمع React Native مجتمعٌ يضمّ آلاف المطورين. إذا كنت تبحث عن مكتبة تؤدّي مهمّة معينة، فابحث على سجل npm للحزم التي تشير إلى react-native، أو انظر مشروع Awesome React Native الذي يوفّر قائمة منسّقة تحتوي على العديد من المكونات، والدروس، والأمثلة، ومواد أخرى..
المكونات الأساسيّة
تستخدم معظم التطبيقات أحد هذه المكونات الأساسية، ستحتاج إلى التعرف عليها لبناء تطبيقات React Native:
-
View: المكون الأساسي لبناء واجهة المستخدم. - :
Textمُكوّنٌ لعرض النص. -
Image: مُكوّنٌ لعرض الصور. -
TextInput: مُكوّنٌ لإدخال النص في التطبيق عبر لوحة المفاتيح. -
ScrollView: يوفرُ حاوية تمرير يمكنها احتواء عدّة مكونات. -
StyleSheet: يوفر طبقة تجريد مشابهة لأنماط CSS.
واجهة المستخدم
-
Button: زر للتعامل مع اللمسات. -
Picker: يُصيِّر مكونَ الانتقاء الأصيلٍ على iOS و Android. -
Slider: مكون يُستخدَم لتحديد قيمة واحدةٍ من بين مجموعة من القيم. -
Switch: مُكوّن لإدخال قيمة منطقيّة (boolean input).
عروض القوائم
على النّقيض من مكوّن ScrollView الأكثر عمومية، فالمُكوّنات التالية تعرض العناصر الظاهرة على الشاشة فقط. ما يجعلها مناسبة لعرض قوائم طويلة من البيانات.
-
FlatList: مكون لعرض قائمة قابلة للتمرير بطريقة فعّالة وأحسن أداءً. -
SectionList: مشابه للمكوّن FlatList لكنّه يُستخدَم للقوائم المُقسَّمة إلى أقسام.
ميّزات خاصّة بمنصّة iOS
توفر العديد من المكونات التالية أغلفةً لأصنافUIKit شائعة الاستخدام.
-
ActionSheetIOS: واجهة برمجة تطبيقاتٍ (API) لعرض ورقة إجراءات في iOS أو ورقة مشاركة. -
AlertIOS: إنشاء مربع حوار تنبيه iOS مع رسالة أو إنشاء محثّ (prompt) للحصول على مدخلات من المستخدم. -
DatePickerIOS: مكون لاختيار التاريخ والوقت على iOS. -
ImagePickerIOS: اختيار صورة. -
NavigatorIOS: مكون تنقّل يُغلّف الصنف UINavigationController. -
ProgressViewIOS: يُصيِّر عرض UIProgressView. -
PushNotificationIOS: التعامل مع التنبيهات، ما يشمل الصلاحيات وعلامة عدد التنبيهات فوق الأيقونة. -
SegmentedControlIOS: يُصيِّر عرض UISegmentedControl. -
TabBarIOS: يُصيِّر عرض UITabViewController. استعمله مع TabBarIOS.Item.
ميّزات خاصّة بمنصّة Android
توفر العديد من المكونات التالية أغلفةً لأصنافAndroid شائعة الاستخدام.
-
BackHandler: التعرّف على ضغطة زر الجهاز الخاصّ بالتنقّل إلى الوراء. -
DatePickerAndroid: مربع حوار اختيار التاريخ العادي في Android. -
DrawerLayoutAndroid: يُصيِّر عرض DrawerLayout. -
PermissionsAndroid: يوفر الوصول إلى نموذج الصلاحيات الذي ظهر في نسخة Android M.. -
ProgressBarAndroid: يُصيِّر عرض ProgressBar. -
TimePickerAndroid: مربع حوار اختيار الوقت العادي في Android. -
ToastAndroid: إنشاء تنبيه Android Toast. -
ToolbarAndroid: يُصيِّر عرض Toolbar. -
ViewPagerAndroid: حاوية تسمح بالتنقل يسارًا ويمينًا بين العروض الأطفال (child views).
ميّزات أخرى
قد تكون هذه المكونات مفيدة في بعض التطبيقات. للحصول على قائمة شاملة بالمكونات وواجهات برمجة التطبيقات، انظر الصفحة الرئيسيّة للتوثيق.
-
ActivityIndicator: يعرض مؤشر تحميلٍ دائري. -
Alert: يطلق مربع حوار تنبيه مع العنوان والرسالة المحددين. -
Animated: مكتبة لإنشاء تحريكات مرنة وفعالة يسهل بناءها وصيانتها. -
CameraRoll: يوفر الوصول إلى معرض الكاميرا المحلي. -
Clipboard: يوفر واجهة لضبط المحتوى والحصول عليه من الحافظة (clipboard) على كل من iOS و Android. -
Dimensions: يوفر واجهة للحصول على أبعاد الجهاز. -
KeyboardAvoidingView: يوفر عرضًا يتنقل تلقائيًا بعيدًا عن لوحة المفاتيح الوهميّة. -
Linking: يوفر واجهة عامة للتفاعل مع كل من روابط التطبيقات الواردة والصادرة. -
Modal: يوفر طريقة بسيطة لتقديم المحتوى فوق عرضٍ مُطوَّق. -
PixelRatio: يوفر الوصول إلى كثافة البكسل (pixel density) الخاصّة بالجهاز. -
RefreshControl: يُستخدَم هذا المكون داخل ScrollView لإضافة وظيفة السحب للتحديث (pull to refresh). -
StatusBar: مكون للتحكم في شريط حالة التطبيقات. -
WebView: مكون يعرض محتوى الويب في عرض أصيل (native view).