المكون KeyboardAvoidingView في React Native

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

مثال

إليك المثال التالي (تجربة حية):

import React from 'react';
import { View, KeyboardAvoidingView, TextInput, StyleSheet, Text, Platform, TouchableWithoutFeedback, Button, Keyboard  } from 'react-native';

const KeyboardAvoidingComponent = () => {
  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === "ios" ? "padding" : "height"}
      style={styles.container}
    >
      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
        <View style={styles.inner}>
          <Text style={styles.header}>Header</Text>
          <TextInput placeholder="Username" style={styles.textInput} />
          <View style={styles.btnContainer}>
            <Button title="Submit" onPress={() => null} />
          </View>
        </View>
      </TouchableWithoutFeedback>
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  inner: {
    padding: 24,
    flex: 1,
    justifyContent: "space-around"
  },
  header: {
    fontSize: 36,
    marginBottom: 48
  },
  textInput: {
    height: 40,
    borderColor: "#000000",
    borderBottomWidth: 1,
    marginBottom: 36
  },
  btnContainer: {
    backgroundColor: "white",
    marginTop: 12
  }
});

export default KeyboardAvoidingComponent;

الخاصيات

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

‎‎behavior‎‎

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

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

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

‎‎contentContainerStyle‎‎

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

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

‎‎enabled‎‎

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

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

‎‎keyboardVerticalOffset‎‎

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

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

مصادر

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