الفرق بين المراجعتين ل"ReactNative/inputaccessoryview"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
(إضافة الصّفحة)
 
ط
 
(3 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة)
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE: InputAccessoryView في React Native}}</noinclude>
+
<noinclude>{{DISPLAYTITLE:المكون InputAccessoryView في React Native}}</noinclude>
مكوّن يُمكِّن من تخصيص عرض ملحق إدخال (input accessory view) لوحة المفاتيح على iOS. يُعرض ملحق الإدخال فوق لوحة المفاتيح كلّما رُكِّزَ على مكوّن TextInput  يمكن استخدام هذا المكون لإنشاء أشرطة أدوات (toolbars) مُخصَّصة.
+
مكوّن يُمكِّن من تخصيص عرض ملحق إدخال (input accessory view) لوحة المفاتيح على iOS. يُعرَض ملحق الإدخال فوق لوحة المفاتيح كلّما رُكِّزَ على مكوّن <code>[[ReactNative/textinput|TextInput]]</code> يمكن استخدام هذا المكون لإنشاء أشرطة أدوات (toolbars) مُخصَّصة.
  
لاستخدام هذا المكوّن، غلِّف شريط الأدوات المخصص الخاص بك باستخدام مكوّن InputAccessoryView ، واضبط خاصيَّة nativeID. بعد ذلك، مرّر خاصيَّة nativeID  كقيمة inputAccessoryViewID لأي مكوّن TextInput ترغب فيه. مثال بسيط:
+
لاستخدام هذا المكوّن، غلِّف شريط الأدوات المخصص الخاص بك باستخدام مكوّن <code>InputAccessoryView</code>، واضبط خاصيَّة <code>nativeID</code>. بعد ذلك، مرّر قيمة <code>nativeID</code> تلك لخاصيّة <code>inputAccessoryViewID</code> لأي مكوّن <code>TextInput</code> تريده.  
 +
 
 +
إليك مثال بسيط ([https://snack.expo.dev/@hsoubwiki/inputaccessoryview تجربة حية]):
  
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
سطر 40: سطر 42:
 
}
 
}
 
</syntaxhighlight>
 
</syntaxhighlight>
يمكن أيضًا استخدام هذا المكون لإنشاء مدخلات نصية (text inputs) مثبتة (مدخلات نصية مثبتة في الجزء العلوي من لوحة المفاتيح). للقيام بذلك، غلِّف مكوّن TextInput بمكون InputAccessoryView، دون تعيين الخاصيّة nativeID. على سبيل المثال، انظر ملفّ [https://github.com/facebook/react-native/blob/master/RNTester/js/examples/InputAccessoryView/InputAccessoryViewExample.js ‎‎<code>InputAccessoryViewExample.js</code>‎‎].
+
يمكن أيضًا استخدام هذا المكون لإنشاء مدخلات نصية (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>‎‎===
 
===‎‎<code>backgroundColor</code>‎‎===
سطر 47: سطر 49:
 
!مطلوب
 
!مطلوب
 
|-
 
|-
|لون
+
|[[ReactNative/colors|لون]]
 
|لا
 
|لا
 
|}
 
|}
  
 
===‎‎<code>nativeID</code>‎‎===
 
===‎‎<code>nativeID</code>‎‎===
مُعرِّف يُستخدَم لربط مكوِّن InputAccessoryView هذا بمكوِّن TextInput المحدد (أو بعدَّة مكوّنات TextInput).
+
مُعرِّف يُستخدَم لربط مكوِّن <code>InputAccessoryView</code> هذا بمكوِّن <code>[[ReactNative/textinput|TextInput]]</code> محدد (أو بعدَّة مكوّنات [[ReactNative/textinput|<code>TextInput</code>]]).
 
{| class="wikitable"
 
{| class="wikitable"
 
!النوع
 
!النوع
سطر 72: سطر 74:
 
==مشاكل معروفة==
 
==مشاكل معروفة==
  
  [https://github.com/facebook/react-native/issues/18997 react-native#18997] :  لا يدعم مكونات TextInput متعددة الأسطر.
+
* [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) سفلي.
[https://github.com/facebook/react-native/issues/20157 react-native#20157]:  لا يمكن استخدامها مع شريط علامات تبويب (tab bar) سفلي.
 
  
 
== مصادر ==
 
== مصادر ==
* [https://facebook.github.io/react-native/docs/inputaccessoryview صفحة InputAccessoryView في توثيق React Native الرسمي.]
 
 
[[تصنيف:ReactNative]]
 
[[تصنيف:ReactNative]]
 +
* [https://reactnative.dev/docs/inputaccessoryview صفحة InputAccessoryView في توثيق React Native الرسمي.]
 +
[[تصنيف:React Native Component]]

المراجعة الحالية بتاريخ 14:05، 9 أكتوبر 2021

مكوّن يُمكِّن من تخصيص عرض ملحق إدخال (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‎‎

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

مشاكل معروفة

مصادر