عرض مصدر ReactNative/improvingux

<noinclude>{{DISPLAYTITLE:تحسين تجربة المستخدم في React Native}}</noinclude>

==إعداد مدخلات النص==
إدخال النصوص على الهواتف الذكية صعب، الشاشة صغيرة، ولوحة المفاتيح وهميّة. لكن يُمكنك تسهيل العمليّة حسب نوع البيانات التي تحتاج إليها عبر الإعداد الصّحيح لحقول الإدخال:

* ركّز على الحقل الأول تلقائيًا.
* استخدم نصًّا نائبًا (placeholder) كمثال لنوع البيانات المتوقع.
* تفعيل أو تعطيل خدمتي تكبير الأحرف التلقائي (autocapitalization) والتصحيح التلقائي(autocorrect).
*  اختيار نوع لوحة المفاتيح (كلوحة خاصّة بالبريد الإلكتروني، أو لوحة مفاتيح أرقام).
* تأكد من أن زر الإرجاع يركز على الحقل التالي أو يرسل النموذج.

انظر توثيق ‎<code>TextInput</code>‎ للمزيد من الإعدادات.

[textinput.mp4]

==إدارة التخطيط عندما تكون لوحة المفاتيح مرئية==
تأخذ لوحة المفاتيح نصف الشاشة تقريبًا. إذا كانت لديك عناصر تفاعلية يمكن للوحة المفاتيح أن تغطيها، فتأكد من إمكانية الوصول إليها من خلال استخدام المكون KeyboardAvoidingView.

[keyboardavoidingview.mp4]
==كبر المناطق القابلة للنقر==
من الصعب الضغط بدقّة على الأزرار في الهواتف المحمولة. تأكد من أن جميع العناصر التفاعلية ذات أبعاد 44 × 44 أو أكبر. إحدى الطرق للقيام بذلك هي بترك مساحة كافية للعنصر وزيادة الحشو (‎<code>padding</code>‎) وباستخدام الخاصيتين minWidth و minHeight. وكبديل، يمكنك استخدام الخاصيّة hitSlop لزيادة المساحة التفاعلية دون التأثير على التنسيق. إليك عرضًا توضيحيًا:

[hitslop.mp4]
==استخدم تموجات Android==
تستخدم واجهة ‎Android API 21‎+‎ تموجاتٍ لتزويد المستخدم باستجابة عندما يلمس منطقة قابلة للتفاعل على الشاشة. يوفر إطار React Native هذه الميّزة من خلال المكون TouchableNativeFeedback. سيؤدي استخدام هذا التأثير بدلاً من العتامة أو التمييز إلى زيادة ملاءمة التطبيق مع المنصّة. لكن احذر عند استخدام هذه الميّزة لأنها لا تعمل على نظام iOS أو على واجهات Android البرمجيّة الأقدم من النسخة 21، لذا ستحتاج إلى أحد المكونات الأخرى القابلة لللمس على iOS كحل يمكن الرجوع إليه (fallback). يمكنك استخدام مكتبةٍ مثل [https://github.com/react-community/react-native-platform-touchable react-native-platform-touchable] للتعامل مع الاختلافات بين المنصّات.
[ripple.mp4]
==قفل اتجاه الشاشة==
تعمل اتجاهات الشاشة المتعددة بشكل سليم افتراضيًّا إلا إذا كنت تستخدم واجهة Dimensions البرمجيّة ولا تتعامل مع تغييرات الاتجاه. إذا لم ترغب بدعم اتجاهات شاشة متعددة، فيمكنك قفل اتجاه الشاشة إما عموديًّا أو أفقيًّا.

على نظام التشغيل iOS، في علامة التبويب عام (General) وقسم معلومات النشر (Deployment Info) في Xcode، يمكنك تمكين اتجاه الجهاز (Device Orientation) الذي تريد دعمه (تأكد من تحديد iPhone من قائمة الأجهزة عند إجراء التغييرات).

على Android ، افتح ملف AndroidManifest.xml وداخل عنصر activity element، أضف ‎<code>'android:screenOrientation="portrait"'</code>‎ للقفل إلى الوضع الرأسي أو ‎<code>'android:screenOrientation="landscape"'</code>‎ للقفل إلى الوضع الأفقي.

==المزيد==
انظر [https://material.io/ Material Design] و[https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/ Human Interface Guidelines] لتعلم المزيد حول تصميم تطبيقات الجوّال.
== مصادر ==
* [https://facebook.github.io/react-native/docs/improvingux صفحة Improving User Experience في توثيق React Native الرسمي.]
[[تصنيف:ReactNative]]