الفرق بين المراجعتين لصفحة: «ReactNative/textinput»

من موسوعة حسوب
→ التعديل السابق
مرئينص الويكي
رفع المحتوى
طلا ملخص تعديل
 
(15 مراجعة متوسطة بواسطة 3 مستخدمين غير معروضة)
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:المكون TextInput في ReactNative}}</noinclude>
<noinclude>{{DISPLAYTITLE:المكون TextInput في ReactNative}}</noinclude>
يُعتبر المكون <code>TextInput</code> من المكونات الأساسية في React Native، حيث يسمح للمستخدم بإدخال النصوص عن طريق لوحة المفاتيح، ويمكن التحكم في نوع الإدخال (نص، وأرقام، وبريد إلكتروني، وكلمة مرور ...إلخ) ونوع لوحة المفاتيح وغيرها من الخاصيات (props) التي سيأتي بيانها لاحقًا.
يُعَدّ المكون <code>TextInput</code> من المكونات الأساسية في [[ReactNative|React Native]]، حيث يسمح للمستخدم بإدخال النصوص عن طريق لوحة المفاتيح، ويمكن التحكم في نوع الإدخال (نص، وأرقام، وبريد إلكتروني، وكلمة مرور ...إلخ) ونوع لوحة المفاتيح وغيرها من الخاصيات (props) التي سيأتي بيانها لاحقًا.


توضح الشيفرة أدناه كيفية استخدام المكون <code>TextInput</code>، حيث يتم الاستماع للحدث <code>onChangeText</code> والذي يُحدِّث القيمة الخاصة بالمكون <code>TextInput</code> والمخزنة في الحالة (State) عند الضغط على أي زر في لوحة المفاتيح. وتوجد أحداث أخرى مثل <code>onSubmitEditing</code> و <code>onFocus</code> ستُشرح وظائفها لاحقًا.
توضِّح الشيفرة أدناه كيفية استخدام المكون <code>TextInput</code>، حيث يُستمع للحدث <code>onChangeText</code> الذي يُحدِّث القيمة الخاصة بالمكون <code>TextInput</code> والمخزّنة في الحالة (State) عند الضغط على أيّ زرّ في لوحة المفاتيح. وتوجد أحداث أخرى، مثل: <code>onSubmitEditing</code> و<code>onFocus</code> ستُشرح وظائفها لاحقًا.


<syntaxhighlight class="react">import React from 'react';
إليك المثال التالي ([https://snack.expo.dev/@hsoubwiki/textinput تجربة حية]):
import { TextInput } from 'react-native';


const UselessTextInput = () =&gt; {
<syntaxhighlight class="react" lang="javascript">import React from "react";
   const [value, onChangeText] = React.useState('Useless Placeholder');
import { SafeAreaView, StyleSheet, TextInput } from "react-native";
 
const UselessTextInput = () => {
   const [text, onChangeText] = React.useState("Useless Text");
  const [number, onChangeNumber] = React.useState(null);


   return (
   return (
     &lt;TextInput
     <SafeAreaView>
      style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
      <TextInput
       onChangeText={text =&gt; onChangeText(text)}
        style={styles.input}
      value={value}
        onChangeText={onChangeText}
     /&gt;
        value={text}
       />
      <TextInput
        style={styles.input}
        onChangeText={onChangeNumber}
        value={number}
        placeholder="useless placeholder"
        keyboardType="numeric"
      />
     </SafeAreaView>
   );
   );
}
};
 
const styles = StyleSheet.create({
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },
});


export default UselessTextInput;</syntaxhighlight>
export default UselessTextInput;</syntaxhighlight>
تُستخدم الدالتان <code>.focus()</code> و <code>.blur()</code> للتركيز على العنصر أو لنقل التركيز بعيدًا عنه بطريقة برمجية.
تُستخدم الدالتان <code>()focus.</code> و<code>()blur.</code> للتركيز على العنصر أو لنقل التركيز بعيدًا عنه بطريقة برمجية.


تكون بعض الخاصيّات متاحة فقط في إحدى الحالتين <code>multiline={true/false}‎</code>، مثل خواص الإطارات (<code>borderBottomColor</code> و <code>borderLeftWidth</code> و غيرها) حيث لا تعمل هذه الخواص مع الخاصية <code>multiline=true</code>، ويمكن الحصول على نفس تأثير هذه الخواص عن طريق وضع المكون <code>TextInput</code> داخل المكون <code>View</code> وتطبيق هذه الخواص على الأخير.
تكون بعض الخاصيّات متاحةً فقط في إحدى الحالتين <code>multiline={true/false}‎</code>، مثل: خواص الإطارات (<code>borderBottomColor</code>، و<code>borderLeftWidth</code>و غيرها) حيث لا تعمل هذه الخواص مع الخاصية <code>multiline=true</code>، ويمكن الحصول على نفس تأثير هذه الخواص عن طريق وضع المكون <code>TextInput</code> داخل المكون <code>[[ReactNative/view|View]]</code> وتطبيق هذه الخواص على الأخير.


'''مثال'''
انظر المثال التالي ([https://snack.expo.dev/@hsoubwiki/textinput-example-2 تجربة حية]):


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


const UselessTextInput = (props) =&gt; {
const UselessTextInput = (props) => {
   return (
   return (
     &lt;TextInput
     <TextInput
       {...props}
       {...props} // Inherit any props passed to it; e.g., multiline, numberOfLines below
       editable
       editable
       maxLength={40}
       maxLength={40}
     /&gt;
     />
   );
   );
}
}


const UselessTextInputMultiline = () =&gt; {
const UselessTextInputMultiline = () => {
   const [value, onChangeText] = React.useState('Useless Multiline Placeholder');
   const [value, onChangeText] = React.useState('Useless Multiline Placeholder');


  // If you type something in the text box that is a color, the background will change to that
  // color.
   return (
   return (
     &lt;View
     <View
       style={{
       style={{
         backgroundColor: value,
         backgroundColor: value,
         borderBottomColor: '#000000',
         borderBottomColor: '#000000',
         borderBottomWidth: 1,
         borderBottomWidth: 1,
       }}&gt;
       }}>
       &lt;UselessTextInput
       <UselessTextInput
         multiline
         multiline
         numberOfLines={4}
         numberOfLines={4}
         onChangeText={text =&gt; onChangeText(text)}
         onChangeText={text => onChangeText(text)}
         value={value}
         value={value}
       /&gt;
        style={{padding: 10}}
     &lt;/View&gt;
       />
     </View>
   );
   );
}
}
سطر 61: سطر 85:
export default UselessTextInputMultiline;</syntaxhighlight>
export default UselessTextInputMultiline;</syntaxhighlight>


يمتلك المكوّن <code>TextInput</code> إطارًا سفليًا، وتوجد حاشية بارتفاع معيّن بين الإطار و العنصر نفسه، ولا يمكن تعديل ارتفاعها، لحل هذه المشكلة يمكن إتباع إحدى الطريقتين التاليتين:


'''ملاحظة''': يمتلك المكون <code>TextInput</code> إطارًا سفليًا، وتوجد حاشية بارتفاع معين بين الإطار و العنصر نفسه، ولا يمكن تعديل ارتفاعها، لحل هذه المشكلة يمكن إتباع إحدى الطريقتين التاليتين:
# عدم تحديد إرتفاع معيّن للمكون <code>TextInput</code>، وفي هذه الحالة سيتولى نظام التشغيل أمر عرض الإطار السفلي في مكانه الصحيح.
 
# عدم تحديد إرتفاع معين للمكون <code>TextInput</code>، في هذه الحالة سيتولى نظام التشغيل أمر عرض الإطار السفلي في مكانه الصحيح.
# إخفاء الإطار عن طريق إعطاء الخاصية <code>underlineColorAndroid</code> القيمة <code>transparent</code>.
# إخفاء الإطار عن طريق إعطاء الخاصية <code>underlineColorAndroid</code> القيمة <code>transparent</code>.
 
لاحظ أنَّ تحديد النص داخل المكون <code>TextInput</code> على الأجهزة التي تعمل على نظام أندرويد قد يسبِّب تغيير قيمة الخاصية <code>windowSoftInputMode</code> إلى <code>adjustResize</code>، مما يؤثر على عرض العناصر ذات الموضع المطلق <code>position: absolute</code> عندما تكون لوحة المفاتيح مفتوحة، ويمكن حلّ هذه المشكلة عن طريق تحديد قيمة الخاصية <code>windowSoftInputMode</code> في ملف <code>AndroidMainfest.xml</code> ([https://developer.android.com/guide/topics/manifest/activity-element.html انظر توثيق MDN])، أو التحكم في هذه الخاصية عن طريق شيفرات أصلية (Native code).
 
 
'''ملاحظة''': لاحظ أنَّ تحديد النص داخل المكون <code>TextInput</code> على الأجهزة التي تعمل على نظام أندرويد قد يسبب في تغيير قيمة الخاصية <code>windowSoftInputMode</code> إلى <code>adjustResize</code>، مما يؤثر على عرض العناصر ذات الموضع المطلق <code>position: absolute</code> عندما تكون لوحة المفاتيح مفتوحة. يمكن حل هذه المشكلة عن طريق تحديد قيمة الخاصية <code>windowSoftInputMode</code> في ملف <code>AndroidMainfest.xml</code> ([https://developer.android.com/guide/topics/manifest/activity-element.html انظر توثيق MDN])، أو التحكم في هذه الخاصية عن طريق شيفرات أصلية (Native code).


__toc__
__toc__


== مرجع الخاصيَّات ==
== الخاصيات ==
ترث من خاصيات المكون <code>[[ReactNative/view|View]]</code>.


=== <code>allowFontScaling</code> ===
=== <code>allowFontScaling</code> ===


تُحدد ما إذا كان يجب تغيير حجم الخطوط لتناسب إعدادات حجم النص الخاصة بإمكانية الوصول (Accessibility settings). القيمة الافتراضية هي <code>true</code>.
تُحدِّد ما إذا كان يجب تغيير حجم الخطوط لتناسب إعدادات حجم النص الخاصة بإمكانية الوصول (Accessibility settings)، القيمة الافتراضية هي <code>true</code>.


{| class="wikitable"
{| class="wikitable"
سطر 86: سطر 107:
| لا
| لا
|}
|}
=== <code>autoCapitalize</code> ===
=== <code>autoCapitalize</code> ===


تستخدم لتفعيل تكبير الأحرف تلقائيًا، وهي غير مدعومة في بعض أنواع لوحات المفاتيح مثل <code>name-phone-pad</code>.
تُستخدم لتفعيل تكبير الأحرف تلقائيًا، وهي غير مدعومة في بعض أنواع لوحات المفاتيح، مثل: <code>name-phone-pad</code>.


{| class="wikitable"
{| class="wikitable"
سطر 101: سطر 119:
|-
|-
| <code>words</code>
| <code>words</code>
| تكبير الحرف الأول من كل كلمة.
| تكبير الحرف الأول من كلّ كلمة.
|-
|-
| <code>sentences</code>
| <code>sentences</code>
| تكبير الحرف الأول من كل جملة (القيمة الإفتراضية).
| تكبير الحرف الأول من كلّ جملة (القيمة الإفتراضية).
|-
|-
| <code>none</code>
| <code>none</code>
سطر 114: سطر 132:
! مطلوب
! مطلوب
|-
|-
| enum('none', 'sentences', 'words', 'characters')
| ('none', 'sentences', 'words', 'characters')
| لا
| لا
|}
|}
=== <code>autoCompleteType</code> ===
=== <code>autoCompleteType</code> ===


تقدّم أنظمة التشغيل والبرامج المختلفة خاصية الإكمال التلقائي، إذ يُدخل المستخدمة جزءًا من الكلمة التي يريد البحث عنها فيعطيه النظام أو البرنامج بعض الاقتراحات لإكمال الكلمة التي أدخلها تلقائيًا وذلك بالاستناد إلى مجموعة من السلسلة النصية المخزّنة مسبقًا في النظام.  
تقدِّم أنظمة التشغيل والبرامج المختلفة خاصية الإكمال التلقائي، إذ يُدخل المستخدم جزءًا من الكلمة التي يريد البحث عنها فيعطيه النظام أو البرنامج بعض الاقتراحات لإكمال الكلمة التي أدخلها تلقائيًا وذلك بالاستناد إلى مجموعة من السلسلة النصية المخزّنة مسبقًا في النظام (وهذا ما يحاول نظام Android فعله دومًا)، ويمكن تعطيل هذه الميزة بضبط قيمة الخاصية إلى <code>off</code>.  


تأخذ الخاصية <code>autoCompleteType</code> إحدى القيم التالية:
تأخذ الخاصية <code>autoCompleteType</code> إحدى القيم التالية:
سطر 145: سطر 160:
! نظام التشغيل
! نظام التشغيل
|-
|-
| <code>enum('off', 'username', 'password', 'email', 'name', 'tel', 'street-address', 'postal-code', 'cc-number', 'cc-csc', 'cc-exp', 'cc-exp-month', 'cc-exp-year')</code>
| ('off', 'username', 'password', 'email', 'name', 'tel', 'street-address', 'postal-code', ‪'cc-number', 'cc-csc', 'cc-exp', 'cc-exp-month', 'cc-exp-year')
| لا
| لا
| أندرويد
| أندرويد
|}
|}
=== <code>autoCorrect</code> ===
=== <code>autoCorrect</code> ===


تستخدم لتفعيل أو تعطيل التصحيح التلقائي للكلمات. القيمة الافتراضية هي <code>true</code>.
تُستخدم لتفعيل أو تعطيل التصحيح التلقائي للكلمات، والقيمة الافتراضية هي <code>true</code>.


{| class="wikitable"
{| class="wikitable"
سطر 163: سطر 175:
| لا
| لا
|}
|}
=== <code>autoFocus</code> ===
=== <code>autoFocus</code> ===


تسمح لنا هذه الخاصية بنقل التركيز (focus) تلقائيًا إلى العنصر عند تحميل الصفحة (<code>componentDidMount</code>). القيمة الافتراضية هي <code>false</code>.
تسمح لنا هذه الخاصية بنقل التركيز (focus) تلقائيًا إلى العنصر عند تحميل الصفحة (<code>componentDidMount</code>)، والقيمة الافتراضية هي <code>false</code>.


{| class="wikitable"
{| class="wikitable"
سطر 177: سطر 186:
| لا
| لا
|}
|}
=== <code>blurOnSubmit</code> ===
=== <code>blurOnSubmit</code> ===


تسمح هذه الخاصية بنقل التركيز بعيدًا عن العنصر، القيمة الافتراضية لها هي <code>true</code> لحقول الإدخال ذات السطر الواحد، والقيمة <code>false</code> للحقول ذات الأسطر المتعددة. إعطاء الخاصية القيمة <code>true</code> للحقول ذات الأسطر المتعددة سينقل التركيز بعيدًا عن العنصر عن الضغط على زر الإدخال Enter بدلًا عن الانتقال لسطر جديد.
تسمح هذه الخاصية بنقل التركيز بعيدًا عن العنصر، القيمة الافتراضية لها هي <code>true</code> لحقول الإدخال ذات السطر الواحد، والقيمة <code>false</code> للحقول ذات الأسطر المتعددة. إعطاء الخاصية القيمة <code>true</code> للحقول ذات الأسطر المتعددة سينقل التركيز بعيدًا عن العنصر عن الضغط على زرّ الإدخال (Enter) بدلًا عن الانتقال لسطر جديد.
 
 
 
{| class="wikitable"
{| class="wikitable"
! النوع
! النوع
سطر 193: سطر 196:
| لا
| لا
|}
|}
=== <code>caretHidden</code> ===


 
تُخفي هذه الخاصية مؤشر الإدخال إذا كانت قيمتها <code>true</code>، والقيمة الإفتراضية لها هي <code>false</code>.
 
=== <code>carretHidden</code> ===
 
تُخفي هذه الخاصية مؤشر الإدخال إذا كانت قيمتها <code>true</code>. القيمة الإفتراضية لها هي <code>false</code>.


{| class="wikitable"
{| class="wikitable"
سطر 207: سطر 207:
| لا
| لا
|}
|}
=== <code>clearButtonMode</code> ===
=== <code>clearButtonMode</code> ===


تُحدد متى سيظهر زر المسح (clear) بجانب حقل الإدخال <code>TextInput</code>. القيمة الافتراضية هي <code>never</code>.
تُحدِّد متى سيظهر زرّ المسح (clear) بجانب حقل الإدخال <code>TextInput</code>، والقيمة الافتراضية هي <code>never</code>.


{| class="wikitable"
{| class="wikitable"
سطر 219: سطر 216:
! نظام التشغيل
! نظام التشغيل
|-
|-
| enum('never', 'while-editing', 'unless-editing', 'always')
| ‪('never', 'while-editing', 'unless-editing', 'always')
| لا
| لا
| iOS
| iOS
|}
|}
=== <code>clearTextOnFocus</code> ===
=== <code>clearTextOnFocus</code> ===


سطر 239: سطر 233:
| iOS
| iOS
|}
|}
=== <code>contextMenuHidden</code> ===
=== <code>contextMenuHidden</code> ===


تستخدم لإظهار أو إخفاء قائمة السياق (context menu).
تُستخدم لإظهار أو إخفاء قائمة السياق (context menu). وقيمتها الافتراضية <code>false</code>.


{| class="wikitable"
{| class="wikitable"
سطر 253: سطر 244:
| لا
| لا
|}
|}
=== <code>dataDetectorTypes</code> ===
=== <code>dataDetectorTypes</code> ===


تُحدد أنواع البيانات المُدخلة التي ستُحول إلى روابط يمكن الضغط عليها. لا يمكن استخدام هذه الخاصية إلَّا مع الخاصيتين <code>multiline=true</code>و <code>editable=false</code>. ويمكن أن تأخذ قيمة واحدة أو مصفوفة قيم.
تُحدّد أنواع البيانات المُدخلة التي ستُحوَّل إلى روابط يمكن الضغط عليها، ولا يمكن استخدام هذه الخاصية إلَّا مع الخاصيتين <code>multiline=true</code> و <code>editable=false</code>. ما قد تأخذ قيمةً واحدةً أو مصفوفة قيم.


'''القيم المُتاحة''':  
القيم المُتاحة:  


* <code>'phoneNumber'</code>
* <code>'phoneNumber'</code>
سطر 274: سطر 262:
! نظام التشغيل
! نظام التشغيل
|-
|-
| enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), ,array of enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all')
| إحدى القيم ('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all')
مصفوفة من القيم ('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all')
| لا
| لا
| iOS
| iOS
|}
|}
=== <code>defaultValue</code> ===
=== <code>defaultValue</code> ===


تعطي قيمة إبتدائية للمكون <code>TextInpu</code>، وتتغيَّر هذه القيمة تلقائيًا عندما يبدأ المستخدم في الكتابة.
تعطي قيمة إبتدائيةً للمكوّن <code>TextInpu</code>، وتتغيَّر هذه القيمة تلقائيًا عندما يبدأ المستخدم في الكتابة. هي مفيدة في الحالات التي لا تود فيها انتظار وقوع حدثٍ ثم تحديث قيمة العنصر النصي وفقًا له لإبقاء الحالة المتحكم بها محدثة باستمرار (متزامنة).


{| class="wikitable"
{| class="wikitable"
سطر 292: سطر 278:
| لا
| لا
|}
|}
=== <code>disableFullscreenUI</code> ===
=== <code>disableFullscreenUI</code> ===


إذا كانت قيمة هذه الخاصية <code>false</code>- وهي القيمة الإفتراضية - يعرض نظام التشغيل حقل الإدخال في ملء الشاشة. أما إذا أعطيت القيمة <code>true</code> يُعَطَّل هذه السلوك ويُعرض حقل الإدخال في الحالة الطبيعية.
إذا كانت قيمة هذه الخاصية <code>false</code> - وهي القيمة الإفتراضية - يعرض نظام التشغيل حقل الإدخال في ملء الشاشة، أمّا إذا أعطيت القيمة <code>true</code> فسيُعَطَّل هذا السلوك ويُعرض حقل الإدخال في الحالة الطبيعية.


{| class="wikitable"
{| class="wikitable"
سطر 308: سطر 291:
| أندرويد
| أندرويد
|}
|}
=== <code>editable</code> ===
=== <code>editable</code> ===


تمنع تعديل النص داخل حقل الإدخال <code>TextInput</code> إذا كانت قيمتها <code>false</code>. القيمة الافتراضية هي <code>true</code>.
تمنع تعديل النص داخل حقل الإدخال <code>TextInput</code> إذا كانت قيمتها <code>false</code>، والقيمة الافتراضية هي <code>true</code>.


{| class="wikitable"
{| class="wikitable"
سطر 322: سطر 302:
| لا
| لا
|}
|}
=== <code>enablesReturnKeyAutomatically</code> ===
=== <code>enablesReturnKeyAutomatically</code> ===


عند إعطاء هذه الخاصية القيمة <code>true</code>، تُعطِّل لوحة المفاتيح زر الإدخال عندما يكون حقل الإدخال <code>TextInput</code> فارغًا، وتعيد تشغيله تلقائيًا عند وجود أي نص داخله. القيمة الافتراضية هي <code>false</code>.
عند إعطاء هذه الخاصية القيمة <code>true</code>، تُعطِّل لوحة المفاتيح زرّ الإدخال عندما يكون حقل الإدخال <code>TextInput</code> فارغًا، وتعيد تشغيله تلقائيًا عند وجود أيّ نص داخله، والقيمة الافتراضية هي <code>false</code>.
 
 
 
=== <code>importantForAutofill</code> ===
=== <code>importantForAutofill</code> ===


تُحدد ما إذا كانت الحقول ستضاف إلى هيكلة العرض بغرض الملء التلقائي (autofill). القيمة الافتراضية هي <code>auto</code>. ويمكن أن تأخذ إحدى القيم التالية:
تُحدّد ما إذا كانت الحقول ستُضاف إلى هيكلة الواجهة بغرض الملء التلقائي (autofill) على واجهة نظام Android البرمجية ذات المستوى 26 وما بعد. القيمة الافتراضية هي <code>auto</code>. وقد تأخذ إحدى القيم التالية:


{| class="wikitable"
{| class="wikitable"
سطر 340: سطر 314:
|-
|-
| <code>auto</code>
| <code>auto</code>
| تترك نظام التشغيل يُحدد ما إذا كان سيتم ملء الحقل تلقائيًا.
| تترك نظام التشغيل يُحدِّد ما إذا كان سيتم ملء الحقل تلقائيًا.
|-
|-
| <code>no</code>
| <code>no</code>
سطر 360: سطر 334:
! نظام التشغيل
! نظام التشغيل
|-
|-
| enum('auto', 'no', 'noExcludeDescendants', 'yes', 'yesExcludeDescendants')
| ‪('auto', 'no', 'noExcludeDescendants', 'yes', 'yesExcludeDescendants')
| لا
| لا
| أندرويد
| أندرويد
|}
|}
=== <code>inlineImageLeft</code> ===
=== <code>inlineImageLeft</code> ===


تعرض الصورة باتجاه اليسار. ينبغي أن تكون الصورة داخل الملف <code>‎/android/app/src/main/res/drawable</code>، وتُستعمل كالآتي:
تعرض الصورة باتجاه اليسار. ينبغي أن تكون الصورة داخل الملف <code>‎/android/app/src/main/res/drawable</code>، وتُستعمل كالآتي:


<syntaxhighlight class="react">&lt;TextInput inlineImageLeft='search_icon' /&gt;</syntaxhighlight>
<syntaxhighlight class="react" lang="javascript"><TextInput
inlineImageLeft='search_icon'
/></syntaxhighlight>
{| class="wikitable"
{| class="wikitable"
! النوع
! النوع
سطر 381: سطر 354:
| أندرويد
| أندرويد
|}
|}
=== <code>inlineImagePadding</code> ===
=== <code>inlineImagePadding</code> ===


سطر 393: سطر 363:
! نظام التشغيل
! نظام التشغيل
|-
|-
| رقم (number)
| عدد (number)
| لا
| لا
| أندرويد
| أندرويد
|}
|}
=== <code>inputAccessoryViewID</code> ===
=== <code>inputAccessoryViewID</code> ===


مُعَرِّف اختياري يستخدم لربط المكون <code>InputAccessoryView</code> مع حقل الإدخال <code>TextInput</code>. يُعرض المكون <code>InputAccessiryView</code> فوق لوحة المفاتيح عندما يُحدد المكون <code>TextInput</code>.
مُعَرِّف اختياري يستخدم لربط المكون <code>[[ReactNative/inputaccessoryview|InputAccessoryView]]</code> مع حقل الإدخال <code>TextInput</code>. يُعرض المكون <code>InputAccessiryView</code> فوق لوحة المفاتيح عندما يُحدَّد المكون <code>TextInput</code>.


{| class="wikitable"
{| class="wikitable"
سطر 413: سطر 380:
| iOS
| iOS
|}
|}
=== <code>keyboardAppearance</code> ===
=== <code>keyboardAppearance</code> ===


سطر 425: سطر 389:
! نظام التشغيل
! نظام التشغيل
|-
|-
| enum('default', 'light', 'dark')
| ‪('default', 'light', 'dark')
| لا
| لا
| iOS
| iOS
|}
|}
=== <code>keyboardType</code> ===
=== <code>keyboardType</code> ===


تُستخدم لتحديد نوع لوحة المفاتيح المستخدمة للإدخال.
تُستخدم لتحديد نوع لوحة المفاتيح المستخدمة للإدخال.
يمكنك رؤية كل قيمة الأنواع المحتملة من [http://lefkowitz.me/2018/04/30/visual-guide-to-react-native-textinput-keyboardtype-options/ لقطات الشاشة هذه].


'''القيم العامة للخاصية (تعمل على نظام أندرويد و iOS)'''
'''القيم العامة للخاصية (تعمل على نظام أندرويد و iOS)'''
سطر 462: سطر 425:
! مطلوب
! مطلوب
|-
|-
| enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search', 'visible-password')
| ('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search', 'visible-password')
| لا
| لا
|}
|}
=== <code>maxFontSizeMultiplier</code> ===
=== <code>maxFontSizeMultiplier</code> ===


تُحدِّد أقصى تكبير ممكن للخط عندما تكون الخاصية <code>allowFontScaling</code> مُفعَّلة. ويمكن أن تأخذ القيم الآتية:
تُحدِّد أقصى تكبير ممكن للخط عندما تكون الخاصية <code>allowFontScaling</code> مُفعَّلة. وقد تأخذ القيم الآتية:


{| class="wikitable"
{| class="wikitable"
سطر 490: سطر 450:
! مطلوب
! مطلوب
|-
|-
| رقم (number)
| عدد (number)
| لا
| لا
|}
|}
=== <code>maxLength</code> ===
=== <code>maxLength</code> ===


تُحدد أكبر عدد من الحروف يمكن إدخاله في الحقل <code>TextInput</code>.
تُحدد أكبر عدد من الحروف يمكن إدخاله في الحقل <code>TextInput</code>. استعمل هذه الخاصية بدلًا من تنفيذ آلية مشابهة باستعمال لغة JavaScript لمنع حدوث أي ومضيع غير محبذ flicker.


{| class="wikitable"
{| class="wikitable"
سطر 504: سطر 461:
! مطلوب
! مطلوب
|-
|-
| رقم (number)
| عدد (number)
| لا
| لا
|}
|}
=== <code>multiline</code> ===
=== <code>multiline</code> ===


تحدد ما إذا كان حقل الإدخال سطر واحد (وعندها تكون قيمتها <code>false</code>) أو عدة أسطر (القيمة <code>true</code>). ينبغي أن تلاحظ أن النص داخل عنصر الإدخال متعدد الأسطر يكون محاذيًا للأعلى على أجهزة iOS، وفي الوسط في أجهزة أندرويد، لذلك يجب استخدام الخاصية <code>textAlignVertical</code> للحصول على سلوك مشابه في النظامين.
تحدد ما إذا كان حقل الإدخال سطر واحد (وعندها تكون قيمتها <code>false</code> القيمة الافتراضية) أو عدة أسطر (القيمة <code>true</code>)، وتنبغي ملاحظتك لمحاذاة النص داخل عنصر الإدخال متعدد الأسطر إلى الأعلى على أجهزة iOS، وفي الوسط في أجهزة أندرويد، لذلك يجب استخدام الخاصية <code>textAlignVertical</code> للحصول على سلوك مشابه في النظامين.


{| class="wikitable"
{| class="wikitable"
سطر 521: سطر 475:
| لا
| لا
|}
|}
===<code>numberOfLines</code> ===


 
تُحدد عدد الأسطر للعنصر <code>TextInput</code>. استعملها مع ضبط قيمة الخاصية <code>multiline</code> السابقة إلى القيمة <code>true</code> لتصبح قادرًا على ملء الأسطر.
 
=== الخاصية <code>numberOfLines</code> ===
 
تُحدد عدد الأسطر للعنصر <code>TextInput</code>.


{| class="wikitable"
{| class="wikitable"
سطر 533: سطر 484:
! نظام التشغيل
! نظام التشغيل
|-
|-
| رقم (number)
| عدد (number)
| لا
| لا
| أندرويد
| أندرويد
|}
|}
=== <code>onBlue</code> ===
=== <code>onBlue</code> ===


دالة تُستدعى عندما يُبعد التركيز عن العنصر.
دالة تُستدعى عندما يُبعد التركيز عن العنصر.
'''ملاحظة''': إن كنت تحاول الوصول إلى قيمة النص <code>text</code> من الحدث <code>nativeEvent</code> فتذكر أن القيمة التي يمكن أن تحصل عليها آنذاك هي <code>undefind</code> والتي قد تسبب خطأ غير مرغوب به، لذا للحصول إلى أحدث قيمة للمكون <code>TextInput</code>، فاستعمل الحدث <code>onEndEditing</code> والذي يقع (يُطلق) بعد انتهاء المستخدم من إجراء التعديلات.


{| class="wikitable"
{| class="wikitable"
سطر 551: سطر 501:
| لا
| لا
|}
|}
=== <code>onChange</code>  ===
=== <code>onChange</code>  ===


دالة تُستدعَى عندما يتغير النص الموجود داخل العنصر <code>TextInput</code>. ويتم استدعائها عن طريق <code>{nativeEvent: {eventCount, target, text}‎}</code>.
دالة تُستدعَى عندما يتغير النص الموجود داخل العنصر <code>TextInput</code>.


{| class="wikitable"
{| class="wikitable"
سطر 563: سطر 510:
|-
|-
| دالة (function)
| دالة (function)
‎({ nativeEvent: { eventCount, target, text} }) => void
| لا
| لا
|}
|}


 
=== <code>onContentSizeChange</code> ===
 
دالة رد نداء تُستدعى عند تغير حجم محتوى عنصر الإدخال. وتستخدم فقط مع عناصر الإدخال متعددة الأسطر.
{| class="wikitable"
! النوع
! مطلوب
|-
| دالة (function)
‎({ nativeEvent: { contentSize: { width, height } } }) => void
| لا
|}
=== <code>onChangeText</code> ===
=== <code>onChangeText</code> ===


دالة تستدعَى عندما يتغير النص الموجود داخل العنصر <code>TextInput</code>، ويُرسل النص الذي تم استبداله كمعامل للدالة.
دالة تستدعَى عندما يتغير النص الموجود داخل العنصر <code>TextInput</code>، ويُرسل النص الذي استُبدِل مثل معامل للدالة.


{| class="wikitable"
{| class="wikitable"
سطر 579: سطر 535:
| لا
| لا
|}
|}
=== <code>onEndEditing</code> ===
=== <code>onEndEditing</code> ===


سطر 594: سطر 547:
|}
|}


=== <code>onPressIn</code> ===
دالة رد نداء تُستدعى عند بدء فعل اللمس.
{| class="wikitable"
! النوع
! مطلوب
|-
| دالة (function)
‎({ nativeEvent: [[ReactNative/pressevent|PressEvent]] }) => void
| لا
|}


 
=== <code>onPressOut</code> ===
دالة رد نداء تُستدعى عند تحرير فعل اللمس (إزالته والانتهاء منه).
{| class="wikitable"
! النوع
! مطلوب
|-
| دالة (function)
‎({ nativeEvent: [[ReactNative/pressevent|PressEvent]] }) => void
| لا
|}
=== <code>onFocus</code> ===
=== <code>onFocus</code> ===


سطر 605: سطر 577:
|-
|-
| دالة (function)
| دالة (function)
‎({ nativeEvent: [[ReactNative/layoutevent|LayoutEvent]] }) => void
| لا
| لا
|}
|}
=== <code>onKeyPress</code> ===


دالة تُستدعَى عند الضغط على أيّ زرّ على لوحة المفاتيح. ستُستدعى هذه الدالة مع كائن يأخذ المفتاح <code>KeyValue</code> القيمة <code>'Enter'</code> أو القيمة <code>'Bakcspace'</code> للمفاتيح المقابلة والمحارف المدخلة وإلا فإنها ستكون <code>' '</code> لمحرف المسافة. تُستدعى هذه الدالة قبل دالة رد نداء الحدث <code>onChage</code>.


 
'''ملاحظة''': تعالج المدخلات على أنظمة Android من عناصر الإدخال من لوحة المفاتيح على الجهاز نفسه وليس من مدخلات نصية آتية من لوحة مفتاتيح خارجية.
=== <code>onKeyPress</code> ===
 
دالة تُستدعَى عند الضغط على أي زر على لوحة المفاتيح.


{| class="wikitable"
{| class="wikitable"
سطر 619: سطر 591:
|-
|-
| دالة (function)
| دالة (function)
‎({ nativeEvent: { key: keyValue } }) => void
| لا
| لا
|}
|}
=== <code>onLayout</code> ===
=== <code>onLayout</code> ===


سطر 633: سطر 603:
|-
|-
| دالة (function)
| دالة (function)
‎({ nativeEvent: [[ReactNative/layoutevent|LayoutEvent]] }) => void
| لا
| لا
|}
|}
=== <code>onScroll</code> ===
=== <code>onScroll</code> ===


دالة تُستدعَى عند التمرير (scroll) في الاتجاهات الأربعة، تُرسل إحداثيات الموضع الحالي كمعاملات للدالة.
دالة تُستدعَى عند التمرير (scroll) على المحتوى، وقد تحتوي على خاصيات من الحدث <code>ScrollEvent</code> ولكن لا توفر منصة Android قيمة <code>contentSize</code> لأمور متعلقة بالأداء.


{| class="wikitable"
{| class="wikitable"
سطر 647: سطر 615:
|-
|-
| دالة (function)
| دالة (function)
‎({ nativeEvent: { contentOffset: { x, y } } }) => void
| لا
| لا
|}
|}
===<code>onSelectionChange</code> ===


 
دالة تُستدعَى عند تغيير النص المُحدّد، وتتطلب هذه الخاصية أن تكون الخاصية <code>multiline=true</code> موجودة.
 
=== الخاصية <code>onSelectionChange</code> ===
 
دالة تُستدعَى عند تغيير النص المُحدد. تتطلب هذه الخاصية أن تكون الخاصية <code>multiline=true</code> موجودة.


{| class="wikitable"
{| class="wikitable"
سطر 661: سطر 629:
|-
|-
| دالة (function)
| دالة (function)
‎({ nativeEvent: { selection: { start, end } } }) => void
| لا
| لا
|}
|}
=== <code>onSubmitEditing</code> ===
=== <code>onSubmitEditing</code> ===


دالة تُستدعَى عن الضغط على زر الإدخال (submit).
دالة تُستدعَى عن الضغط على زرّ الإدخال (submit).


{| class="wikitable"
{| class="wikitable"
سطر 675: سطر 643:
|-
|-
| دالة (function)
| دالة (function)
<nowiki>‎({ nativeEvent: { text, eventCount, target }}) => void</nowiki>
| لا
| لا
|}
|}


'''ملاحظة''': لا تعمل هذه الدالة على نظام <code>iOS</code> عندما يكون نوع لوحة المفاتيح <code>phone-pad</code>.
'''ملاحظة''': لا تعمل هذه الدالة على نظام <code>iOS</code> عندما يكون نوع لوحة المفاتيح <code>phone-pad</code>.
=== <code>placeholder</code> ===
=== <code>placeholder</code> ===


تُحدِّد جملة أو سلسلة نصية تعمل كنص بديل يظهر عندما يكون عنصر الإدخال <code>TextInput</code> فارغًا.
تُحدِّد جملة أو سلسلة نصية تعمل مثل نص بديل يظهر عندما يكون عنصر الإدخال <code>TextInput</code> فارغًا.


{| class="wikitable"
{| class="wikitable"
سطر 693: سطر 661:
| لا
| لا
|}
|}
=== <code>placeholderTextColor</code> ===
=== <code>placeholderTextColor</code> ===


سطر 704: سطر 669:
! مطلوب
! مطلوب
|-
|-
| [https://reactnative.dev/docs/colors لون]
| [[ReactNative/colors|لون]]
| لا
| لا
|}
|}
=== <code>returnKeyType</code> ===
=== <code>returnKeyType</code> ===


تُحدِّد كيفية عمل زر الإدخال.
تُحدِّد كيفية عمل زرّ الإدخال.


'''القيم العامة للخاصية (تعمل على نظام أندرويد و iOS)'''
'''القيم العامة للخاصية (تعمل على نظام أندرويد و iOS)'''
سطر 722: سطر 684:
* <code>send</code>
* <code>send</code>


'''قيم تعمل على نظام أندرويد فقط'''
'''قِيَم تعمل على نظام أندرويد فقط'''


* <code>none</code>
* <code>none</code>
* <code>previous</code>
* <code>previous</code>


'''قيم تعمل على نظام iOS فقط'''
'''قِيَم تعمل على نظام iOS فقط'''


* <code>default</code>
* <code>default</code>
سطر 740: سطر 702:
! مطلوب
! مطلوب
|-
|-
| <code>enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo')</code>
| ('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google',‪ 'join', 'route', 'yahoo')
| لا
| لا
|}
|}


=== الخاصية <code>returnKeyLabel</code> ===
===<code>returnKeyLabel</code> ===


تُستعمل كبديل للخاصية <code>returnKeyType</code> على أجهزة أندرويد.
تُستعمل مثل بديل للخاصية <code>returnKeyType</code> على أجهزة أندرويد.


{| class="wikitable"
{| class="wikitable"
سطر 757: سطر 719:
| أندرويد
| أندرويد
|}
|}
 
===<code>rejectResponderTermination</code> ===
 
 
=== الخاصية <code>rejectResponderTermination</code> ===


'''ملاحظة''': تعمل هذه الخاصية على نظام iOS فقط.
'''ملاحظة''': تعمل هذه الخاصية على نظام iOS فقط.


تسمح للعنصر <code>TextInput</code> بتمرير حدث اللمس (touch event) للعنصر الأب عند إعطائها القيمة <code>true</code>، مما يسمح لبعض العناصر مثل <code>SwipeableListView</code> أن تصبح قابلة للتمرير من داخل العنصر <code>TextInput</code>.
تسمح للعنصر <code>TextInput</code> بتمرير حدث اللمس (touch event) للعنصر الأب عند إعطائها القيمة <code>true</code>، مما يسمح لبعض العناصر مثل <code>SwipeableListView</code> أن تُصبح قابلةً للتمرير من داخل العنصر <code>TextInput</code>. إن كانت قيمتها <code>false</code> فسيسأل المكون <code>TextInput</code> دومًا عن إمكانية معالجة المدخلات (إلا عندما يكون معطلًا). القيمة الافتراضية <code>true</code>.


{| class="wikitable"
{| class="wikitable"
سطر 775: سطر 734:
| iOS
| iOS
|}
|}
===<code>scrollEnable</code> ===


 
تسمح بتشغيل أو تعطيل التمرير في حقول الإدخال متعدّدة الأسطر. القيمة الإفتراضية لها هي <code>true</code>. تعمل فقط عندما تكون قيمة <code>multiline</code> مضبوطة إلى <code>true</code>.
 
=== الخاصية <code>scrollEnable</code> ===
 
تسمح بتشغيل أو تعطيل التمرير في حقول الإدخال متعددة الأسطر. القيمة الإفتراضية لها هي <code>true</code>.


{| class="wikitable"
{| class="wikitable"
سطر 791: سطر 747:
| iOS
| iOS
|}
|}
===<code>secureTextEntry</code> ===


 
تُستخدم لحجب النص المُدخل وذلك عن طريق استبداله بنقاط أو العلامة (*). ولا تعمل هذه الخاصية مع حقول الإدخال متعدِّدة الأسطر أي عندما تكون قيمة <code>multiline</code> مضبوطة إلى <code>true</code>.
 
=== الخاصية <code>secureTextEntry</code> ===
 
تُستخدم لحجب النص المُدخل وذلك عن طريق استبداله بنقاط أو العلامة (*). ولا تعمل هذه الخاصية مع حقول الإدخال متعددة الأسطر.


{| class="wikitable"
{| class="wikitable"
سطر 805: سطر 758:
| لا
| لا
|}
|}
 
===<code>selection</code> ===
 
 
=== الخاصية <code>selection</code> ===


تُحدد موضع البداية والنهاية للنص المُحدد داخل العنصر <code>TextInput</code>.
تُحدد موضع البداية والنهاية للنص المُحدد داخل العنصر <code>TextInput</code>.
سطر 816: سطر 766:
! مطلوب
! مطلوب
|-
|-
| object: {start: number,end: number}‎
| ‪{start: number,end: number}‎
| لا
| لا
|}
|}
===<code>selectionColor</code> ===


 
تُحدِّد لون التظليل ومؤشر الإدخال.
 
=== الخاصية <code>selectionColor</code> ===
 
تُحدد لون التظليل ومؤشر الإدخال.


{| class="wikitable"
{| class="wikitable"
سطر 830: سطر 777:
! مطلوب
! مطلوب
|-
|-
| [https://reactnative.dev/docs/colors لون]
| [[ReactNative/colors|لون]]
| لا
| لا
|}
|}
===<code>selectTextOnFocus</code> ===


 
تُحدِّد النص الموجود داخل العنصر <code>TextInput</code> تلقائيًا عن الضغط عليه.
 
=== الخاصية <code>selectTextOnFocus</code> ===
 
تُحدد النص الموجود داخل العنصر <code>TextInput</code> تلقائيًا عن الضغط عليه.


{| class="wikitable"
{| class="wikitable"
سطر 847: سطر 791:
| لا
| لا
|}
|}
===<code>showSoftInputOnFocus</code> ===


 
تمنع ظهور لوحة المفاتيح عند التركيز على العنصر <code>TextInput</code> وذلك عندما تكون قيمتها <code>false</code>،  والقيمة الافتراضية هي <code>true</code>.
 
=== الخاصية <code>showSoftInputOnFocus</code> ===
 
تمنع ظهور لوحة المفاتيح عند التركيز على العنصر <code>TextInput</code> وذلك عندما تكون قيمتها <code>false</code>. القيمة الافتراضية هي <code>true</code>.


{| class="wikitable"
{| class="wikitable"
سطر 863: سطر 804:
| أندرويد
| أندرويد
|}
|}
===<code>spellCheck</code> ===


 
تستعمل لتشغيل أو تعطيل التدقيق الإملائي، وفي حال عدم تحديد قيمة لها فسترث قيمتها من الخاصية <code>autoCorrect</code>.
 
=== الخاصية <code>spellCheck</code> ===
 
تستعمل لتشغيل أو تعطيل التدقيق الإملائي. وفي حال عدم تحديد قيمة لها فإنها ترث قيمتها من الخاصية <code>autoCorrect</code>.


{| class="wikitable"
{| class="wikitable"
سطر 879: سطر 817:
| iOS
| iOS
|}
|}
 
===<code>textAlign</code> ===
 
 
=== الخاصية <code>textAlign</code> ===


تُستخدم لتحديد محاذاة النص داخل العنصر <code>TextInput</code>. وتأخذ القيم:
تُستخدم لتحديد محاذاة النص داخل العنصر <code>TextInput</code>. وتأخذ القيم:
سطر 894: سطر 829:
! مطلوب
! مطلوب
|-
|-
| enum('left', 'center', 'right')
| ‪('left', 'center', 'right')‪
| لا
| لا
|}
|}
===<code>textContentType</code> ===


 
تُعطي النظام معلومات متعلقة بدلالات النصوص المتوقَّع إدخالها من المستخدم.
 
=== الخاصية <code>textContentType</code> ===
 
تُعطي النظام معلومات متعلقة بدلالات النصوص المتوقع إدخالها من المستخدم.


في الإصدار 11 من نظام iOS وما بعده يمكن تحديد القيمة <code>username</code> أو <code>password</code> للخاصية <code>textContentType</code> لتفعيل الملء التلقائي لبيانات الدخول (login).
في الإصدار 11 من نظام iOS وما بعده يمكن تحديد القيمة <code>username</code> أو <code>password</code> للخاصية <code>textContentType</code> لتفعيل الملء التلقائي لبيانات الدخول (login).


في الإصدار 12 من نظام iOS وما بعده تستخدم القيمة <code>newPassword</code> للدلالة على كلمة مرور جديدة يُتوقَع إدخالها من المستخدم ويتم حفظها في الجهاز.
في الإصدار 12 من نظام iOS وما بعده تُستخدم القيمة <code>newPassword</code> للدلالة على كلمة مرور جديدة يُتوقَع إدخالها من المستخدم وتُحفظ في الجهاز.


تستخدم القيمة <code>oneTimeCode</code> للدلالة على أنه يمكن ملء الحقل تلقائيًا برمز يُرسل عن طريق رسالة نصية SMS.
تُستخدم القيمة <code>oneTimeCode</code> للدلالة على إمكانية ملء الحقل تلقائيًا برمز يُرسل عن طريق رسالة نصية SMS.


لتعطيل الملء التلقائي تُستخدَم القيمة <code>none</code> للخاصية <code>textContentType</code>.
لتعطيل الملء التلقائي تُستخدَم القيمة <code>none</code> للخاصية <code>textContentType</code>.
سطر 948: سطر 880:
! نظام التشغيل
! نظام التشغيل
|-
|-
| enum('none', 'URL', 'addressCity', 'addressCityAndState', 'addressState', 'countryName', 'creditCardNumber', 'emailAddress', 'familyName', 'fullStreetAddress', 'givenName', 'jobTitle', 'location', 'middleName', 'name', 'namePrefix', 'nameSuffix', 'nickname', 'organizationName', 'postalCode', 'streetAddressLine1', 'streetAddressLine2', 'sublocality', 'telephoneNumber', 'username', 'password')
| ‪('none', 'URL', 'addressCity', 'addressCityAndState', 'addressState', 'countryName', 'creditCardNumber', 'emailAddress', 'familyName', 'fullStreetAddress', 'givenName', 'jobTitle', 'location', 'middleName', 'name', 'namePrefix', 'nameSuffix', 'nickname', 'organizationName', 'postalCode', 'streetAddressLine1', 'streetAddressLine2', 'sublocality', 'telephoneNumber', 'username', 'password')
| لا
| لا
| iOS
| iOS
|}
|}
===<code>passwordRules</code> ===


 
تُستعمل لإضافة شروط ينبغي تحقيقها حتى يكون النص المُدخل صالحًا.  
 
=== الخاصية <code>passwordRules</code> ===
 
تستعمل لإضافة شروط ينبغي تحقيقها حتى يكون النص المُدخل صالحًا.  


{| class="wikitable"
{| class="wikitable"
سطر 970: سطر 899:


انظر [https://developer.apple.com/password-rules/ قائمة الشروط]
انظر [https://developer.apple.com/password-rules/ قائمة الشروط]
===<code>style</code> ===


تُستخدم لتطبيق أنماط معيّنة لتغيير شكل ومظهر حقل الإدخال <code>TextInput</code>. انتبه إلى أن الأنماط ليس كلها مدعومة وإليك قائمة غير كاملة بالأنماط غير المدعومة:


* <code>borderLeftWidth</code>
* <code>borderTopWidth</code>
* <code>borderRightWidth</code>
* <code>borderBottomWidth</code>
* <code>borderTopLeftRadius</code>
* <code>borderTopRightRadius</code>
* <code>borderBottomRightRadius</code>
* <code>borderBottomLeftRadius</code>


=== الخاصية <code>style</code> ===
انظر المشكلة [https://github.com/facebook/react-native/issues/7070 #7070] لمزيد من التفاصيل.
 
تستخدم لتطبيق أنماط معينة لتغيير شكل ومظهر حقل الإدخال <code>TextInput</code>.
 
{| class="wikitable"
{| class="wikitable"
! النوع
! النوع
! مطلوب
! مطلوب
|-
|-
| [https://reactnative.dev/docs/text#style نص]
| [[ReactNative/text style props|نص]]
| لا
| لا
|}
|}


انظر [https://reactnative.dev/docs/style قائمة الأنماط].
انظر [[ReactNative/style|قائمة الأنماط]].
===<code>textBreakStrategy</code> ===


 
تُستخدم لتحديد نقاط الفصل في النصوص (النقاط التي يتم عندها الانتقال لسطر جديد). ويمكن أخذ القيم التالية:
 
=== الخاصية <code>textBreakStrategy</code> ===
 
تُستخدم لتحديد نقاط الفصل في النصوص (النقاط التي يتم عندها الانتقال لسطر جديد). ويمكن أن تأخذ القيم التالية:


* <code>simple</code>
* <code>simple</code>
سطر 1٬002: سطر 935:
! نظام التشغيل
! نظام التشغيل
|-
|-
| سلسلة نصية (string)
| ('simple', 'highQuality', 'balanced')
| لا
| لا
| أندرويد
| أندرويد
|}
|}
 
===<code>underlineColorAndroid</code> ===
 
 
=== الخاصية <code>underlineColorAndroid</code> ===


تُحدِّد لون الإطار السفلي للعنصر <code>TextInput</code>.
تُحدِّد لون الإطار السفلي للعنصر <code>TextInput</code>.
سطر 1٬018: سطر 948:
! نظام التشغيل
! نظام التشغيل
|-
|-
| [https://reactnative.dev/docs/colors لون]
| [[ReactNative/colors|لون]]
| لا
| لا
| أندرويد
| أندرويد
|}
|}
===<code>value</code> ===


قيمة العنصر <code>TextInput</code>.


 
المكون TextInput هو مكون متحكم به controlled component وهذا يعني أن القيمة الأصلية ستكون مماثلة لهذه القيمة إجباريًا إن أعطيت. فلأغلب الحالات، ذلك يعمل بسلاسة ولكن قد يسبب في حالات أخرى بعض سلوك الوميض flickering، ويفضل في مثل تلك الحالات منع إجراء التعديلات على العنصر النصي مع الحفاظ على قيمة واحدة له بالإضافة إلى ضبط <code>editable={false}</code> أو ضبط أو تحديث قيمة <code>maxLenght</code> لمنع أي سلوك تعديل غير مرغوب فيه تجنبًا لسلوك الوميض ذاك.
=== الخاصية <code>value</code> ===
 
تستخدم لتحديد قيمة إفتراضية للعنصر <code>TextInput</code>.


{| class="wikitable"
{| class="wikitable"
سطر 1٬036: سطر 965:
| لا
| لا
|}
|}
== مرجع التوابع ==


'''ملاحظة''': يجب التعامل مع هذه الخاصية بحذر، حيث أن استعمالها بطريقة خاطئة قد يتسبب في منع المستخدم من تغيير القيمة الإفتراضية للحقل وغيرها من المشاكل الأخرى.
=== <code>‎.focus()‎</code> ===
 
<syntaxhighlight class="react" lang="javascript">focus();</syntaxhighlight>
 
تُستخدم لتحويل التركيز للعنصر الذي تُستدعى فيه.
 
== مرجع الدوال  ==
 
=== الدالة <code>.focus()</code> ===
 
<syntaxhighlight class="react">focus();</syntaxhighlight>
تستخدم لتحويل التركيز للعنصر الذي تُستدعى فيه.
 
 
 
=== الدالة <code>.blur()</code> ===
 
<syntaxhighlight class="react">blue();</syntaxhighlight>
تستخدم لنقل التركيز بعيدًا عن العنصر الذي تُستدعى فيه.
 
 
 
=== الدالة <code>clear()</code> ===


<syntaxhighlight class="react">clear();</syntaxhighlight>
=== <code>‎.blur()‎</code> ===
تستخدم لمسح محتوى العنصر <code>TextInput</code>.
<syntaxhighlight class="react" lang="javascript">blue();</syntaxhighlight>
تُستخدم لنقل التركيز بعيدًا عن العنصر الذي تُستدعى فيه.


=== <code>‎clear()‎</code> ===
<syntaxhighlight class="react" lang="javascript">clear();</syntaxhighlight>
تُستخدم لمسح محتوى العنصر <code>TextInput</code>.


=== <code>‎isFocused()‎</code> ===
<syntaxhighlight class="react" lang="javascript">isFocused();</syntaxhighlight>
تُرجع القيمة <code>true</code> إذا كان العنصر الذي استُدعيت فيه الدالة في وضع التركيز (focsed) و<code>false</code>فيما عدا ذلك.


=== الدالة <code>isFocused()</code> ===
== مشاكل معروفة ==


<syntaxhighlight class="react">isFocused();</syntaxhighlight>
* [https://github.com/facebook/react-native/issues/19096 react-native#19096]: لا يُدعم onKeyPreIme على منصة Android.
تُرجع القيمة <code>true</code> إذا كان العنصر الذي استُدعيت فيه الدالة في وضع التركيز (focsed) و <code>false</code>فيما عدا ذلك.
* [https://github.com/facebook/react-native/issues/19366 react-native#19366]: استدعاء ()focus بعد إغلاق لوحة المفاتيح على منصة Android عبر رز الرجوع يسبب في عدم فتح لوحة المفتاتيح مرة أخرى.
* [https://github.com/facebook/react-native/issues/26799 react-native#26799:] لا يُدعم secureTextEntry على منصة Android عند ضبط قيمة <code>keyboardType</code> إلى <code>"email-address"</code> أو <code>"phone-pad"</code>.


== المصادر ==
== المصادر ==


[https://reactnative.dev/docs/textinput صفحة scrollView في توثيق React Native الرسمي]
* [https://reactnative.dev/docs/textinput صفحة TextInput في توثيق React Native الرسمي.]


[[تصنيف: ReactNative]]
[[تصنيف: ReactNative]]
[[تصنيف:React Native Component]]

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

يُعَدّ المكون TextInput من المكونات الأساسية في React Native، حيث يسمح للمستخدم بإدخال النصوص عن طريق لوحة المفاتيح، ويمكن التحكم في نوع الإدخال (نص، وأرقام، وبريد إلكتروني، وكلمة مرور ...إلخ) ونوع لوحة المفاتيح وغيرها من الخاصيات (props) التي سيأتي بيانها لاحقًا.

توضِّح الشيفرة أدناه كيفية استخدام المكون TextInput، حيث يُستمع للحدث onChangeText الذي يُحدِّث القيمة الخاصة بالمكون TextInput والمخزّنة في الحالة (State) عند الضغط على أيّ زرّ في لوحة المفاتيح. وتوجد أحداث أخرى، مثل: onSubmitEditing وonFocus ستُشرح وظائفها لاحقًا.

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

import React from "react";
import { SafeAreaView, StyleSheet, TextInput } from "react-native";

const UselessTextInput = () => {
  const [text, onChangeText] = React.useState("Useless Text");
  const [number, onChangeNumber] = React.useState(null);

  return (
    <SafeAreaView>
      <TextInput
        style={styles.input}
        onChangeText={onChangeText}
        value={text}
      />
      <TextInput
        style={styles.input}
        onChangeText={onChangeNumber}
        value={number}
        placeholder="useless placeholder"
        keyboardType="numeric"
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },
});

export default UselessTextInput;

تُستخدم الدالتان ()focus. و()blur. للتركيز على العنصر أو لنقل التركيز بعيدًا عنه بطريقة برمجية.

تكون بعض الخاصيّات متاحةً فقط في إحدى الحالتين multiline={true/false}‎، مثل: خواص الإطارات (borderBottomColor، وborderLeftWidthو غيرها) حيث لا تعمل هذه الخواص مع الخاصية multiline=true، ويمكن الحصول على نفس تأثير هذه الخواص عن طريق وضع المكون TextInput داخل المكون View وتطبيق هذه الخواص على الأخير.

انظر المثال التالي (تجربة حية): 

import React from 'react';
import { View, TextInput } from 'react-native';

const UselessTextInput = (props) => {
  return (
    <TextInput
      {...props} // Inherit any props passed to it; e.g., multiline, numberOfLines below
      editable
      maxLength={40}
    />
  );
}

const UselessTextInputMultiline = () => {
  const [value, onChangeText] = React.useState('Useless Multiline Placeholder');

  // If you type something in the text box that is a color, the background will change to that
  // color.
  return (
    <View
      style={{
        backgroundColor: value,
        borderBottomColor: '#000000',
        borderBottomWidth: 1,
      }}>
      <UselessTextInput
        multiline
        numberOfLines={4}
        onChangeText={text => onChangeText(text)}
        value={value}
        style={{padding: 10}}
      />
    </View>
  );
}

export default UselessTextInputMultiline;

يمتلك المكوّن TextInput إطارًا سفليًا، وتوجد حاشية بارتفاع معيّن بين الإطار و العنصر نفسه، ولا يمكن تعديل ارتفاعها، لحل هذه المشكلة يمكن إتباع إحدى الطريقتين التاليتين:

  1. عدم تحديد إرتفاع معيّن للمكون TextInput، وفي هذه الحالة سيتولى نظام التشغيل أمر عرض الإطار السفلي في مكانه الصحيح.
  2. إخفاء الإطار عن طريق إعطاء الخاصية underlineColorAndroid القيمة transparent.

لاحظ أنَّ تحديد النص داخل المكون TextInput على الأجهزة التي تعمل على نظام أندرويد قد يسبِّب تغيير قيمة الخاصية windowSoftInputMode إلى adjustResize، مما يؤثر على عرض العناصر ذات الموضع المطلق position: absolute عندما تكون لوحة المفاتيح مفتوحة، ويمكن حلّ هذه المشكلة عن طريق تحديد قيمة الخاصية windowSoftInputMode في ملف AndroidMainfest.xml (انظر توثيق MDN)، أو التحكم في هذه الخاصية عن طريق شيفرات أصلية (Native code).

الخاصيات

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

allowFontScaling

تُحدِّد ما إذا كان يجب تغيير حجم الخطوط لتناسب إعدادات حجم النص الخاصة بإمكانية الوصول (Accessibility settings)، القيمة الافتراضية هي true.

النوع مطلوب
قيمة منطقية (bool) لا

autoCapitalize

تُستخدم لتفعيل تكبير الأحرف تلقائيًا، وهي غير مدعومة في بعض أنواع لوحات المفاتيح، مثل: name-phone-pad.

القيمة الوصف
character تكبير جميع الأحرف.
words تكبير الحرف الأول من كلّ كلمة.
sentences تكبير الحرف الأول من كلّ جملة (القيمة الإفتراضية).
none تعطيل التكبير التلقائي للأحرف.
النوع مطلوب
('none', 'sentences', 'words', 'characters') لا

autoCompleteType

تقدِّم أنظمة التشغيل والبرامج المختلفة خاصية الإكمال التلقائي، إذ يُدخل المستخدم جزءًا من الكلمة التي يريد البحث عنها فيعطيه النظام أو البرنامج بعض الاقتراحات لإكمال الكلمة التي أدخلها تلقائيًا وذلك بالاستناد إلى مجموعة من السلسلة النصية المخزّنة مسبقًا في النظام (وهذا ما يحاول نظام Android فعله دومًا)، ويمكن تعطيل هذه الميزة بضبط قيمة الخاصية إلى off.

تأخذ الخاصية autoCompleteType إحدى القيم التالية:

  • off
  • username
  • password
  • email
  • name
  • tel
  • street-address
  • postal-code
  • cc-number
  • cc-csc
  • cc-exp
  • cc-exp-month
  • cc-exp-year
النوع مطلوب نظام التشغيل
('off', 'username', 'password', 'email', 'name', 'tel', 'street-address', 'postal-code', ‪'cc-number', 'cc-csc', 'cc-exp', 'cc-exp-month', 'cc-exp-year') لا أندرويد

autoCorrect

تُستخدم لتفعيل أو تعطيل التصحيح التلقائي للكلمات، والقيمة الافتراضية هي true.

النوع مطلوب
قيمة منطقية (bool) لا

autoFocus

تسمح لنا هذه الخاصية بنقل التركيز (focus) تلقائيًا إلى العنصر عند تحميل الصفحة (componentDidMount)، والقيمة الافتراضية هي false.

النوع مطلوب
قيمة منطقية (bool) لا

blurOnSubmit

تسمح هذه الخاصية بنقل التركيز بعيدًا عن العنصر، القيمة الافتراضية لها هي true لحقول الإدخال ذات السطر الواحد، والقيمة false للحقول ذات الأسطر المتعددة. إعطاء الخاصية القيمة true للحقول ذات الأسطر المتعددة سينقل التركيز بعيدًا عن العنصر عن الضغط على زرّ الإدخال (Enter) بدلًا عن الانتقال لسطر جديد.

النوع مطلوب
قيمة منطقية (bool) لا

caretHidden

تُخفي هذه الخاصية مؤشر الإدخال إذا كانت قيمتها true، والقيمة الإفتراضية لها هي false.

النوع مطلوب
قيمة منطقية (bool) لا

clearButtonMode

تُحدِّد متى سيظهر زرّ المسح (clear) بجانب حقل الإدخال TextInput، والقيمة الافتراضية هي never.

النوع مطلوب نظام التشغيل
‪('never', 'while-editing', 'unless-editing', 'always') لا iOS

clearTextOnFocus

إذا أُعطيت هذه الخاصية القيمة true، يُفرَّغ حقل الإدخال عن الضغط عليه.

النوع مطلوب نظام التشغيل
قيمة منطقية (bool) لا iOS

contextMenuHidden

تُستخدم لإظهار أو إخفاء قائمة السياق (context menu). وقيمتها الافتراضية false.

النوع مطلوب
قيمة منطقية (bool) لا

dataDetectorTypes

تُحدّد أنواع البيانات المُدخلة التي ستُحوَّل إلى روابط يمكن الضغط عليها، ولا يمكن استخدام هذه الخاصية إلَّا مع الخاصيتين multiline=true و editable=false. ما قد تأخذ قيمةً واحدةً أو مصفوفة قيم.

القيم المُتاحة:

  • 'phoneNumber'
  • 'link'
  • 'address'
  • 'calenderEvent'
  • 'none'
  • 'all'
النوع مطلوب نظام التشغيل
إحدى القيم ('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all')

مصفوفة من القيم ('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all')

لا iOS

defaultValue

تعطي قيمة إبتدائيةً للمكوّن TextInpu، وتتغيَّر هذه القيمة تلقائيًا عندما يبدأ المستخدم في الكتابة. هي مفيدة في الحالات التي لا تود فيها انتظار وقوع حدثٍ ثم تحديث قيمة العنصر النصي وفقًا له لإبقاء الحالة المتحكم بها محدثة باستمرار (متزامنة).

النوع مطلوب
سلسلة نصية (string) لا

disableFullscreenUI

إذا كانت قيمة هذه الخاصية false - وهي القيمة الإفتراضية - يعرض نظام التشغيل حقل الإدخال في ملء الشاشة، أمّا إذا أعطيت القيمة true فسيُعَطَّل هذا السلوك ويُعرض حقل الإدخال في الحالة الطبيعية.

النوع مطلوب نظام التشغيل
قيمة منطقية (bool) لا أندرويد

editable

تمنع تعديل النص داخل حقل الإدخال TextInput إذا كانت قيمتها false، والقيمة الافتراضية هي true.

النوع مطلوب
قيمة منطقية (bool) لا

enablesReturnKeyAutomatically

عند إعطاء هذه الخاصية القيمة true، تُعطِّل لوحة المفاتيح زرّ الإدخال عندما يكون حقل الإدخال TextInput فارغًا، وتعيد تشغيله تلقائيًا عند وجود أيّ نص داخله، والقيمة الافتراضية هي false.

importantForAutofill

تُحدّد ما إذا كانت الحقول ستُضاف إلى هيكلة الواجهة بغرض الملء التلقائي (autofill) على واجهة نظام Android البرمجية ذات المستوى 26 وما بعد. القيمة الافتراضية هي auto. وقد تأخذ إحدى القيم التالية:

القيمة الوصف
auto تترك نظام التشغيل يُحدِّد ما إذا كان سيتم ملء الحقل تلقائيًا.
no تُعطل الملء التلقائي للحقول.
noExcludeDescendants تُعطل الملء التلقائي للحقول الأبناء للعنصر الحالي.
yes تُفعِّل الملء التلقائي للحقول.
yesExcludeDescendants تُفعِّل الملء التلقائي للحقول الأبناء للعنصر الحالي.
النوع مطلوب نظام التشغيل
‪('auto', 'no', 'noExcludeDescendants', 'yes', 'yesExcludeDescendants') لا أندرويد

inlineImageLeft

تعرض الصورة باتجاه اليسار. ينبغي أن تكون الصورة داخل الملف ‎/android/app/src/main/res/drawable، وتُستعمل كالآتي: 

<TextInput
 inlineImageLeft='search_icon'
/>
النوع مطلوب نظام التشغيل
سلسلة نصية (string) لا أندرويد

inlineImagePadding

تُحدد حجم الحاشية بين الصورة والنص الموجود داخل حقل الإدخال TextInput.

النوع مطلوب نظام التشغيل
عدد (number) لا أندرويد

inputAccessoryViewID

مُعَرِّف اختياري يستخدم لربط المكون InputAccessoryView مع حقل الإدخال TextInput. يُعرض المكون InputAccessiryView فوق لوحة المفاتيح عندما يُحدَّد المكون TextInput.

النوع مطلوب نظام التشغيل
سلسلة نصية (string) لا iOS

keyboardAppearance

تُحدد لون لوحة المفاتيح.

نوع مطلوب نظام التشغيل
‪('default', 'light', 'dark') لا iOS

keyboardType

تُستخدم لتحديد نوع لوحة المفاتيح المستخدمة للإدخال.

يمكنك رؤية كل قيمة الأنواع المحتملة من لقطات الشاشة هذه.

القيم العامة للخاصية (تعمل على نظام أندرويد و iOS)

  • default
  • number-pad
  • decimal-pad
  • numeric
  • email-address
  • phone-pad

قيم تعمل فقط على نظام iOS

  • ascii-capable
  • numbers-and-punctuation
  • url
  • name-phone-pad
  • twitter
  • web-search

قيم تعمل فقط على نظام أندرويد

  • visible-password
النوع مطلوب
('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search', 'visible-password') لا

maxFontSizeMultiplier

تُحدِّد أقصى تكبير ممكن للخط عندما تكون الخاصية allowFontScaling مُفعَّلة. وقد تأخذ القيم الآتية:

القيمة الوصف
null أو undefined ترث القيمة من العنصر الأب، أو تأخذ القيمة الإفتراضية (صفر) في حال عدم وجود قيمة للخاصية في العنصر الأب.
0 لا توجد قيمة كُبرى.
‎ >=1 تعطي الخاصية maxFontSizeMultiplier القيمة المُحددة.
النوع مطلوب
عدد (number) لا

maxLength

تُحدد أكبر عدد من الحروف يمكن إدخاله في الحقل TextInput. استعمل هذه الخاصية بدلًا من تنفيذ آلية مشابهة باستعمال لغة JavaScript لمنع حدوث أي ومضيع غير محبذ flicker.

النوع مطلوب
عدد (number) لا

multiline

تحدد ما إذا كان حقل الإدخال سطر واحد (وعندها تكون قيمتها false القيمة الافتراضية) أو عدة أسطر (القيمة true)، وتنبغي ملاحظتك لمحاذاة النص داخل عنصر الإدخال متعدد الأسطر إلى الأعلى على أجهزة iOS، وفي الوسط في أجهزة أندرويد، لذلك يجب استخدام الخاصية textAlignVertical للحصول على سلوك مشابه في النظامين.

النوع مطلوب
قيمة منطقية (bool) لا

numberOfLines

تُحدد عدد الأسطر للعنصر TextInput. استعملها مع ضبط قيمة الخاصية multiline السابقة إلى القيمة true لتصبح قادرًا على ملء الأسطر.

النوع مطلوب نظام التشغيل
عدد (number) لا أندرويد

onBlue

دالة تُستدعى عندما يُبعد التركيز عن العنصر.

ملاحظة: إن كنت تحاول الوصول إلى قيمة النص text من الحدث nativeEvent فتذكر أن القيمة التي يمكن أن تحصل عليها آنذاك هي undefind والتي قد تسبب خطأ غير مرغوب به، لذا للحصول إلى أحدث قيمة للمكون TextInput، فاستعمل الحدث onEndEditing والذي يقع (يُطلق) بعد انتهاء المستخدم من إجراء التعديلات.

النوع مطلوب
دالة (function) لا

onChange

دالة تُستدعَى عندما يتغير النص الموجود داخل العنصر TextInput.

النوع مطلوب
دالة (function)

‎({ nativeEvent: { eventCount, target, text} }) => void

لا

onContentSizeChange

دالة رد نداء تُستدعى عند تغير حجم محتوى عنصر الإدخال. وتستخدم فقط مع عناصر الإدخال متعددة الأسطر.

النوع مطلوب
دالة (function)

‎({ nativeEvent: { contentSize: { width, height } } }) => void

لا

onChangeText

دالة تستدعَى عندما يتغير النص الموجود داخل العنصر TextInput، ويُرسل النص الذي استُبدِل مثل معامل للدالة.

النوع مطلوب
دالة (function) لا

onEndEditing

دالة تُستدعَى عند الإنتهاء من عملية الإدخال.

النوع مطلوب
دالة (function) لا

onPressIn

دالة رد نداء تُستدعى عند بدء فعل اللمس.

النوع مطلوب
دالة (function)

‎({ nativeEvent: PressEvent }) => void

لا

onPressOut

دالة رد نداء تُستدعى عند تحرير فعل اللمس (إزالته والانتهاء منه).

النوع مطلوب
دالة (function)

‎({ nativeEvent: PressEvent }) => void

لا

onFocus

دالة تُستدعَى عند التركيز على العنصر وذلك بالضغط عليه.

النوع مطلوب
دالة (function)

‎({ nativeEvent: LayoutEvent }) => void

لا

onKeyPress

دالة تُستدعَى عند الضغط على أيّ زرّ على لوحة المفاتيح. ستُستدعى هذه الدالة مع كائن يأخذ المفتاح KeyValue القيمة 'Enter' أو القيمة 'Bakcspace' للمفاتيح المقابلة والمحارف المدخلة وإلا فإنها ستكون ' ' لمحرف المسافة. تُستدعى هذه الدالة قبل دالة رد نداء الحدث onChage.

ملاحظة: تعالج المدخلات على أنظمة Android من عناصر الإدخال من لوحة المفاتيح على الجهاز نفسه وليس من مدخلات نصية آتية من لوحة مفتاتيح خارجية.

النوع مطلوب
دالة (function)

‎({ nativeEvent: { key: keyValue } }) => void

لا

onLayout

دالة تُستدعَى مع الحدث onMount.

النوع مطلوب
دالة (function)

‎({ nativeEvent: LayoutEvent }) => void

لا

onScroll

دالة تُستدعَى عند التمرير (scroll) على المحتوى، وقد تحتوي على خاصيات من الحدث ScrollEvent ولكن لا توفر منصة Android قيمة contentSize لأمور متعلقة بالأداء.

النوع مطلوب
دالة (function)


‎({ nativeEvent: { contentOffset: { x, y } } }) => void

لا

onSelectionChange

دالة تُستدعَى عند تغيير النص المُحدّد، وتتطلب هذه الخاصية أن تكون الخاصية multiline=true موجودة.

النوع مطلوب
دالة (function)


‎({ nativeEvent: { selection: { start, end } } }) => void

لا

onSubmitEditing

دالة تُستدعَى عن الضغط على زرّ الإدخال (submit).

النوع مطلوب
دالة (function)


‎({ nativeEvent: { text, eventCount, target }}) => void

لا

ملاحظة: لا تعمل هذه الدالة على نظام iOS عندما يكون نوع لوحة المفاتيح phone-pad.

placeholder

تُحدِّد جملة أو سلسلة نصية تعمل مثل نص بديل يظهر عندما يكون عنصر الإدخال TextInput فارغًا.

النوع مطلوب
سلسلة نصية (string) لا

placeholderTextColor

تُحدِّد لون النص النائب (نص يُعرض بدلًا عن النص المُدخل عندما يكون العنصر فارغًا).

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

returnKeyType

تُحدِّد كيفية عمل زرّ الإدخال.

القيم العامة للخاصية (تعمل على نظام أندرويد و iOS)

  • done
  • go
  • next
  • search
  • send

قِيَم تعمل على نظام أندرويد فقط

  • none
  • previous

قِيَم تعمل على نظام iOS فقط

  • default
  • emergency-call
  • google
  • join
  • route
  • yahoo
النوع مطلوب
('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google',‪ 'join', 'route', 'yahoo') لا

returnKeyLabel

تُستعمل مثل بديل للخاصية returnKeyType على أجهزة أندرويد.

نوع مطلوب نظام التشغيل
سلسلة نصية (string) لا أندرويد

rejectResponderTermination

ملاحظة: تعمل هذه الخاصية على نظام iOS فقط.

تسمح للعنصر TextInput بتمرير حدث اللمس (touch event) للعنصر الأب عند إعطائها القيمة true، مما يسمح لبعض العناصر مثل SwipeableListView أن تُصبح قابلةً للتمرير من داخل العنصر TextInput. إن كانت قيمتها false فسيسأل المكون TextInput دومًا عن إمكانية معالجة المدخلات (إلا عندما يكون معطلًا). القيمة الافتراضية true.

نوع مطلوب نظام التشغيل
قيمة منطقية (bool) لا iOS

scrollEnable

تسمح بتشغيل أو تعطيل التمرير في حقول الإدخال متعدّدة الأسطر. القيمة الإفتراضية لها هي true. تعمل فقط عندما تكون قيمة multiline مضبوطة إلى true.

نوع مطلوب نظام التشغيل
قيمة منطقية (bool) لا iOS

secureTextEntry

تُستخدم لحجب النص المُدخل وذلك عن طريق استبداله بنقاط أو العلامة (*). ولا تعمل هذه الخاصية مع حقول الإدخال متعدِّدة الأسطر أي عندما تكون قيمة multiline مضبوطة إلى true.

النوع مطلوب
قيمة منطقية (bool) لا

selection

تُحدد موضع البداية والنهاية للنص المُحدد داخل العنصر TextInput.

النوع مطلوب
‪{start: number,end: number}‎ لا

selectionColor

تُحدِّد لون التظليل ومؤشر الإدخال.

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

selectTextOnFocus

تُحدِّد النص الموجود داخل العنصر TextInput تلقائيًا عن الضغط عليه.

النوع مطلوب
قيمة منطقية (bool) لا

showSoftInputOnFocus

تمنع ظهور لوحة المفاتيح عند التركيز على العنصر TextInput وذلك عندما تكون قيمتها false، والقيمة الافتراضية هي true.

النوع مطلوب نظام التشغيل
قيمة منطقية (bool) لا أندرويد

spellCheck

تستعمل لتشغيل أو تعطيل التدقيق الإملائي، وفي حال عدم تحديد قيمة لها فسترث قيمتها من الخاصية autoCorrect.

النوع مطلوب نظام التشغيل
قيمة منطقية (bool) لا iOS

textAlign

تُستخدم لتحديد محاذاة النص داخل العنصر TextInput. وتأخذ القيم:

  • left
  • center
  • right
النوع مطلوب
‪('left', 'center', 'right')‪ لا

textContentType

تُعطي النظام معلومات متعلقة بدلالات النصوص المتوقَّع إدخالها من المستخدم.

في الإصدار 11 من نظام iOS وما بعده يمكن تحديد القيمة username أو password للخاصية textContentType لتفعيل الملء التلقائي لبيانات الدخول (login).

في الإصدار 12 من نظام iOS وما بعده تُستخدم القيمة newPassword للدلالة على كلمة مرور جديدة يُتوقَع إدخالها من المستخدم وتُحفظ في الجهاز.

تُستخدم القيمة oneTimeCode للدلالة على إمكانية ملء الحقل تلقائيًا برمز يُرسل عن طريق رسالة نصية SMS.

لتعطيل الملء التلقائي تُستخدَم القيمة none للخاصية textContentType.

القيم المتاحة

  • none
  • URL
  • addressCity
  • addressCityAndState
  • addressState
  • countryName
  • creditCardNumber
  • emailAddress
  • familyName
  • fullStreetAddress
  • givenName
  • jobTitle
  • location
  • middleName
  • name
  • namePrefix
  • nameSuffix
  • nickname
  • organizationName
  • postalCode
  • streetAddressLine1
  • streetAddressLine2
  • sublocality
  • telephoneNumber
  • username
  • password
  • newPassword
  • oneTimeCode
النوع مطلوب نظام التشغيل
‪('none', 'URL', 'addressCity', 'addressCityAndState', 'addressState', 'countryName', 'creditCardNumber', 'emailAddress', 'familyName', 'fullStreetAddress', 'givenName', 'jobTitle', 'location', 'middleName', 'name', 'namePrefix', 'nameSuffix', 'nickname', 'organizationName', 'postalCode', 'streetAddressLine1', 'streetAddressLine2', 'sublocality', 'telephoneNumber', 'username', 'password') لا iOS

passwordRules

تُستعمل لإضافة شروط ينبغي تحقيقها حتى يكون النص المُدخل صالحًا.

النوع مطلوب نظام التشغيل
سلسلة نصية (string) لا iOS

انظر قائمة الشروط

style

تُستخدم لتطبيق أنماط معيّنة لتغيير شكل ومظهر حقل الإدخال TextInput. انتبه إلى أن الأنماط ليس كلها مدعومة وإليك قائمة غير كاملة بالأنماط غير المدعومة:

  • borderLeftWidth
  • borderTopWidth
  • borderRightWidth
  • borderBottomWidth
  • borderTopLeftRadius
  • borderTopRightRadius
  • borderBottomRightRadius
  • borderBottomLeftRadius

انظر المشكلة #7070 لمزيد من التفاصيل.

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

انظر قائمة الأنماط.

textBreakStrategy

تُستخدم لتحديد نقاط الفصل في النصوص (النقاط التي يتم عندها الانتقال لسطر جديد). ويمكن أخذ القيم التالية:

  • simple
  • highQuality
  • balanced
النوع مطلوب نظام التشغيل
('simple', 'highQuality', 'balanced') لا أندرويد

underlineColorAndroid

تُحدِّد لون الإطار السفلي للعنصر TextInput.

النوع مطلوب نظام التشغيل
لون لا أندرويد

value

قيمة العنصر TextInput.

المكون TextInput هو مكون متحكم به controlled component وهذا يعني أن القيمة الأصلية ستكون مماثلة لهذه القيمة إجباريًا إن أعطيت. فلأغلب الحالات، ذلك يعمل بسلاسة ولكن قد يسبب في حالات أخرى بعض سلوك الوميض flickering، ويفضل في مثل تلك الحالات منع إجراء التعديلات على العنصر النصي مع الحفاظ على قيمة واحدة له بالإضافة إلى ضبط editable={false} أو ضبط أو تحديث قيمة maxLenght لمنع أي سلوك تعديل غير مرغوب فيه تجنبًا لسلوك الوميض ذاك.

النوع مطلوب
سلسلة نصية (string) لا

مرجع التوابع

‎.focus()‎

focus();

تُستخدم لتحويل التركيز للعنصر الذي تُستدعى فيه.

‎.blur()‎

blue();

تُستخدم لنقل التركيز بعيدًا عن العنصر الذي تُستدعى فيه.

‎clear()‎

clear();

تُستخدم لمسح محتوى العنصر TextInput.

‎isFocused()‎

isFocused();

تُرجع القيمة true إذا كان العنصر الذي استُدعيت فيه الدالة في وضع التركيز (focsed) وfalseفيما عدا ذلك.

مشاكل معروفة

  • react-native#19096: لا يُدعم onKeyPreIme على منصة Android.
  • react-native#19366: استدعاء ()focus بعد إغلاق لوحة المفاتيح على منصة Android عبر رز الرجوع يسبب في عدم فتح لوحة المفتاتيح مرة أخرى.
  • react-native#26799: لا يُدعم secureTextEntry على منصة Android عند ضبط قيمة keyboardType إلى "email-address" أو "phone-pad".

المصادر

مجلوبة من «https://wiki.hsoub.com/index.php?title=ReactNative/textinput&oldid=31531»