كيفية جعل تطبيق React Native الخاص بك يستجيب بأمان عندما تنبثق لوحة المفاتيح

عندما تعمل مع تطبيقات React Native ، فإن المشكلة الشائعة هي أن لوحة المفاتيح ستطفو على السطح وإخفاء المدخلات النصية عندما تركز عليها. شيء من هذا القبيل:

هناك عدة طرق يمكنك تجنبها. بعضها بسيط ، والبعض الآخر أقل. يمكن تخصيص بعضها ، والبعض الآخر لا يستطيع ذلك. سأعرض لك اليوم 3 طرق مختلفة يمكنك تجنب لوحة المفاتيح في React Native.

لقد وضعت كل شفرة المصدر لهذا البرنامج التعليمي على جيثب.

KeyboardAvoidingView

الحل الأكثر بساطة ، والأسهل في التثبيت ، هو KeyboardAvoidingView. إنه مكون أساسي ولكنه بسيط أيضًا فيما يتعلق بما يفعله.

يمكنك أن تأخذ الكود الأساسي ، الذي يحتوي على لوحة المفاتيح التي تغطي المدخلات ، وتحديثها بحيث لم تعد المدخلات مغطاة. أول شيء عليك القيام به هو استبدال الحاوية View بلوحة المفاتيحAavidingView ثم قم بإضافة سند سلوك إليه. إذا نظرت إلى الوثائق التي سترى أنها تقبل 3 قيم مختلفة - الطول ، الحشو ، الموضع. لقد وجدت أن الحشو يعمل بأكثر طريقة يمكن التنبؤ بها. هذا ما سأستخدمه.

هذا يعطينا النتيجة التالية. إنه ليس مثاليًا ولكنه بالكاد لأي عمل ، إنه جيد جدًا.

شيء واحد تجدر الإشارة إليه هو أنه في السطر 30 ، سترى طريقة عرض ذات ارتفاع يصل إلى 60 بكسل. لقد وجدت أن تجنب لوحة المفاتيح لا يعمل تمامًا مع العنصر الأخير ، ولم يعمل إعداد الحشو / الهامش. لذلك أضفت عنصرًا جديدًا إلى "ارتطام" كل شيء ببضع بكسل.

يتم إخراج الصورة في الجزء العلوي من العرض عند استخدام هذا التطبيق البسيط. سأريكم كيف يمكنك إصلاح ذلك في النهاية.

مستخدمو Android: لقد وجدت أن هذا هو الخيار الأفضل / الوحيد. عن طريق إضافة android: windowSoftInputMode = "adjustResize" إلى AndroidManifest.xml ، سوف يتولى نظام التشغيل معظم العمل من أجلك ، وسوف تتولى لوحة المفاتيح KeyboardAvoidingView العناية بالباقي. مثال AndroidManifest.xml. ما تبقى من هذه المقالة على الأرجح لن ينطبق عليك.

لوحة المفاتيح Aware ScrollView

الخيار التالي هو عرض التمرير التفاعلي للوحة المفاتيح ، والذي يمنحك الكثير من الضجة. وراء الكواليس ، يستخدم ScrollView أو ListView للتعامل مع كل شيء (حسب المكون الذي تختاره) ، مما يجعل تفاعل التمرير سلسًا للغاية. الميزة الرئيسية الأخرى لهذه الحزمة هي أنها سوف تنتقل إلى المدخلات التي هي في التركيز ، والتي تمنح المستخدم تجربة رائعة.

يعد الاستخدام أيضًا سهلًا جدًا - تحتاج فقط إلى تبديل عرض الحاوية ، والبدء من جديد بالكود الأساسي ، وتعيين بعض الخيارات. إليك الرمز ، ثم سأصفه.

أولاً ، ترغب في تعيين الخلفية لون ScrollView بهذه الطريقة (إذا كنت ترغب في إعادة تمكين التمرير) فإن backgroundColor هو نفسه دائمًا. بعد ذلك ، ترغب في إخبار المكون بمكان الموضع الافتراضي بحيث ، بمجرد إغلاق لوحة المفاتيح ، فإنها تعود إلى تلك البقعة - عن طريق حذف هذه الدعامة ، قد تتعطل طريقة العرض في الجزء العلوي بعد إغلاق لوحة المفاتيح ، مثل هذا.

بعد أن تقوم resetScrollToCoords بدعوتك لتعيين contentContainerStyle - يستبدل هذا أساسًا أنماط العرض التي تحتوي عليها من قبل. آخر شيء أقوم به هو تعطيل شريط التمرير من تفاعل المستخدم. قد لا يكون هذا دائمًا منطقيًا بالنسبة لواجهة المستخدم الخاصة بك (مثل الواجهة حيث يقوم المستخدم بتحرير العديد من حقول ملف التعريف) ، لكن بالنسبة لهذا الحقل ، لا يعقل كثيرًا السماح للمستخدم بالتمرير يدويًا لأنه لا يوجد شيء للتمرير إلى.

عند الجمع بين هذه الدعائم معًا ، تحصل على النتيجة التالية ، والتي تعمل جيدًا.

وحدة لوحة المفاتيح

هذا هو الخيار اليدوي إلى حد بعيد ولكنه يمنحك أيضًا تحكمًا أكبر. ستستخدم مكتبة الرسوم المتحركة للمساعدة في إعطاء تفاعلات سلسة كما رأيت من قبل.

تتيح لك وحدة لوحة المفاتيح ، التي لم يتم توثيقها على موقع React Native ، الاستماع إلى أحداث لوحة المفاتيح المنبعثة من الجهاز. الأحداث التي ستستخدمها هي keyboardWillShow و keyboardWillHide ، والتي تعرض طول الوقت الذي ستستغرقه الرسوم المتحركة وموضع نهاية لوحة المفاتيح (من بين معلومات أخرى).

إذا كنت تستخدم نظام Android ، فستحتاج إلى استخدام keyboardDidShow و keyboardDidHide بدلاً من ذلك.

عندما يتم إرسال حدث keyboardWillShow ، ستقوم بتعيين متغير متحرك إلى الارتفاع النهائي للوحة المفاتيح وجعله ينشط خلال نفس مدة الرسوم المتحركة للوحة المفاتيح. يمكنك بعد ذلك استخدام هذه القيمة المتحركة لتعيين الحشو في أسفل الحاوية لإزاحة المحتوى بالكامل.

سأعرض الشفرة في لحظة ، لكن القيام بما وصفته أعلاه يترك لنا هذه التجربة.

أريد إصلاح تلك الصورة هذه المرة. للقيام بذلك ، ستستخدم قيمة متحركة لإدارة ارتفاع الصورة ، والتي ستقوم بضبطها عند فتح لوحة المفاتيح. إليك الكود.

هناك بالتأكيد الكثير من الحلول الأخرى. بدلاً من العرض العادي أو الصورة التي تستخدمها Animated.View و Animated.Image بحيث يمكن الاستفادة من القيم المتحركة. الجزء الممتع موجود فعلاً في وظائف keyboardWillShow و keyboardWillHide حيث تتغير القيم المتحركة.

ما يحدث هناك هو أن اثنين من القيم المتحركة تتغير بالتوازي والتي يتم استخدامها بعد ذلك لدفع واجهة المستخدم. هذا يتركك مع هذا.

إنه رمز لا بأس به ، لكنه رمز رائع. لديك الكثير من الخيارات لما يمكنك القيام به ويمكنك حقًا تخصيص التفاعل مع محتوى قلوبك.

الجمع بين الخيارات

إذا كنت تريد حفظ بعض الكود ، فيمكنك الجمع بين بعض الخيارات ، وهو ما أميل إلى فعله. على سبيل المثال ، من خلال الجمع بين الخيارين 1 و 3 ، ما عليك سوى القلق بشأن إدارة ارتفاع الصورة وتنشيطه.

الكود ليس أقل بكثير من مصدر الخيار 3 ، ولكن كلما زادت واجهة المستخدم تعقيدًا ، يمكن أن تساعدك قليلاً.

كل تطبيق له إيجابيات وسلبيات - سيتعين عليك اختيار الأنسب في ضوء تجربة المستخدم التي تهدف إليها.

هل أنت مهتم بمعرفة المزيد حول استخدام React Native لإنشاء تطبيقات الجوال عالية الجودة؟ الاشتراك في بلدي بالطبع رد فعل الأصلية!