KeyboardAvoidingView في React Native
مكوّنٌ لحل مشكلة العروض التي تحتاج للنّقل بعيدا عن لوحة المفاتيح الوهميّة. يمكن للمكوّن ضبط ارتفاعه أو موضعه أو حشوته السفلية (bottom padding) تلقائيًا بناءً على موقع لوحة المفاتيح.
مثال
import {KeyboardAvoidingView} from 'react-native';
<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
... your UI ...
</KeyboardAvoidingView>;
[example.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.
| النوع | مطلوب |
|---|---|
| عدد | لا |