KeyboardAvoidingView في React Native

مكوّنٌ لحل مشكلة العروض التي تحتاج للنّقل بعيدا عن لوحة المفاتيح الوهميّة. يمكن للمكوّن ضبط ارتفاعه أو موضعه أو حشوته السفلية (bottom padding) تلقائيًا بناءً على موقع لوحة المفاتيح.

مثال

import {KeyboardAvoidingView} from 'react-native';

<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
  ... your UI ...
</KeyboardAvoidingView>;

ملف:exampleKeyboard.gif

الخاصيات

يرث خاصيّات المكوّن View.

‎‎behavior‎‎

حدّد كيفية التفاعل مع وجود لوحة المفاتيح.

ملاحظة: يتفاعل كل من Android و iOS مع هذه الخاصية بشكل مختلف. قد يتصرف Android بشكل أفضل عند عدم تعيين خاصيّة behavior، في حين يتصرف iOS عكس ذلك.

النوع	مطلوب
enum('height', 'position', 'padding')	لا

‎‎contentContainerStyle‎‎

نمط عرض حاوية المحتوى (content container) عندما تكون قيمة الخاصيّة behavior القيمةَ 'position'.

النوع	مطلوب
View.style	لا

‎‎enabled‎‎

تفعيل أو تعطيل مكوّن KeyboardAvoidingView، القيمة الافتراضيّة هي true.

النوع	مطلوب
قيمة منطقيّة	لا

‎‎keyboardVerticalOffset‎‎

هذه هي المسافة بين الجزء العلوي من شاشة المستخدم وعرض react native، قد تكون غير صفرية (non-zero) في بعض حالات الاستخدام. القيمة الافتراضية هي 0.

النوع	مطلوب
عدد	لا

مصادر

• صفحة KeyboardAvoidingView في توثيق React Native الرسمي.