عرض مصدر ReactNative/inputaccessoryview

<noinclude>{{DISPLAYTITLE:المكون InputAccessoryView في React Native}}</noinclude>
مكوّن يُمكِّن من تخصيص عرض ملحق إدخال (input accessory view) لوحة المفاتيح على iOS. يُعرَض ملحق الإدخال فوق لوحة المفاتيح كلّما رُكِّزَ على مكوّن <code>[[ReactNative/textinput|TextInput]]</code>  يمكن استخدام هذا المكون لإنشاء أشرطة أدوات (toolbars) مُخصَّصة.

لاستخدام هذا المكوّن، غلِّف شريط الأدوات المخصص الخاص بك باستخدام مكوّن <code>InputAccessoryView</code>، واضبط خاصيَّة <code>nativeID</code>. بعد ذلك، مرّر قيمة <code>nativeID</code>  تلك لخاصيّة <code>inputAccessoryViewID</code> لأي مكوّن <code>TextInput</code> تريده. 

إليك مثال بسيط ([https://snack.expo.dev/@hsoubwiki/inputaccessoryview تجربة حية]):

<syntaxhighlight lang="javascript">
import React, { Component } from 'react';
import { View, ScrollView, TextInput, InputAccessoryView, Button } from 'react-native';

export default class UselessTextInput extends Component {
  constructor(props) {
    super(props);
    this.state = {text: 'Placeholder Text'};
  }

  render() {
    const inputAccessoryViewID = "uniqueID";
    return (
      <View>
        <ScrollView keyboardDismissMode="interactive">
          <TextInput
            style={{
              padding: 10,
              paddingTop: 50,
            }}
            inputAccessoryViewID={inputAccessoryViewID}
            onChangeText={text => this.setState({text})}
            value={this.state.text}
          />
        </ScrollView>
        <InputAccessoryView nativeID={inputAccessoryViewID}>
          <Button
            onPress={() => this.setState({text: 'Placeholder Text'})}
            title="Reset Text"
          />
        </InputAccessoryView>
      </View>
    );
  }
}
</syntaxhighlight>
يمكن أيضًا استخدام هذا المكون لإنشاء مدخلات نصية (text inputs) مثبتة (مدخلات نصية مثبتة في الجزء العلوي من لوحة المفاتيح). للقيام بذلك، غلِّف مكوّن <code>TextInput</code> بمكون <code>InputAccessoryView</code>، دون تعيين الخاصيّة <code>nativeID</code>. على سبيل المثال، انظر ملفّ [https://github.com/facebook/react-native/blob/master/RNTester/js/examples/InputAccessoryView/InputAccessoryViewExample.js ‎‎<code>InputAccessoryViewExample.js</code>‎‎].
== الخاصيات ==
===‎‎<code>backgroundColor</code>‎‎===
{| class="wikitable"
!النوع
!مطلوب
|-
|[[ReactNative/colors|لون]]
|لا
|}

===‎‎<code>nativeID</code>‎‎===
مُعرِّف يُستخدَم لربط مكوِّن <code>InputAccessoryView</code> هذا بمكوِّن <code>[[ReactNative/textinput|TextInput]]</code> محدد (أو بعدَّة مكوّنات [[ReactNative/textinput|<code>TextInput</code>]]).
{| class="wikitable"
!النوع
!مطلوب
|-
|سلسلة نصيَّة
|لا
|}

===‎‎<code>style</code>‎‎===
{| class="wikitable"
!النوع
!مطلوب
|-
|نمط
|لا
|}

==مشاكل معروفة==

* [https://github.com/facebook/react-native/issues/18997 react-native#18997] :  لا يدعم مكونات [[ReactNative/textinput|<code>TextInput</code>]] متعددة الأسطر.
* [https://github.com/facebook/react-native/issues/20157 react-native#20157]:  لا يمكن استخدامه مع شريط علامات تبويب (tab bar) سفلي.

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