كيف تتعامل مع مشكلة حجب لوحة المفاتيح للمدخلات باستخدام KeyboardAvoidingView؟

الإجابة المختصرة

نغلف حقول الإدخال بمكون KeyboardAvoidingView ونحدد خاصية behavior المناسبة ("padding" لنظام iOS و "height" أو التعديل في AndroidManifest لأندرويد).

الشرح

عند فتح لوحة المفاتيح الافتراضية، فإنها تغطي الجزء السفلي من الشاشة وقد تحجب حقل الإدخال الذي يكتب فيه المستخدم. يوفر KeyboardAvoidingView إمكانية ضبط التمرير تلقائياً ورفع الحاوية للأعلى بمقدار ارتفاع لوحة المفاتيح. في المشاريع الكبيرة غالباً ما تستخدم مكتبات متطورة مثل react-native-keyboard-controller لتجربة أكثر ثباتاً.

مثال بالكود

import { KeyboardAvoidingView, Platform, TextInput, StyleSheet } from 'react-native';

function LoginForm() {
  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      style={styles.container}
      keyboardVerticalOffset={Platform.OS === 'ios' ? 64 : 0}
    >
      <TextInput placeholder="اسم المستخدم" style={styles.input} />
      <TextInput placeholder="كلمة المرور" secureTextEntry style={styles.input} />
    </KeyboardAvoidingView>
  );
}

أخطاء شائعة

• استخدام behavior="padding" على أجهزة أندرويد دون داعٍ، حيث يتكفل نظام أندرويد بتعديل الشاشة افتراضياً عبر windowSoftInputMode="adjustResize".

أسئلة متابعة

• كيف تدير مدخلات النصوص المتعددة (TextInput) وحركات التبديل بين الحقول بالـ Focus؟

المصادر

• React Native docs — KeyboardAvoidingView