المكون InputAccessoryView في React Native

مكوّن يُمكِّن من تخصيص عرض ملحق إدخال (input accessory view) لوحة المفاتيح على iOS. يُعرَض ملحق الإدخال فوق لوحة المفاتيح كلّما رُكِّزَ على مكوّن TextInput يمكن استخدام هذا المكون لإنشاء أشرطة أدوات (toolbars) مُخصَّصة.

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

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

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>
    );
  }
}

يمكن أيضًا استخدام هذا المكون لإنشاء مدخلات نصية (text inputs) مثبتة (مدخلات نصية مثبتة في الجزء العلوي من لوحة المفاتيح). للقيام بذلك، غلِّف مكوّن TextInput بمكون InputAccessoryView، دون تعيين الخاصيّة nativeID. على سبيل المثال، انظر ملفّ ‎‎InputAccessoryViewExample.js‎‎.

الخاصيات

‎‎backgroundColor‎‎

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

‎‎nativeID‎‎

مُعرِّف يُستخدَم لربط مكوِّن InputAccessoryView هذا بمكوِّن TextInput محدد (أو بعدَّة مكوّنات TextInput).

النوع	مطلوب
سلسلة نصيَّة	لا

‎‎style‎‎

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

مشاكل معروفة

• react-native#18997 : لا يدعم مكونات TextInput متعددة الأسطر.
• react-native#20157: لا يمكن استخدامه مع شريط علامات تبويب (tab bar) سفلي.

مصادر

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