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

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
(رفع المحتوى)
 
(رفع المحتوى)
سطر 1: سطر 1:
−
<noinclude>{{DISPLAYTITLE:المكون AlertIOS في ReactNative}}</noinclude>
+
<noinclude>{{DISPLAYTITLE:المكون TextInput في ReactNative}}</noinclude>
−
'''مكون مهمل'''، استخدم المكون [https://wiki.hsoub.com/ReactNative/alert <code>Alert</code>] بدلًا عنه.
+
يُعتبر المكون <code>TextInput</code> من المكونات الأساسية في React Native، حيث يسمح للمستخدم بإدخال النصوص عن طريق لوحة المفاتيح، ويمكن التحكم في نوع الإدخال (نص، وأرقام، وبريد إلكتروني، وكلمة مرور ...إلخ) ونوع لوحة المفاتيح وغيرها من الخاصيات (props) التي سيأتي بيانها لاحقًا.
  
−
يمكنك المكون <code>AlertIOS</code> من إنشاء صناديق تنبيهات أو صناديق إدخال لاستقبال بيانات من المستخدم على أنظمة iOS.
+
توضح الشيفرة أدناه كيفية استخدام المكون <code>TextInput</code>، حيث يتم الاستماع للحدث <code>onChangeText</code> والذي يُحدِّث القيمة الخاصة بالمكون <code>TextInput</code> والمخزنة في الحالة (State) عند الضغط على أي زر في لوحة المفاتيح. وتوجد أحداث أخرى مثل <code>onSubmitEditing</code> و <code>onFocus</code> ستُشرح وظائفها لاحقًا.
  
−
'''مثال''': إنشاء تنبيهات
+
<syntaxhighlight class="react">import React from 'react';
 +
import { TextInput } from 'react-native';
  
−
<syntaxhighlight class="react">AlertIOS.alert(
+
const UselessTextInput = () =&gt; {
−
   'Sync Complete',
+
   const [value, onChangeText] = React.useState('Useless Placeholder');
−
  'All your data belongs to us.'
 
−
);</syntaxhighlight>
 
  
 +
  return (
 +
    &lt;TextInput
 +
      style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
 +
      onChangeText={text =&gt; onChangeText(text)}
 +
      value={value}
 +
    /&gt;
 +
  );
 +
}
  
−
'''مثال''': إنشاء صناديق إدخال
+
export default UselessTextInput;</syntaxhighlight>
 +
تُستخدم الدالتان <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> وتطبيق هذه الخواص على الأخير.
 +
 
 +
'''مثال'''
 +
 
 +
<syntaxhighlight class="react">import React from 'react';
 +
import { View, TextInput } from 'react-native';
 +
 
 +
const UselessTextInput = (props) =&gt; {
 +
  return (
 +
    &lt;TextInput
 +
      {...props}
 +
      editable
 +
      maxLength={40}
 +
    /&gt;
 +
  );
 +
}
 +
 
 +
const UselessTextInputMultiline = () =&gt; {
 +
  const [value, onChangeText] = React.useState('Useless Multiline Placeholder');
 +
 
 +
  return (
 +
    &lt;View
 +
      style={{
 +
        backgroundColor: value,
 +
        borderBottomColor: '#000000',
 +
        borderBottomWidth: 1,
 +
      }}&gt;
 +
      &lt;UselessTextInput
 +
        multiline
 +
        numberOfLines={4}
 +
        onChangeText={text =&gt; onChangeText(text)}
 +
        value={value}
 +
      /&gt;
 +
    &lt;/View&gt;
 +
  );
 +
}
 +
 
 +
export default UselessTextInputMultiline;</syntaxhighlight>
 +
 
 +
 
 +
'''ملاحظة''': يمتلك المكون <code>TextInput</code> إطارًا سفليًا، وتوجد حاشية بارتفاع معين بين الإطار و العنصر نفسه، ولا يمكن تعديل ارتفاعها، لحل هذه المشكلة يمكن إتباع إحدى الطريقتين التاليتين:
 +
 
 +
# عدم تحديد إرتفاع معين للمكون <code>TextInput</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).
  
−
<syntaxhighlight class="react">AlertIOS.prompt('Enter a value', null, (text) =&gt;
 
−
  console.log('You entered ' + text)
 
−
);</syntaxhighlight>
 
−
يستحسن استخدام الدالة <code>Alert.alert</code> إذا كنت تريد الحصول على نفس السلوك على نظام أندرويد.
 
 
__toc__
 
__toc__
−
== التوابع ==
 
  
−
=== <code>alert()</code> ===
+
== مرجع الخاصيَّات ==
  
−
<syntaxhighlight class="react">static alert(title: string, [message]: string, [callbackOrButtons]: ?(() =&gt; void), ButtonsArray, [type]: AlertType): [object Object]</syntaxhighlight>
+
=== <code>allowFontScaling</code> ===
−
تُظهر تنبيهًا منبثقًا.
 
  
−
'''المعاملات'''
+
تُحدد ما إذا كان يجب تغيير حجم الخطوط لتناسب إعدادات حجم النص الخاصة بإمكانية الوصول (Accessibility settings). القيمة الافتراضية هي <code>true</code>.
  
 
{| class="wikitable"
 
{| class="wikitable"
−
! الاسم
 
 
! النوع
 
! النوع
 
! مطلوب
 
! مطلوب
 +
|-
 +
| قيمة منطقية (bool)
 +
| لا
 +
|}
 +
 +
 +
 +
=== <code>autoCapitalize</code> ===
 +
 +
تستخدم لتفعيل تكبير الأحرف تلقائيًا، وهي غير مدعومة في بعض أنواع لوحات المفاتيح مثل <code>name-phone-pad</code>.
 +
 +
{| class="wikitable"
 +
! القيمة
 
! الوصف
 
! الوصف
 
|-
 
|-
−
| title
+
| <code>character</code>
−
| سلسلة نصية (string)
+
| تكبير جميع الأحرف.
−
| نعم
+
|-
−
| عنوان التنبيه، إعطاء القيمة <code>null</code> أو <code>&quot;&quot;</code> سيُخفي التنبيه.
+
| <code>words</code>
 +
| تكبير الحرف الأول من كل كلمة.
 +
|-
 +
| <code>sentences</code>
 +
| تكبير الحرف الأول من كل جملة (القيمة الإفتراضية).
 +
|-
 +
| <code>none</code>
 +
| تعطيل التكبير التلقائي للأحرف.
 +
|}
 +
 
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 +
|-
 +
| enum('none', 'sentences', 'words', 'characters')
 +
| لا
 +
|}
 +
 
 +
 
 +
 
 +
=== <code>autoCompleteType</code> ===
 +
 
 +
تقدّم أنظمة التشغيل والبرامج المختلفة خاصية الإكمال التلقائي، إذ يُدخل المستخدمة جزءًا من الكلمة التي يريد البحث عنها فيعطيه النظام أو البرنامج بعض الاقتراحات لإكمال الكلمة التي أدخلها تلقائيًا وذلك بالاستناد إلى مجموعة من السلسلة النصية المخزّنة مسبقًا في النظام.
 +
 
 +
تأخذ الخاصية <code>autoCompleteType</code> إحدى القيم التالية:
 +
 
 +
* <code>off</code>
 +
* <code>username</code>
 +
* <code>password</code>
 +
* <code>email</code>
 +
* <code>name</code>
 +
* <code>tel</code>
 +
* <code>street-address</code>
 +
* <code>postal-code</code>
 +
* <code>cc-number</code>
 +
* <code>cc-csc</code>
 +
* <code>cc-exp</code>
 +
* <code>cc-exp-month</code>
 +
* <code>cc-exp-year</code>
 +
 
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 +
! نظام التشغيل
 +
|-
 +
| <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>
 +
| لا
 +
| أندرويد
 +
|}
 +
 
 +
 
 +
 
 +
=== <code>autoCorrect</code> ===
 +
 
 +
تستخدم لتفعيل أو تعطيل التصحيح التلقائي للكلمات. القيمة الافتراضية هي <code>true</code>.
 +
 
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 +
|-
 +
| قيمة منطقية (bool)
 +
| لا
 +
|}
 +
 
 +
 
 +
 
 +
=== <code>autoFocus</code> ===
 +
 
 +
تسمح لنا هذه الخاصية بنقل التركيز (focus) تلقائيًا إلى العنصر عند تحميل الصفحة (<code>componentDidMount</code>). القيمة الافتراضية هي <code>false</code>.
 +
 
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 +
|-
 +
| قيمة منطقية (bool)
 +
| لا
 +
|}
 +
 
 +
 
 +
 
 +
=== <code>blurOnSubmit</code> ===
 +
 
 +
تسمح هذه الخاصية بنقل التركيز بعيدًا عن العنصر، القيمة الافتراضية لها هي <code>true</code> لحقول الإدخال ذات السطر الواحد، والقيمة <code>false</code> للحقول ذات الأسطر المتعددة. إعطاء الخاصية القيمة <code>true</code> للحقول ذات الأسطر المتعددة سينقل التركيز بعيدًا عن العنصر عن الضغط على زر الإدخال Enter بدلًا عن الانتقال لسطر جديد.
 +
 
 +
 
 +
 
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 
|-
 
|-
−
| message
+
| قيمة منطقية (bool)
−
| سلسلة نصية (string)
 
 
| لا
 
| لا
−
| رسالة إختيارية تظهر تحت العنوان.
+
|}
 +
 
 +
 
 +
 
 +
=== <code>carretHidden</code> ===
 +
 
 +
تُخفي هذه الخاصية مؤشر الإدخال إذا كانت قيمتها <code>true</code>. القيمة الإفتراضية لها هي <code>false</code>.
 +
 
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 
|-
 
|-
−
| callbackOrButtons
+
| قيمة منطقية (bool)
−
| ?(() =&gt; void),[https://reactnative.dev/docs/alertios#buttonsarray ButtonsArray]
 
 
| لا
 
| لا
−
| يجب أن تكون هذه المعاملات الاختيارية إما دالة أو مجموعة من الأزرار. في حال كانت دالة واحدة، تُستدعى عندما ينقر المستخدم على زر &quot;موافق&quot; (OK)، أما إذا كانت مجموعة أزار فيجب أن يشتمل كل زر على مفتاح <code>text</code> و دالة <code>onPress</code>، و<code>style</code> والتي يجب أن تكون قيمتها إحدى القيم <code>default</code> أو<code>cancel</code> أو <code>destructive</code>.
+
|}
 +
 
 +
 
 +
 
 +
=== <code>clearButtonMode</code> ===
 +
 
 +
تُحدد متى سيظهر زر المسح (clear) بجانب حقل الإدخال <code>TextInput</code>. القيمة الافتراضية هي <code>never</code>.
 +
 
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 +
! نظام التشغيل
 
|-
 
|-
−
| type
+
| enum('never', 'while-editing', 'unless-editing', 'always')
−
| [https://reactnative.dev/docs/alertios#alerttype AlertType]
 
 
| لا
 
| لا
−
| '''معامل مهمل يجب عدم استخدامه'''
+
| iOS
 
|}
 
|}
  
  
  
−
'''مثال مع أزرار مخصصة'''
+
=== <code>clearTextOnFocus</code> ===
  
−
<syntaxhighlight class="react">AlertIOS.alert(
+
إذا أُعطيت هذه الخاصية القيمة <code>true</code>، يُفرَّغ حقل الإدخال عن الضغط عليه.
−
  'Update available',
 
−
  'Keep your app up to date to enjoy the latest features',
 
−
  [
 
−
    {
 
−
      text: 'Cancel',
 
−
      onPress: () =&gt; console.log('Cancel Pressed'),
 
−
      style: 'cancel'
 
−
    },
 
−
    {
 
−
      text: 'Install',
 
−
      onPress: () =&gt; console.log('Install Pressed')
 
−
    }
 
−
  ]
 
−
);</syntaxhighlight>
 
−
 
  
−
=== <code>prompt()</code> ===
+
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 +
! نظام التشغيل
 +
|-
 +
| قيمة منطقية (bool)
 +
| لا
 +
| iOS
 +
|}
  
−
<syntaxhighlight class="react">static prompt(title: string, [message]: string, [callbackOrButtons]: ?((text: string) =&gt; void), ButtonsArray, [type]: AlertType, [defaultValue]: string, [keyboardType]: string): [object Object]</syntaxhighlight>
 
−
تظهر صندوق إدخال لاستقبال بيانات نصية من المستخدم.
 
  
−
'''المعاملات'''
+
 
 +
=== <code>contextMenuHidden</code> ===
 +
 
 +
تستخدم لإظهار أو إخفاء قائمة السياق (context menu).
  
 
{| class="wikitable"
 
{| class="wikitable"
−
! الاسم
 
 
! النوع
 
! النوع
 
! مطلوب
 
! مطلوب
−
! الوصف
 
 
|-
 
|-
−
| title
+
| قيمة منطقية (bool)
−
| سلسلة نصية (string)
+
| لا
−
| نعم
+
|}
−
| عنوان التنبيه، إعطاء القيمة <code>null</code> أو <code>&quot;&quot;</code> سيُخفي التنبيه.
+
 
 +
 
 +
 
 +
=== <code>dataDetectorTypes</code> ===
 +
 
 +
تُحدد أنواع البيانات المُدخلة التي ستُحول إلى روابط يمكن الضغط عليها. لا يمكن استخدام هذه الخاصية إلَّا مع الخاصيتين <code>multiline=true</code>و <code>editable=false</code>. ويمكن أن تأخذ قيمة واحدة أو مصفوفة قيم.
 +
 
 +
'''القيم المُتاحة''':
 +
 
 +
* <code>'phoneNumber'</code>
 +
* <code>'link'</code>
 +
* <code>'address'</code>
 +
* <code>'calenderEvent'</code>
 +
* <code>'none'</code>
 +
* <code>'all'</code>
 +
 
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 +
! نظام التشغيل
 +
|-
 +
| enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), ,array of enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all')
 +
| لا
 +
| iOS
 +
|}
 +
 
 +
 
 +
 
 +
=== <code>defaultValue</code> ===
 +
 
 +
تعطي قيمة إبتدائية للمكون <code>TextInpu</code>، وتتغيَّر هذه القيمة تلقائيًا عندما يبدأ المستخدم في الكتابة.
 +
 
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 
|-
 
|-
−
| message
 
 
| سلسلة نصية (string)
 
| سلسلة نصية (string)
 
| لا
 
| لا
−
| رسالة إختيارية تظهر تحت العنوان.
+
|}
 +
 
 +
 
 +
 
 +
=== <code>disableFullscreenUI</code> ===
 +
 
 +
إذا كانت قيمة هذه الخاصية <code>false</code>- وهي القيمة الإفتراضية - يعرض نظام التشغيل حقل الإدخال في ملء الشاشة. أما إذا أعطيت القيمة <code>true</code> يُعَطَّل هذه السلوك ويُعرض حقل الإدخال في الحالة الطبيعية.
 +
 
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 +
! نظام التشغيل
 
|-
 
|-
−
| callbackOrButtons
+
| قيمة منطقية (bool)
−
| ?(() =&gt; void),[https://reactnative.dev/docs/alertios#buttonsarray ButtonsArray]
 
 
| لا
 
| لا
−
| يجب أن تكون هذه المعاملات الاختيارية إما دالة أو مجموعة من الأزرار. في حال كانت دالة واحدة، تُستدعى عندما ينقر المستخدم على زر &quot;موافق&quot; (OK)، أما إذا كانت مجموعة أزار فيجب أن يشتمل كل زر على مفتاح <code>text</code> و دالة <code>onPress</code>، و<code>style</code> والتي يجب أن تكون قيمتها إحدى القيم <code>default</code> أو<code>cancel</code> أو <code>destructive</code>.
+
| أندرويد
 +
|}
 +
 
 +
 
 +
 
 +
=== <code>editable</code> ===
 +
 
 +
تمنع تعديل النص داخل حقل الإدخال <code>TextInput</code> إذا كانت قيمتها <code>false</code>. القيمة الافتراضية هي <code>true</code>.
 +
 
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 
|-
 
|-
−
| type
+
| قيمة منطقية (bool)
−
| [https://reactnative.dev/docs/alertios#alerttype AlertType]
 
 
| لا
 
| لا
−
| يُحدد نوع النص الذي يجب إدخاله، ويأخذ القيم <code>plain-text</code> أو <code>secure-text</code> أو <code>login-password</code>.
+
|}
 +
 
 +
 
 +
 
 +
=== <code>enablesReturnKeyAutomatically</code> ===
 +
 
 +
عند إعطاء هذه الخاصية القيمة <code>true</code>، تُعطِّل لوحة المفاتيح زر الإدخال عندما يكون حقل الإدخال <code>TextInput</code> فارغًا، وتعيد تشغيله تلقائيًا عند وجود أي نص داخله. القيمة الافتراضية هي <code>false</code>.
 +
 
 +
 
 +
 
 +
=== <code>importantForAutofill</code> ===
 +
 
 +
تُحدد ما إذا كانت الحقول ستضاف إلى هيكلة العرض بغرض الملء التلقائي (autofill). القيمة الافتراضية هي <code>auto</code>. ويمكن أن تأخذ إحدى القيم التالية:
 +
 
 +
{| class="wikitable"
 +
! القيمة
 +
! الوصف
 +
|-
 +
| <code>auto</code>
 +
| تترك نظام التشغيل يُحدد ما إذا كان سيتم ملء الحقل تلقائيًا.
 +
|-
 +
| <code>no</code>
 +
| تُعطل الملء التلقائي للحقول.
 +
|-
 +
| <code>noExcludeDescendants</code>
 +
| تُعطل الملء التلقائي للحقول الأبناء للعنصر الحالي.
 +
|-
 +
| <code>yes</code>
 +
| تُفعِّل الملء التلقائي للحقول.
 +
|-
 +
| <code>yesExcludeDescendants</code>
 +
| تُفعِّل الملء التلقائي للحقول الأبناء للعنصر الحالي.
 +
|}
 +
 
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 +
! نظام التشغيل
 +
|-
 +
| enum('auto', 'no', 'noExcludeDescendants', 'yes', 'yesExcludeDescendants')
 +
| لا
 +
| أندرويد
 +
|}
 +
 
 +
 
 +
 
 +
=== <code>inlineImageLeft</code> ===
 +
 
 +
تعرض الصورة باتجاه اليسار. ينبغي أن تكون الصورة داخل الملف <code>‎/android/app/src/main/res/drawable</code>، وتُستعمل كالآتي:
 +
 
 +
<syntaxhighlight class="react">&lt;TextInput inlineImageLeft='search_icon' /&gt;</syntaxhighlight>
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 +
! نظام التشغيل
 
|-
 
|-
−
| defaultValue
 
 
| سلسلة نصية (string)
 
| سلسلة نصية (string)
 
| لا
 
| لا
−
| يُحدد القيمة الإفتراضية لحقل الإدخال.
+
| أندرويد
 +
|}
 +
 
 +
 
 +
 
 +
=== <code>inlineImagePadding</code> ===
 +
 
 +
تُحدد حجم الحاشية بين الصورة والنص الموجود داخل حقل الإدخال <code>TextInput</code>.
 +
 
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 +
! نظام التشغيل
 +
|-
 +
| رقم (number)
 +
| لا
 +
| أندرويد
 +
|}
 +
 
 +
 
 +
 
 +
=== <code>inputAccessoryViewID</code> ===
 +
 
 +
مُعَرِّف اختياري يستخدم لربط المكون <code>InputAccessoryView</code> مع حقل الإدخال <code>TextInput</code>. يُعرض المكون <code>InputAccessiryView</code> فوق لوحة المفاتيح عندما يُحدد المكون <code>TextInput</code>.
 +
 
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 +
! نظام التشغيل
 
|-
 
|-
−
| keyboardType
 
 
| سلسلة نصية (string)
 
| سلسلة نصية (string)
 
| لا
 
| لا
−
| يُحدد نوع لوحة المفاتيح. ويأخذ القيم <code>default</code> أو <code>email-address</code> أو <code>numeric</code> أو <code>phone-pad</code> أو <code>ascii-capable</code> أو <code>numbers-and-punctuation</code> أو <code>url</code> أو <code>number-pad</code> أو <code>name-phone-pad</code> أو <code>decimal-pad</code> أو <code>twitter</code> أو <code>web-search</code>.
+
| iOS
 
|}
 
|}
  
−
'''مثال'''
 
  
−
<syntaxhighlight class="react">AlertIOS.prompt(
 
−
  'Enter password',
 
−
  'Enter your password to claim your $1.5B in lottery winnings',
 
−
  [
 
−
    {
 
−
      text: 'Cancel',
 
−
      onPress: () =&gt; console.log('Cancel Pressed'),
 
−
      style: 'cancel'
 
−
    },
 
−
    {
 
−
      text: 'OK',
 
−
      onPress: (password) =&gt;
 
−
        console.log('OK Pressed, password: ' + password)
 
−
    }
 
−
  ],
 
−
  'secure-text'
 
−
);</syntaxhighlight>
 
−
'''مثال مع الأزرار الافتراضية و رد نِداء مُخصص'''
 
  
−
<syntaxhighlight class="react">AlertIOS.prompt(
+
=== <code>keyboardAppearance</code> ===
−
  'Update username',
+
 
−
  null,
+
تُحدد لون لوحة المفاتيح.
−
  (text) =&gt; console.log('Your username is ' + text),
+
 
−
  null,
+
{| class="wikitable"
−
  'default'
+
! نوع
−
);</syntaxhighlight>
+
! مطلوب
 +
! نظام التشغيل
 +
|-
 +
| enum('default', 'light', 'dark')
 +
| لا
 +
| iOS
 +
|}
 +
 
 +
 
 +
 
 +
=== <code>keyboardType</code> ===
 +
 
 +
تُستخدم لتحديد نوع لوحة المفاتيح المستخدمة للإدخال.
 +
 
 +
'''القيم العامة للخاصية (تعمل على نظام أندرويد و iOS)'''
 +
 
 +
* <code>default</code>
 +
* <code>number-pad</code>
 +
* <code>decimal-pad</code>
 +
* <code>numeric</code>
 +
* <code>email-address</code>
 +
* <code>phone-pad</code>
 +
 
 +
'''قيم تعمل فقط على نظام iOS'''
 +
 
 +
* <code>ascii-capable</code>
 +
* <code>numbers-and-punctuation</code>
 +
* <code>url</code>
 +
* <code>name-phone-pad</code>
 +
* <code>twitter</code>
 +
* <code>web-search</code>
 +
 
 +
'''قيم تعمل فقط على نظام أندرويد'''
  
 +
* <code>visible-password</code>
  
−
== تعريفات الأنواع ==
+
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 +
|-
 +
| 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')
 +
| لا
 +
|}
  
−
=== AlertType ===
 
  
−
يُحدد نوع زر التنبيه.
 
  
−
* النوع: <code>\$Enum</code>
+
=== <code>maxFontSizeMultiplier</code> ===
  
−
'''الثوابت'''
+
تُحدِّد أقصى تكبير ممكن للخط عندما تكون الخاصية <code>allowFontScaling</code> مُفعَّلة. ويمكن أن تأخذ القيم الآتية:
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 164: سطر 476:
 
! الوصف
 
! الوصف
 
|-
 
|-
−
| default
+
| <code>null</code> أو <code>undefined</code>
−
| التنبية الإفتراضي، لا يوجد حقل إدخال.
+
| ترث القيمة من العنصر الأب، أو تأخذ القيمة الإفتراضية (صفر) في حال عدم وجود قيمة للخاصية في العنصر الأب.
 +
|-
 +
| <code>0</code>
 +
| لا توجد قيمة كُبرى.
 +
|-
 +
| <code>‎ &gt;=1</code>
 +
| تعطي الخاصية <code>maxFontSizeMultiplier</code> القيمة المُحددة.
 +
|}
 +
 
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 +
|-
 +
| رقم (number)
 +
| لا
 +
|}
 +
 
 +
 
 +
 
 +
=== <code>maxLength</code> ===
 +
 
 +
تُحدد أكبر عدد من الحروف يمكن إدخاله في الحقل <code>TextInput</code>.
 +
 
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 +
|-
 +
| رقم (number)
 +
| لا
 +
|}
 +
 
 +
 
 +
 
 +
=== <code>multiline</code> ===
 +
 
 +
تحدد ما إذا كان حقل الإدخال سطر واحد (وعندها تكون قيمتها <code>false</code>) أو عدة أسطر (القيمة <code>true</code>). ينبغي أن تلاحظ أن النص داخل عنصر الإدخال متعدد الأسطر يكون محاذيًا للأعلى على أجهزة iOS، وفي الوسط في أجهزة أندرويد، لذلك يجب استخدام الخاصية <code>textAlignVertical</code> للحصول على سلوك مشابه في النظامين.
 +
 
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 +
|-
 +
| قيمة منطقية (bool)
 +
| لا
 +
|}
 +
 
 +
 
 +
 
 +
=== الخاصية <code>numberOfLines</code> ===
 +
 
 +
تُحدد عدد الأسطر للعنصر <code>TextInput</code>.
 +
 
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 +
! نظام التشغيل
 +
|-
 +
| رقم (number)
 +
| لا
 +
| أندرويد
 +
|}
 +
 
 +
 
 +
 
 +
=== <code>onBlue</code> ===
 +
 
 +
دالة تُستدعى عندما يُبعد التركيز عن العنصر.
 +
 
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 +
|-
 +
| دالة (function)
 +
| لا
 +
|}
 +
 
 +
 
 +
 
 +
=== <code>onChange</code>  ===
 +
 
 +
دالة تُستدعَى عندما يتغير النص الموجود داخل العنصر <code>TextInput</code>. ويتم استدعائها عن طريق <code>{nativeEvent: {eventCount, target, text}‎}</code>.
 +
 
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 +
|-
 +
| دالة (function)
 +
| لا
 +
|}
 +
 
 +
 
 +
 
 +
=== <code>onChangeText</code> ===
 +
 
 +
دالة تستدعَى عندما يتغير النص الموجود داخل العنصر <code>TextInput</code>، ويُرسل النص الذي تم استبداله كمعامل للدالة.
 +
 
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 +
|-
 +
| دالة (function)
 +
| لا
 +
|}
 +
 
 +
 
 +
 
 +
=== <code>onEndEditing</code> ===
 +
 
 +
دالة تُستدعَى عند الإنتهاء من عملية الإدخال.
 +
 
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 +
|-
 +
| دالة (function)
 +
| لا
 +
|}
 +
 
 +
 
 +
 
 +
=== <code>onFocus</code> ===
 +
 
 +
دالة تُستدعَى عند التركيز على العنصر وذلك بالضغط عليه.
 +
 
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 +
|-
 +
| دالة (function)
 +
| لا
 +
|}
 +
 
 +
 
 +
 
 +
=== <code>onKeyPress</code> ===
 +
 
 +
دالة تُستدعَى عند الضغط على أي زر على لوحة المفاتيح.
 +
 
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 
|-
 
|-
−
| plain-text
+
| دالة (function)
−
| تنبه مع حقل إدخال سلسلة نصية عادية.
+
| لا
 +
|}
 +
 
 +
 
 +
 
 +
=== <code>onLayout</code> ===
 +
 
 +
دالة تُستدعَى مع الحدث <code>onMount</code>.  
 +
 
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 
|-
 
|-
−
| secure-text
+
| دالة (function)
−
| تنبيه مع حقل إدخال نص آمن.
+
| لا
 +
|}
 +
 
 +
 
 +
 
 +
=== <code>onScroll</code> ===
 +
 
 +
دالة تُستدعَى عند التمرير (scroll) في الاتجاهات الأربعة، تُرسل إحداثيات الموضع الحالي كمعاملات للدالة.
 +
 
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 
|-
 
|-
−
| login-password
+
| دالة (function)
−
| تنبيه كلمة المرور أو تسجيل الدخول.
+
| لا
 
|}
 
|}
  
  
  
−
=== AlertButtonStyle ===
+
=== الخاصية <code>onSelectionChange</code> ===
  
−
تُحدد أنماط زر التنبيه.
+
دالة تُستدعَى عند تغيير النص المُحدد. تتطلب هذه الخاصية أن تكون الخاصية <code>multiline=true</code> موجودة.
  
−
<ul>
+
{| class="wikitable"
−
<li><p>النوع: <code>\$Enum</code></p>
+
! النوع
−
<p>'''الثوابت'''</p></li></ul>
+
! مطلوب
 +
|-
 +
| دالة (function)
 +
| لا
 +
|}
 +
 
 +
 
 +
 
 +
=== <code>onSubmitEditing</code> ===
 +
 
 +
دالة تُستدعَى عن الضغط على زر الإدخال (submit).
  
 
{| class="wikitable"
 
{| class="wikitable"
−
! القيمة
+
! النوع
−
! الوصف
+
! مطلوب
 
|-
 
|-
−
| default
+
| دالة (function)
−
| زر التنبيه الإفتراضي.
+
| لا
 +
|}
 +
 
 +
'''ملاحظة''': لا تعمل هذه الدالة على نظام <code>iOS</code> عندما يكون نوع لوحة المفاتيح <code>phone-pad</code>.
 +
 
 +
 
 +
 
 +
=== <code>placeholder</code> ===
 +
 
 +
تُحدِّد جملة أو سلسلة نصية تعمل كنص بديل يظهر عندما يكون عنصر الإدخال <code>TextInput</code> فارغًا.
 +
 
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 
|-
 
|-
−
| cancel
+
| سلسلة نصية (string)
−
| زر الإلغاء.
+
| لا
 +
|}
 +
 
 +
 
 +
 
 +
=== <code>placeholderTextColor</code> ===
 +
 
 +
تُحدِّد لون النص النائب (نص يُعرض بدلًا عن النص المُدخل عندما يكون العنصر فارغًا).  
 +
 
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 
|-
 
|-
−
| destructive
+
| [https://reactnative.dev/docs/colors لون]
−
| زر الهدم.
+
| لا
 
|}
 
|}
  
  
  
−
=== ButtonsArray ===
+
=== <code>returnKeyType</code> ===
  
−
مصفوفة يمثل كل عنصر فيها زرًا من الأزرار التي ستُعرض أسفل رسالة التنبيه.
+
تُحدِّد كيفية عمل زر الإدخال.
  
−
* النوع: مصفوفة.
+
'''القيم العامة للخاصية (تعمل على نظام أندرويد و iOS)'''
  
−
'''الخاصيات'''
+
* <code>done</code>
 +
* <code>go</code>
 +
* <code>next</code>
 +
* <code>search</code>
 +
* <code>send</code>
  
−
+
'''قيم تعمل على نظام أندرويد فقط'''
 +
 
 +
* <code>none</code>
 +
* <code>previous</code>
 +
 
 +
'''قيم تعمل على نظام iOS فقط'''
 +
 
 +
* <code>default</code>
 +
* <code>emergency-call</code>
 +
* <code>google</code>
 +
* <code>join</code>
 +
* <code>route</code>
 +
* <code>yahoo</code>
  
 
{| class="wikitable"
 
{| class="wikitable"
−
! الاسم
 
 
! النوع
 
! النوع
−
! الوصف
+
! مطلوب
 +
|-
 +
| <code>enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo')</code>
 +
| لا
 +
|}
 +
 
 +
=== الخاصية <code>returnKeyLabel</code> ===
 +
 
 +
تُستعمل كبديل للخاصية <code>returnKeyType</code> على أجهزة أندرويد.
 +
 
 +
{| class="wikitable"
 +
! نوع
 +
! مطلوب
 +
! نظام التشغيل
 
|-
 
|-
−
| [text]
 
 
| سلسلة نصية (string)
 
| سلسلة نصية (string)
−
| إسم الزر.
+
| لا
 +
| أندرويد
 +
|}
 +
 
 +
 
 +
 
 +
=== الخاصية <code>rejectResponderTermination</code> ===
 +
 
 +
'''ملاحظة''': تعمل هذه الخاصية على نظام iOS فقط.
 +
 
 +
تسمح للعنصر <code>TextInput</code> بتمرير حدث اللمس (touch event) للعنصر الأب عند إعطائها القيمة <code>true</code>، مما يسمح لبعض العناصر مثل <code>SwipeableListView</code> أن تصبح قابلة للتمرير من داخل العنصر <code>TextInput</code>.
 +
 
 +
{| class="wikitable"
 +
! نوع
 +
! مطلوب
 +
! نظام التشغيل
 
|-
 
|-
−
| [onPress]
+
| قيمة منطقية (bool)
−
| دالة (function)
+
| لا
−
| دالة تُستدعَى عند الضغط على الزر.
+
| iOS
 +
|}
 +
 
 +
 
 +
 
 +
=== الخاصية <code>scrollEnable</code> ===
 +
 
 +
تسمح بتشغيل أو تعطيل التمرير في حقول الإدخال متعددة الأسطر. القيمة الإفتراضية لها هي <code>true</code>.
 +
 
 +
{| class="wikitable"
 +
! نوع
 +
! مطلوب
 +
! نظام التشغيل
 +
|-
 +
| قيمة منطقية (bool)
 +
| لا
 +
| iOS
 +
|}
 +
 
 +
 
 +
 
 +
=== الخاصية <code>secureTextEntry</code> ===
 +
 
 +
تُستخدم لحجب النص المُدخل وذلك عن طريق استبداله بنقاط أو العلامة (*). ولا تعمل هذه الخاصية مع حقول الإدخال متعددة الأسطر.
 +
 
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 +
|-
 +
| قيمة منطقية (bool)
 +
| لا
 +
|}
 +
 
 +
 
 +
 
 +
=== الخاصية <code>selection</code> ===
 +
 
 +
تُحدد موضع البداية والنهاية للنص المُحدد داخل العنصر <code>TextInput</code>.
 +
 
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 +
|-
 +
| object: {start: number,end: number}‎
 +
| لا
 +
|}
 +
 
 +
 
 +
 
 +
=== الخاصية <code>selectionColor</code> ===
 +
 
 +
تُحدد لون التظليل ومؤشر الإدخال.
 +
 
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 +
|-
 +
| [https://reactnative.dev/docs/colors لون]
 +
| لا
 +
|}
 +
 
 +
 
 +
 
 +
=== الخاصية <code>selectTextOnFocus</code> ===
 +
 
 +
تُحدد النص الموجود داخل العنصر <code>TextInput</code> تلقائيًا عن الضغط عليه.
 +
 
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 +
|-
 +
| قيمة منطقية (bool)
 +
| لا
 +
|}
 +
 
 +
 
 +
 
 +
=== الخاصية <code>showSoftInputOnFocus</code> ===
 +
 
 +
تمنع ظهور لوحة المفاتيح عند التركيز على العنصر <code>TextInput</code> وذلك عندما تكون قيمتها <code>false</code>. القيمة الافتراضية هي <code>true</code>.
 +
 
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 +
! نظام التشغيل
 +
|-
 +
| قيمة منطقية (bool)
 +
| لا
 +
| أندرويد
 +
|}
 +
 
 +
 
 +
 
 +
=== الخاصية <code>spellCheck</code> ===
 +
 
 +
تستعمل لتشغيل أو تعطيل التدقيق الإملائي. وفي حال عدم تحديد قيمة لها فإنها ترث قيمتها من الخاصية <code>autoCorrect</code>.
 +
 
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 +
! نظام التشغيل
 +
|-
 +
| قيمة منطقية (bool)
 +
| لا
 +
| iOS
 +
|}
 +
 
 +
 
 +
 
 +
=== الخاصية <code>textAlign</code> ===
 +
 
 +
تُستخدم لتحديد محاذاة النص داخل العنصر <code>TextInput</code>. وتأخذ القيم:
 +
 
 +
* <code>left</code>
 +
* <code>center</code>
 +
* <code>right</code>
 +
 
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 +
|-
 +
| enum('left', 'center', 'right')
 +
| لا
 +
|}
 +
 
 +
 
 +
 
 +
=== الخاصية <code>textContentType</code> ===
 +
 
 +
تُعطي النظام معلومات متعلقة بدلالات النصوص المتوقع إدخالها من المستخدم.
 +
 
 +
في الإصدار 11 من نظام iOS وما بعده يمكن تحديد القيمة <code>username</code> أو <code>password</code> للخاصية <code>textContentType</code> لتفعيل الملء التلقائي لبيانات الدخول (login).
 +
 
 +
في الإصدار 12 من نظام iOS وما بعده تستخدم القيمة <code>newPassword</code> للدلالة على كلمة مرور جديدة يُتوقَع إدخالها من المستخدم ويتم حفظها في الجهاز.
 +
 
 +
تستخدم القيمة <code>oneTimeCode</code> للدلالة على أنه يمكن ملء الحقل تلقائيًا برمز يُرسل عن طريق رسالة نصية SMS.
 +
 
 +
لتعطيل الملء التلقائي تُستخدَم القيمة <code>none</code> للخاصية <code>textContentType</code>.
 +
 
 +
'''القيم المتاحة'''
 +
 
 +
* <code>none</code>
 +
* <code>URL</code>
 +
* <code>addressCity</code>
 +
* <code>addressCityAndState</code>
 +
* <code>addressState</code>
 +
* <code>countryName</code>
 +
* <code>creditCardNumber</code>
 +
* <code>emailAddress</code>
 +
* <code>familyName</code>
 +
* <code>fullStreetAddress</code>
 +
* <code>givenName</code>
 +
* <code>jobTitle</code>
 +
* <code>location</code>
 +
* <code>middleName</code>
 +
* <code>name</code>
 +
* <code>namePrefix</code>
 +
* <code>nameSuffix</code>
 +
* <code>nickname</code>
 +
* <code>organizationName</code>
 +
* <code>postalCode</code>
 +
* <code>streetAddressLine1</code>
 +
* <code>streetAddressLine2</code>
 +
* <code>sublocality</code>
 +
* <code>telephoneNumber</code>
 +
* <code>username</code>
 +
* <code>password</code>
 +
* <code>newPassword</code>
 +
* <code>oneTimeCode</code>
 +
 
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 +
! نظام التشغيل
 
|-
 
|-
−
| [style]
+
| 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')
−
| [https://reactnative.dev/docs/alertios#alertbuttonstyle AlertButtonStyle]
+
| لا
−
| نمط الزر.
+
| iOS
 
|}
 
|}
  
  
  
−
'''الثوابت'''
+
=== الخاصية <code>passwordRules</code> ===
 +
 
 +
تستعمل لإضافة شروط ينبغي تحقيقها حتى يكون النص المُدخل صالحًا.
  
 
{| class="wikitable"
 
{| class="wikitable"
−
! القيمة
+
! النوع
−
! الوصف
+
! مطلوب
 +
! نظام التشغيل
 
|-
 
|-
−
| text
+
| سلسلة نصية (string)
−
| إسم الزر.
+
| لا
 +
| iOS
 +
|}
 +
 
 +
انظر [https://developer.apple.com/password-rules/ قائمة الشروط]
 +
 
 +
 
 +
 
 +
=== الخاصية <code>style</code> ===
 +
 
 +
تستخدم لتطبيق أنماط معينة لتغيير شكل ومظهر حقل الإدخال <code>TextInput</code>.
 +
 
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 
|-
 
|-
−
| onPress
+
| [https://reactnative.dev/docs/text#style نص]
−
| دالة تُستدعَى عند الضغط على الزر.
+
| لا
 +
|}
 +
 
 +
انظر [https://reactnative.dev/docs/style قائمة الأنماط].
 +
 
 +
 
 +
 
 +
=== الخاصية <code>textBreakStrategy</code> ===
 +
 
 +
تُستخدم لتحديد نقاط الفصل في النصوص (النقاط التي يتم عندها الانتقال لسطر جديد). ويمكن أن تأخذ القيم التالية:
 +
 
 +
* <code>simple</code>
 +
* <code>highQuality</code>
 +
* <code>balanced</code>
 +
 
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 +
! نظام التشغيل
 
|-
 
|-
−
| style
+
| سلسلة نصية (string)
−
| نمط الزر.
+
| لا
 +
| أندرويد
 
|}
 
|}
  
  
 +
 +
=== الخاصية <code>underlineColorAndroid</code> ===
 +
 +
تُحدِّد لون الإطار السفلي للعنصر <code>TextInput</code>.
 +
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 +
! نظام التشغيل
 +
|-
 +
| [https://reactnative.dev/docs/colors لون]
 +
| لا
 +
| أندرويد
 +
|}
 +
 +
 +
 +
=== الخاصية <code>value</code> ===
 +
 +
تستخدم لتحديد قيمة إفتراضية للعنصر <code>TextInput</code>.
 +
 +
{| class="wikitable"
 +
! النوع
 +
! مطلوب
 +
|-
 +
| سلسلة نصية (string)
 +
| لا
 +
|}
 +
 +
'''ملاحظة''': يجب التعامل مع هذه الخاصية بحذر، حيث أن استعمالها بطريقة خاطئة قد يتسبب في منع المستخدم من تغيير القيمة الإفتراضية للحقل وغيرها من المشاكل الأخرى.
 +
 +
 +
 +
== مرجع الدوال  ==
 +
 +
=== الدالة <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>TextInput</code>.
 +
 +
 +
 +
=== الدالة <code>isFocused()</code> ===
 +
 +
<syntaxhighlight class="react">isFocused();</syntaxhighlight>
 +
تُرجع القيمة <code>true</code> إذا كان العنصر الذي استُدعيت فيه الدالة في وضع التركيز (focsed) و <code>false</code>فيما عدا ذلك.
  
 
== المصادر ==
 
== المصادر ==
  
−
[https://reactnative.dev/docs/alertios صفحة AlertIOS في توثيق React Native الرسمي].
+
[https://reactnative.dev/docs/textinput صفحة scrollView في توثيق React Native الرسمي]
−
[[ReactNative:تصنيف]]
+
 
 +
[[تصنيف: ReactNative]]

مراجعة 09:30، 3 مارس 2021

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

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

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

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

  return (
    &lt;TextInput
      style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
      onChangeText={text =&gt; onChangeText(text)}
      value={value}
    /&gt;
  );
}

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) =&gt; {
  return (
    &lt;TextInput
      {...props}
      editable
      maxLength={40}
    /&gt;
  );
}

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

  return (
    &lt;View
      style={{
        backgroundColor: value,
        borderBottomColor: '#000000',
        borderBottomWidth: 1,
      }}&gt;
      &lt;UselessTextInput
        multiline
        numberOfLines={4}
        onChangeText={text =&gt; onChangeText(text)}
        value={value}
      /&gt;
    &lt;/View&gt;
  );
}

export default UselessTextInputMultiline;


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

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


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

مرجع الخاصيَّات

allowFontScaling

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

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


autoCapitalize

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

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


autoCompleteType

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

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

  • off
  • username
  • password
  • email
  • name
  • tel
  • street-address
  • postal-code
  • cc-number
  • cc-csc
  • cc-exp
  • cc-exp-month
  • cc-exp-year
النوع مطلوب نظام التشغيل
enum('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) لا


carretHidden

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

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


clearButtonMode

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

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


clearTextOnFocus

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

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


contextMenuHidden

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

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


dataDetectorTypes

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

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

  • 'phoneNumber'
  • 'link'
  • 'address'
  • 'calenderEvent'
  • 'none'
  • 'all'
النوع مطلوب نظام التشغيل
enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), ,array of enum('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). القيمة الافتراضية هي auto. ويمكن أن تأخذ إحدى القيم التالية:

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


inlineImageLeft

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

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


inlineImagePadding

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

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


inputAccessoryViewID

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

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


keyboardAppearance

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

نوع مطلوب نظام التشغيل
enum('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
النوع مطلوب
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') لا


maxFontSizeMultiplier

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

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


maxLength

تُحدد أكبر عدد من الحروف يمكن إدخاله في الحقل TextInput.

النوع مطلوب
رقم (number) لا


multiline

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

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


الخاصية numberOfLines

تُحدد عدد الأسطر للعنصر TextInput.

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


onBlue

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

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


onChange

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

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


onChangeText

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

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


onEndEditing

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

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


onFocus

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

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


onKeyPress

دالة تُستدعَى عند الضغط على أي زر على لوحة المفاتيح.

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


onLayout

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

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


onScroll

دالة تُستدعَى عند التمرير (scroll) في الاتجاهات الأربعة، تُرسل إحداثيات الموضع الحالي كمعاملات للدالة.

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


الخاصية onSelectionChange

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

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


onSubmitEditing

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

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

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


placeholder

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

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


placeholderTextColor

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

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


returnKeyType

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

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

  • done
  • go
  • next
  • search
  • send

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

  • none
  • previous

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

  • default
  • emergency-call
  • google
  • join
  • route
  • yahoo
النوع مطلوب
enum('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.

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


الخاصية scrollEnable

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

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


الخاصية secureTextEntry

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

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


الخاصية selection

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

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


الخاصية selectionColor

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

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


الخاصية selectTextOnFocus

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

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


الخاصية showSoftInputOnFocus

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

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


الخاصية spellCheck

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

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


الخاصية textAlign

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

  • left
  • center
  • right
النوع مطلوب
enum('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
النوع مطلوب نظام التشغيل
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') لا iOS


الخاصية passwordRules

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

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

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


الخاصية style

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

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

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


الخاصية textBreakStrategy

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

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


الخاصية underlineColorAndroid

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

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


الخاصية value

تستخدم لتحديد قيمة إفتراضية للعنصر TextInput.

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

ملاحظة: يجب التعامل مع هذه الخاصية بحذر، حيث أن استعمالها بطريقة خاطئة قد يتسبب في منع المستخدم من تغيير القيمة الإفتراضية للحقل وغيرها من المشاكل الأخرى.


مرجع الدوال

الدالة .focus()

focus();

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


الدالة .blur()

blue();

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


الدالة clear()

clear();

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


الدالة isFocused()

isFocused();

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

المصادر

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

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