عرض مصدر ReactNative/keyboardavoidingview

<noinclude>{{DISPLAYTITLE:المكون KeyboardAvoidingView في React Native}}</noinclude>
يُستعمل هذا المكوّنٌ لحل مشكلة الواجهات التي تحتاج للنّقل بعيدا عن لوحة المفاتيح الوهميّة. يمكن للمكوّن ضبط ارتفاعه أو موضعه أو حاشيته السفلية (bottom padding) تلقائيًا بناءً على موقع لوحة المفاتيح.

==مثال==
إليك المثال التالي ([https://snack.expo.dev/@hsoubwiki/keyboardavoidingview تجربة حية]):<syntaxhighlight lang="javascript">
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;
</syntaxhighlight>
== الخاصيات ==
يرث خاصيّات المكوّن <code>[[ReactNative/view|View]]</code>.

===‎‎<code>behavior</code>‎‎===
حدّد كيفية التفاعل مع  وجود لوحة المفاتيح.

'''ملاحظة:''' يتفاعل كل من Android و iOS مع هذه الخاصية بشكل مختلف. قد يتصرف Android بشكل أفضل عند عدم تعيين خاصيّة <code>behavior</code>، في حين يتصرف iOS عكس ذلك.
{| class="wikitable"
!النوع
!مطلوب
|-
|<code>('height', 'position', 'padding')</code>
|لا
|}

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

{| class="wikitable"
!النوع
!مطلوب
|-
|[[ReactNative/view style props|View.style]]
|لا
|}
===‎‎<code>enabled</code>‎‎===
تفعيل أو تعطيل مكوّن <code>KeyboardAvoidingView</code>، القيمة الافتراضيّة هي <code>true</code>.
{| class="wikitable"
!النوع
!مطلوب
|-
|قيمة منطقيّة
|لا
|}
===‎‎<code>keyboardVerticalOffset</code>‎‎===
هذه هي المسافة بين الجزء العلوي من شاشة المستخدم وعرض react native، قد تكون غير صفرية (non-zero) في بعض حالات الاستخدام. القيمة الافتراضية هي <code>0</code>.

[[تصنيف:ReactNative]]
{| class="wikitable"
!النوع
!مطلوب
|-
|عدد
|لا
|}

== مصادر ==
* [https://reactnative.dev/docs/keyboardavoidingview صفحة KeyboardAvoidingView في توثيق React Native الرسمي.]