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

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
ط
(مراجعة)
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:ScrollView في React Native}}</noinclude>
+
مكوّن يغلّف المنصة ScrollView لتأمين التكامل مع منظومة مستجيب قفل اللمس (touch locking).
هو عبارة عن مكوّن يغلّف المنصة ScrollView لتأمين التكامل مع منظومة مستجيب "responder" تعليق اللمس (touch locking).
 
  
يجب أن يكون ارتفاع المكوّن ScrollView محددًا (bounded) لكي يعمل، كونه سيضم مكونات أبناء غير محددة الارتفاع إلى حاوية محددة الارتفاع أثناء التمرير (scroll). وذلك بضبط ارتفاع العرض مباشرة بالخيار discouraged أو بالتأكد من أنه لجميع العروض الآباء ارتفاع محدد. يؤدي نسيان ضبط الالتفاف أسفل العرض على القيمة <code>{flex: 1}</code> إلى حدوث خطأ، يسارع مراقب (inspector) العناصر إلى تصحيحه (debug).
+
يعمل عندما يكون ارتفاع مكوّن واجهة التمرير ScrollView محددًا (bounded)، لأنّه سيضم أبناءً غير محددي الارتفاع إلى حاوية محدّدة الارتفاع عبر تفاعل التمرير، يمكن تحديد ارتفاع مكون واجهة التمرير بضبط ارتفاعه مباشرةً (وهو خيار غير مستحسنٍ) أو بالتأكد من أن لجميع الواجهات الآباء ارتفاعٌ محدّدٌ، يؤدي نسيان تحويل <code>{flex: 1}</code> أسفل مكدس الواجهة إلى حدوث أخطاءٍ، يسارع مراقب العناصر إلى تصحيحها (debug).
  
لا يدعم هذا المكوّن حتى الآن المستجيبات المضمّنة الأخرى لتعلّق عرض التمرير الحالي.
+
لا يدعم هذا المكوّن حتى الآن المستجيبات المضمّنة الأخرى والتي تمنع أن تصبح واجهة التمرير الحالية هي المستجيب.
  
'''متى يُستخدم المكوّن <code>[[ReactNative/flatlist|FlatList]]</code> بدل المكوّن <code><ScrollView></code>:'''
+
'''متى يُستخدم المكوّن [https://reactnative.dev/docs/flatlist <code>FlatList</code>] بدل المكوّن <code>&lt;ScrollView&gt;</code>:'''
  
يعرض المكوّن <code>ScrollView</code> جميع مكونات react الأبناء دفعة واحدة، مما يؤثر سلبًا على الأداء عند عرض القوائم الطويلة التي تتطلب إنشاء الكثير من مكونات JS والعروض الأصيلة (native) ليتم إظهارها دفعة واحدة، وهذا بدوره يبطئ عملية الإظهار ويستهلك الكثير من الذاكرة.
+
يصيّر مكوّن واجهة التمرير <code>ScrollView</code> جميع مكونات react الأبناء دفعةً واحدةً، مما يؤثر سلبًا على الأداء، مثلًا عند عرض قوائم طويلة تمتد على عدة صفحات محتوى، يبطئ إنشاء الكثير من مكونات JS -والواجهات الأصيلة (native) التي ستظهر دفعةً واحدةً- عملية التصيير ويستهلك الكثير من الذاكرة.
  
في هذه الحالة يفضَّل استخدام المكون <code>FlatList</code> الذي لا يعرض المكونات المراد إظهارها إلا عند الوصول إليها، كما يقوم بإزالتها عند الانتهاء منها مما يوفر من قدرة المعالجة والذاكرة المستخدمة. كما يُستخدم هذا المكوّن عند الحاجة لإظهار فاصل بين العناصر أو بين الأعمدة المتعددة، أو لتمرير القوائم متناهية الطول وغيرها من الميزات الغير متوفرة في <code>ScrollView</code>.  
+
في هذه الحالة يفضَّل استخدام المكون <code>FlatList</code> الذي لا يصير المكوّنات إلا عندما يقترب وقت ظهورها، كما يقوم بإزالتها عند الانتهاء من عرضها على الشاشة مما يوفر قدرة المعالجة والذاكرة المستخدمة. كما يُستخدم هذا المكوّن عند الحاجة لتصيير فاصلٍ بين العناصر أو بين الأعمدة المتعددة، أو تحميل التمرير اللانهائيّ وغيرها من الميزات غير المتوافرة في غيره.  
  
 
== مثال ==
 
== مثال ==
<syntaxhighlight lang="javascript">
+
 
import React from 'react';
+
<syntaxhighlight lang="javascript">import React from 'react';
 
import { StyleSheet, Text, SafeAreaView, ScrollView } from 'react-native';
 
import { StyleSheet, Text, SafeAreaView, ScrollView } from 'react-native';
 
import Constants from 'expo-constants';
 
import Constants from 'expo-constants';
سطر 27: سطر 26:
 
           minim veniam, quis nostrud exercitation ullamco laboris nisi ut
 
           minim veniam, quis nostrud exercitation ullamco laboris nisi ut
 
           aliquip ex ea commodo consequat. Duis aute irure dolor in
 
           aliquip ex ea commodo consequat. Duis aute irure dolor in
           reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+
           resyntaxhighlighthenderit in voluptate velit esse cillum dolore eu fugiat nulla
 
           pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
 
           pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
 
           culpa qui officia deserunt mollit anim id est laborum.
 
           culpa qui officia deserunt mollit anim id est laborum.
سطر 50: سطر 49:
 
});
 
});
  
export default App;
+
export default App;</syntaxhighlight>
 +
== الخاصيّات  ==
  
</syntaxhighlight>
+
موروثة من الخاصيّات [https://reactnative.dev/docs/view#props <code>View Props</code>].
  
== الخاصيات (Props) ==
+
=== <code>alwaysBounceHorizontal</code>  ===
موروثة من خاصيّات المكوّن <code>[[ReactNative/view#.D8.A7.D9.84.D8.AE.D8.A7.D8.B5.D9.8A.D8.A7.D8.AA|View]]</code>.
+
 
 +
تجعل واجهة التمرير ترتدّ (bounce) أفقيًا عند وصولها للنهاية حتى ولو كان المحتوى أصغر من واجهة التمرير نفسها، قيمتها الافتراضية true عندما تكون قيمة <code>horizontal={true}</code> وإلا فستكون false.
  
=== <code>alwaysBounceHorizontal</code> ===
 
قيمتها الافتراضية <code>horizontal={true}‎</code> حيث تجعل عرض التمرير يرتد (bounce) أفقيًا عند وصوله للنهاية حتى ولو كان المحتوى أصغر من عرض التمرير نفسه.
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب  
+
!align="center"| النوع
!المنصة  
+
!align="center"| مطلوب
 +
!align="center"| المنصة
 
|-
 
|-
|قيمة منطقية (bool)
+
|align="center"| قيمة منطقية (bool)
|لا
+
|align="center"| لا
|iOS
+
|align="center"| iOS
 
|}
 
|}
  
=== <code>alwaysBounceVertical</code> ===
+
=== <code>alwaysBounceVertical</code> ===
قيمتها الافتراضية <code>vertical={true}‎</code> حيث تجعل عرض التمرير يرتد (bounce) عموديًا عند وصوله للنهاية حتى ولو كان المحتوى أصغر من عرض التمرير نفسه.
+
 
 +
تجعل واجهة التمرير ترتدّ (bounce) عموديًا عند وصولها للنهاية حتى ولو كان المحتوى أصغر من واجهة التمرير نفسها، قيمتها الافتراضية false عندما تكون قيمة <code>horizontal={true}</code> وإلا فستكون true.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب  
+
!align="center"| النوع
!المنصة  
+
!align="center"| مطلوب
 +
!align="center"| المنصة
 
|-
 
|-
|قيمة منطقية (bool)
+
|align="center"| قيمة منطقية (bool)
|لا
+
|align="center"| لا
|iOS
+
|align="center"| iOS
 
|}
 
|}
  
=== <code>automaticallyAdjustContentInset</code> ===
+
=== <code>automaticallyAdjustContentInset</code> ===
تجعل منصّة iOS تتحكم آليًا بإدخال (inset) المحتوى من أجل عروض التمرير المتواجدة خلف شريط التنقل أو شريط الأدوات. وقيمتها الافتراضية <code>true</code>.
+
 
 +
تتحكّم في ضبط iOS التلقائي للمحتوى المنشأ لواجهات التمرير المتواجدة خلف شريط التنقل أو شريط الأدوات. وقيمتها الافتراضية true.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب  
+
!align="center"| النوع
!المنصة  
+
!align="center"| مطلوب
 +
!align="center"| المنصة
 
|-
 
|-
|قيمة منطقية (bool)
+
|align="center"| قيمة منطقية (bool)
|لا
+
|align="center"| لا
|iOS
+
|align="center"| iOS
 
|}
 
|}
  
=== <code>bounces</code> ===
+
=== <code>bounces</code> ===
قيمتها الافتراضية <code>true</code> حيث تجعل عرض التمرير يرتد عند وصوله لنهاية  المحتوى إن كان أكبر من عرض التمرير وفق محور التمرير. أما في حال كانت قيمتها <code>false</code> فإنها تلغي جميع أنواع الارتداد حتى لو كانت الخاصيات <code>*alwaysBounce</code> مفعّلة.
+
 
 +
تجعل واجهة التمرير يرتد عند وصوله لنهاية المحتوى إن كان أكبر من واجهة التمرير وفق محور اتجاه التمرير عندما تكون قيمتها true، وستلغي جميع أنواع الارتداد حتى لو كانت الخاصيات <code>alwaysBounce*</code> مفعّلة إذا كانت قيمتها false. قيمتها الافتراضية true.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب  
+
!align="center"| النوع
!المنصة  
+
!align="center"| مطلوب
 +
!align="center"| المنصة
 
|-
 
|-
|قيمة منطقية (bool)
+
|align="center"| قيمة منطقية (bool)
|لا
+
|align="center"| لا
|iOS
+
|align="center"| iOS
 
|}
 
|}
  
=== <code>bouncesZoom</code> ===
+
=== <code>bouncesZoom</code> ===
قيمتها الافتراضية <code>true</code> حيث تتيح استخدام الإيماءات (gestures) لتجاوز الحد الأدنى والأقصى للتكبير، ويعود التكبير إلى حدوده الافتراضية بعد انتهاء الإيماءة.
+
 
 +
تتيح استخدام الإيماءات (gestures) لتجاوز الحد الأدنى والأعلى للتكبير عندما تكون قيمتها true، ويعود التكبير إلى حدوده العليا والصغرى بعد انتهاء الإيماءة. وإلا لن يتجاوز التكبير الحدود
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب  
+
!align="center"| النوع
!المنصة  
+
!align="center"| مطلوب
 +
!align="center"| المنصة
 
|-
 
|-
|قيمة منطقية (bool)
+
|align="center"| قيمة منطقية (bool)
|لا
+
|align="center"| لا
|iOS
+
|align="center"| iOS
 
|}
 
|}
  
=== <code>canCancelContentTouches</code> ===
+
=== <code>canCancelContentTouches</code> ===
إذا كانت قيمتها <code>false</code> فإنها تمنع اللمسة المتحركة من السحب (drag). وقيمتها الافتراضية <code>true</code>.
+
 
 +
تمنع اللمسة المتحركة من السحب (drag) عندما تكون قيمتها true. وهي القيمة الافتراضية.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب  
+
!align="center"| النوع
!المنصة  
+
!align="center"| مطلوب
 +
!align="center"| المنصة
 
|-
 
|-
|قيمة منطقية (bool)
+
|align="center"| قيمة منطقية (bool)
|لا
+
|align="center"| لا
|iOS
+
|align="center"| iOS
 
|}
 
|}
  
=== <code>centerContent</code> ===
+
=== <code>centerContent</code> ===
إذا كانت قيمتها <code>true</code> فإنها تضع المحتوى آليًا في منتصف عرض التمرير إن كان المحتوى أصغر من حدود عرض التمرير، أما إن كان المحتوى أكبر من عرض التمرير فلا تأثير لهذه الخاصيّة. وقيمتها الافتراضية <code>false</code>.
+
 
 +
تضع المحتوى آليًا في منتصف واجهة التمرير إذا كان المحتوى أصغر من حدود واجهة التمرير إذا كانت قيمتها true، أما إن كان المحتوى أكبر من واجهة التمرير فلا تأثير لهذه الخاصيّة. وقيمتها الافتراضية false.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب  
+
!align="center"| النوع
!المنصة  
+
!align="center"| مطلوب
 +
!align="center"| المنصة
 
|-
 
|-
|قيمة منطقية (bool)
+
|align="center"| قيمة منطقية (bool)
|لا
+
|align="center"| لا
|iOS
+
|align="center"| iOS
 
|}
 
|}
  
 
=== <code>contentContainerStyle</code> ===
 
=== <code>contentContainerStyle</code> ===
وهي مجموعة من التنسيقات المطبّقة على محتوى عرض التمرير، والتي تغلّف جميع عروض المكونات الأبناء.
 
  
'''مثال:'''<syntaxhighlight lang="javascript">
+
وهي مجموعة من التنسيقات المطبّقة على محتوى واجهة التمرير، والتي تغلّف جميع واجهات المكونات الأبناء.
return (
+
 
   <ScrollView contentContainerStyle={styles.contentContainer}>
+
'''مثال:'''
   </ScrollView>
+
 
 +
<syntaxhighlight class="">return (
 +
   &lt;ScrollView contentContainerStyle={styles.contentContainer}&gt;
 +
   &lt;/ScrollView&gt;
 
);
 
);
 
...
 
...
سطر 154: سطر 174:
 
     paddingVertical: 20
 
     paddingVertical: 20
 
   }
 
   }
});
+
});</syntaxhighlight>
</syntaxhighlight>
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب  
+
!align="center"| النوع
 +
!align="center"| مطلوب
 
|-
 
|-
|تنسيقات StyleSheetPropType(View Style props)
+
|align="center"| تنسيقات StyleSheetPropType(View Style props)
|لا
+
|align="center"| لا
 
|}
 
|}
  
 
=== <code>contentInset</code> ===
 
=== <code>contentInset</code> ===
تحدد مقدار دخول المحتوى من حواف عرض التمرير، وقيمتها الافتراضية <code>{top: left: bottom: right: 0}</code>.
+
 
 +
تحدد مقدار بعد المحتوى عن حواف واجهة التمرير وقيمتها الافتراضية <code>{top: 0, left: 0, bottom: 0, right: 0}</code>.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
!المنصة
+
!align="center"| مطلوب
 +
!align="center"| المنصة
 
|-
 
|-
|كائن (<code>object: {top: number, left: number, bottom: number, right: number}</code>)
+
|align="center"| كائن (object: {top: number, left: number, bottom: number, right: number})
|لا
+
|align="center"| لا
|iOS
+
|align="center"| iOS
 
|}
 
|}
  
 
=== <code>contentInsetAdjustmentBehavior</code> ===
 
=== <code>contentInsetAdjustmentBehavior</code> ===
تحدد هذه الخاصيّة طريقة استخدام منطقة الإدخال لتعديل منطقة المحتوى في عرض التمرير. والقيمة الافتراضية لها <code>never</code>، ومتوفرة فقط على منصة iOS إصدار 11 وما فوق.
+
 
 +
تحدد طريقة استخدام منطقة الإدخال لتعديل منطقة المحتوى في واجهة التمرير. والقيمة الافتراضية لها &quot;never&quot;، وهي متوفرة فقط على منصة iOS ذات الإصدار 11 وما بعده.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
!المنصة
+
!align="center"| مطلوب
 +
!align="center"| المنصة
 
|-
 
|-
|قيمة اسمية (<code>enum('automatic', 'scrollableAxes', 'never', 'always')‎</code>)
+
|align="center"| قيمة متعددة (enum('automatic', 'scrollableAxes', 'never', 'always'))
|لا
+
|align="center"| لا
|iOS
+
|align="center"| iOS
 
|}
 
|}
  
 
=== <code>contentOffset</code> ===
 
=== <code>contentOffset</code> ===
تُستخدم لتحديد إزاحة بداية التمرير يدويًا، والقيمة الافتراضية لها <code>{x: y: 0}</code>.
+
 
 +
تُستخدم لتحديد إزاحة بداية التمرير يدويًا، والقيمة الافتراضية لها <code>{x: 0, y: 0}</code>.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
!المنصة
+
!align="center"| مطلوب
 +
!align="center"| المنصة
 
|-
 
|-
|PointPropType  
+
|align="center"| PointPropType
|لا
+
|align="center"| لا
|iOS
+
|align="center"| iOS
 
|}
 
|}
  
 
=== <code>decelerationRate</code> ===
 
=== <code>decelerationRate</code> ===
عبارة عن عدد عشري يحدد معدل تباطؤ التمرير بعد رفع الإصبع عن عرض التمرير، كما يمكن استخدام اختصارات السلاسل النصية <code>normal</code> و <code>fast</code> والتي تقابل الإعدادات <code>UIScrollViewDecelerationRateNormal</code> و <code>UIScrollViewDecelerationRateFast</code> على منصة iOS.
 
  
* <code>normal</code> (الافتراضية) - وتوافق القيمة 0.998 على منصّة iOS والقيمة 0.985 على منصّة Android.  
+
عبارة عن عدد عشري يحدد معدل تباطؤ التمرير بعد رفع الإصبع عن واجهة التمرير، كما يمكن استخدام اختصارات السلاسل النصية <code>normal</code> و <code>fast</code> والتي تقابل الإعدادات <code>UIScrollViewDecelerationRateNormal</code> و <code>UIScrollViewDecelerationRateFast</code> على منصة iOS.
* <code>fast</code> - وتوافق القيمة 0.99 على منصّة iOS والقيمة 0.9 على منصّة Android.  
+
 
 +
* <code>'normal'</code> (الافتراضية): وتوافق القيمة 0.998 على منصّة iOS والقيمة 0.985 على منصّة Android.  
 +
* <code>'fast'</code>: وتوافق القيمة 0.99 على منصّة iOS والقيمة 0.9 على منصّة Android.  
  
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
 +
!align="center"| مطلوب
 
|-
 
|-
|قيمة اسمية، عدد (<code>enum('fast', 'normal')</code> ،number)
+
|align="center"| قيمة متعددة، عدد (enum('fast', 'normal'),number)
|لا
+
|align="center"| لا
 
|}
 
|}
  
=== <code>directionalLockEnabled</code> ===
+
=== <code>directionalLockEnabled</code> ===
إذا كانت قيمتها <code>true</code> فإنها تسمح بالتمرير وفق الاتجاه العمودي أو الأفقي فقط أثناء السحب. وقيمتها الافتراضية <code>false</code>.
+
 
 +
تقفل التمرير العمودي أو الأفقي فقط أثناء السحب إذا كانت قيمتها true. وقيمتها الافتراضية <code>false</code>.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
!المنصة
+
!align="center"| مطلوب
 +
!align="center"| المنصة
 
|-
 
|-
|قيمة منطقية (bool)
+
|align="center"| قيمة منطقية (bool)
|لا
+
|align="center"| لا
|iOS
+
|align="center"| iOS
 
|}
 
|}
  
===<code>disableIntervalMomentum</code>===
+
=== <code>disableIntervalMomentum</code> ===
إذا كانت قيمتها <code>true</code> فإنها توقف عرض التمرير على الدليل (index) التالي (المتعلّق بموقع التمرير عند التحرير) بغض النظر عن سرعة الإيماءة. ويمكن أن تُستخدم للتصفّح الأفقي عندما يكون عرض الصفحة أصغر من عرض ScrollView. وقيمتها الافتراضية <code>false</code>.
+
 
 +
إذا كانت قيمتها true فستوقف واجهة التمرير على الدليل (index) التالي (المتعلّق بموقع التمرير عند التحرير) بغض النظر عن سرعة الإيماءة، ويمكن أن تستخدم للتصفّح الأفقي عندما يكون عرض الصفحة أصغر من عرض المكون ScrollView. وقيمتها الافتراضية false.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
 +
!align="center"| مطلوب
 
|-
 
|-
|قيمة منطقية (bool)
+
|align="center"| قيمة منطقية (bool)
|لا
+
|align="center"| لا
 
|}
 
|}
  
===<code>disableScrollViewPanResponder</code>===
+
=== <code>disableScrollViewPanResponder</code> ===
إذا كانت قيمتها <code>true</code> فإنها تلغي عمل المكوّن <code>[[ReactNative/panresponder|PanResponder]]</code> الافتراضي لعرض التمرير، ويُترك التحكم الكامل للّمسات داخل عرض التمرير للمكونات الأبناء. وهذا مفيد عمليًا عندما تكون الخاصيّة <code>snapToInterval</code> مفعّلة كونها لا تتبع أنمط اللمسات النموذجية. يجب تجنب هذه الخاصيّة في الاستخدامات الاعتيادية لعرض التمرير من دون الخاصيّة <code>snapToInterval</code>، لأنها قد تسبب حدوث لمسات غير متوقعة أثناء التمرير. وقيمتها الافتراضية <code>false</code>.  
+
 
 +
إذا كانت قيمتها true فستلغي عمل المكوّن [https://wiki.hsoub.com/ReactNative/panresponder <code>Pan Responder</code>] الافتراضيّ لواجهة التمرير، ويُترك التحكم الكامل للّمسات داخل واجهة التمرير للمكونات الأبناء. وهذا مفيد عمليًا عند تفعيل الخاصيّة <code>snapToInterval</code> لأنها لا تتبع أنمط اللمسات النموذجية، يجب تجنب هذه الخاصيّة في الاستخدامات الاعتيادية لواجهة التمرير من دون الخاصيّة <code>snapToInterval</code>، لأنها قد تسبب حدوث لمسات غير متوقعة أثناء التمرير. وقيمتها الافتراضية false.  
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
 +
!align="center"| مطلوب
 
|-
 
|-
|قيمة منطقية (bool)
+
|align="center"| قيمة منطقية (bool)
|لا
+
|align="center"| لا
 
|}
 
|}
  
===<code>endFillColor</code>===
+
=== <code>endFillColor</code> ===
تُستخدم هذه الخاصيّة لملء الفراغ المتبقي في عرض التمرير والذي يحدث أحيانًا نتيجة أخذ عرض التمرير لحيز أكبر من الذي يشغله المحتوى، حيث تسمح هذه الخاصيّة بتجنب إعداد الخلفية. وتعد هذه الخاصيّة من التحسينات المتقدمة والتي لا تُستخدم في الحالات الاعتيادية. 
+
 
 +
تُستخدم هذه الخاصيّة لملء الفراغ المتبقي في واجهة التمرير - والذي يحدث أحيانًا نتيجة أخذ واجهة التمرير حيزًا أكبر من الذي يشغله المحتوى- بلونٍ، دون الحاجة إلى إعداد الخلفية. وتعد هذه الخاصيّة من التحسينات المتقدمة والتي لا تُستخدم في الحالات الاعتيادية.  
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
!المنصة
+
!align="center"| مطلوب
 +
!align="center"| المنصة
 
|-
 
|-
|لون (<code>[[ReactNative/colors|color]]</code>)
+
|align="center"| لون ([https://reactnative.dev/docs/colors <code>color</code>])
|لا
+
|align="center"| لا
|iOS
+
|align="center"| Android
 
|}
 
|}
  
===<code>fadingEdgeLength</code>===
+
=== <code>fadingEdgeLength</code> ===
تُستخدم لتلاشي (Fade) حواف المحتوى الممرر. فإذا كانت قيمتها أكبر من الصفر، فإن تلاشي الحواف سيكون وفقًا لاتجاه ومكان التمرير الحالي للدلالة فيما إذا كان هنالك مزيدًا من المحتوى لإظهاره.
+
 
 +
تُستخدم لتلاشي (Fade) حواف محتوى التمرير، فإذا كانت قيمتها أكبر من الصفر فستتلاشى الحواف وفقًا لاتجاه ومكان التمرير الحالي، للدلالة فيما إذا كان هنالك مزيد من المحتوى لإظهاره.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
!القيمة الافتراضية
+
!align="center"| مطلوب
!المنصة
+
!align="center"| القيمة الافتراضية
 +
!align="center"| المنصة
 
|-
 
|-
|عدد (number)
+
|align="center"| عدد (number)
|لا
+
|align="center"| لا
|0
+
|align="center"| 0
|Android  
+
|align="center"| Android
 
|}
 
|}
  
===<code>horizontal</code>===
+
=== <code>horizontal</code> ===
إذا كانت قيمتها <code>true</code> فإن المكونات الأبناء لعرض التمرير ستصطف أفقيًا في سطر بدل الاصطفاف عموديًا في عمود، وقيمتها الافتراضية <code>false</code>.  
+
 
 +
إذا كانت قيمتها true فستصطفّ المكونات الأبناء لواجهة التمرير أفقيًا في سطر بدل الاصطفاف عموديًا في عمود، وقيمتها الافتراضية false.  
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
 +
!align="center"| مطلوب
 
|-
 
|-
|قيمة منطقية (bool)
+
|align="center"| قيمة منطقية (bool)
|لا
+
|align="center"| لا
 
|}
 
|}
  
 
=== <code>indicatorStyle</code> ===
 
=== <code>indicatorStyle</code> ===
تُستخدم لتنسيق مؤشر التمرير، وقيمها:
 
  
* <code>default</code> (الافتراضية) - نفس <code>black</code>.  
+
تُستخدم لتنسيق مؤشر التمرير، وقيمها:
* <code>black</code> - يكون المؤشر أسود ويُستخدم مع الخلفيات الفاتحة.
+
 
* <code>white</code> - يكون المؤشر أبيض ويُستخدم مع الخلفيات الداكنة.  
+
* <code>'default'</code> (الافتراضية): نفس <code>black</code>.  
 +
* <code>'black'</code>: يكون المؤشر أسودًا، ويستخدم مع الخلفيات الفاتحة.  
 +
* <code>'white'</code>: يكون المؤشر أبيضًا، ويستخدم مع الخلفيات الداكنة.
  
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
!المنصة
+
!align="center"| مطلوب
 +
!align="center"| المنصة
 
|-
 
|-
|قيمة اسمية (<code>enum('default', 'black', 'white')‎</code>)
+
|align="center"| قيمة متعددة (enum('default', 'black', 'white'))
|لا
+
|align="center"| لا
|iOS
+
|align="center"| iOS
 
|}
 
|}
  
===<code>invertStickyHeaders</code>===
+
=== <code>invertStickyHeaders</code> ===
تجعل هذه الخاصيّة الترويسات الدبقة (sticky headers) تلتصق في أسفل عرض التمرير بدل الالتصاق في الأعلى، وعادة ما تُستخدم مع عرض التمرير المقلوب.  
+
 
 +
تثبت هذه الخاصيّة الترويسات المثبتة (sticky headers) أسفل واجهة التمرير بدلًا من أعلاه، وتستخدم عادة مع واجهة التمرير المقلوبة.  
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
 +
!align="center"| مطلوب
 
|-
 
|-
|قيمة منطقية (bool)
+
|align="center"| قيمة منطقية (bool)
|لا
+
|align="center"| لا
 
|}
 
|}
  
 
=== <code>keyboardDismissMode</code> ===
 
=== <code>keyboardDismissMode</code> ===
 +
 
تُستخدم لإبطال لوحة المفاتيح أثناء السحب، وقيمها:
 
تُستخدم لإبطال لوحة المفاتيح أثناء السحب، وقيمها:
  
على المنصات المتعددة (''Cross platform''):
+
على المنصات المتعددة (Cross platform):
  
* <code>none</code> (الافتراضية) - لا يبطل السحب لوحة المفاتيح.  
+
* <code>'none'</code> (الافتراضية): لا يلغي السحب لوحة المفاتيح.  
* <code>on-drag</code> - تبطل لوحة المفاتيح عند بدء السحب.  
+
* <code>'on-drag'</code>: تلغى لوحة المفاتيح عند بدء السحب.  
  
 
على منصّة iOS:
 
على منصّة iOS:
  
* <code>interactive</code> - تبطل لوحة المفاتيح تفاعليًا مع السحب والحركات بالتزامن مع اللمس، وتفعّل بالسحب للأعلى. وهذه الخاصيّة غير مفعّلة على منصّة Android وتبقى كما لو أن قيمتها <code>none</code>.
+
* <code>interactive</code>: تلغى لوحة المفاتيح تفاعليًا مع السحب والحركات بالتزامن مع اللمس، وتفعّل بالسحب للأعلى. وهذه الخاصيّة غير مفعّلة على منصّة Android وتبقى كما لو أن قيمتها 'none'.
  
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
 +
!align="center"| مطلوب
 
|-
 
|-
|قيمة اسمية (<code>enum('none', 'on-drag', 'interactive')‎</code>)
+
|align="center"| قيمة متعددة (enum('none', 'on-drag', 'interactive'))
|لا
+
|align="center"| لا
 
|}
 
|}
  
 
=== <code>keyboardShouldPersistTaps</code> ===
 
=== <code>keyboardShouldPersistTaps</code> ===
تحدد فيما إذا كانت لوحة المفاتيح ستبقى ظاهرة بعد النقر (tap)، وقيمها:
 
  
* <code>never</code> (الافتراضية) - إن النقر خارج إطار النص المركّز ولوحة المفاتيح مرفوعة، يؤدي إلى إبطالها. ولن تستقبل المكونات الأبناء لعرض التمرير النقر عند حدوث ذلك.
+
تحدد بقاء لوحة المفاتيح مرئيّةً بعد النقر (tap)، وقيمها:
* <code>always</code> - لا تبطل لوحة المفاتيح تلقائيًا، ولن يستقبل عرض التمرير النقر لكن المكونات الأبناء تستطيع استقباله.
 
  
* <code>handled</code> - لا تبطل لوحة المفاتيح تلقائيًا عند معالجة النقر من قبل المكونات الأبناء لعرض التمرير (أو عند استقباله من قبل المكونات الأجداد).  
+
* <code>'never'</code> (الافتراضية): تلغى لوحة المفاتيح عند النقر خارج إطار النص المركّز ولوحة المفاتيح قيد التشغيل. ولن تستقبل المكونات الأبناء لواجهة التمرير النقر عند حدوث ذلك.
* <code>false</code> (مهملة) - استخدم <code>never</code> بدلًا منها.  
+
* <code>'always'</code>: لا تلغى لوحة المفاتيح تلقائيًا، ولن تستقبل واجهة التمرير النقر لكن المكونات الأبناء تستطيع استقباله.
* <code>true</code> (مهملة) - استخدم <code>always</code> بدلًا منها.  
+
* <code>'handled'</code>: لا تبطل لوحة المفاتيح تلقائيًا عندما تعالج المكونات الأبناء النقر (أو عند استقباله من قبل المكونات الأجداد).  
 +
* <code>false</code> (مهملة): استخدم 'never' بدلًا منها.  
 +
* <code>true</code> (مهملة): استخدم 'always' بدلًا منها.  
  
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
 +
!align="center"| مطلوب
 
|-
 
|-
|قيمة اسمية (<code>enum('always', 'never', 'handled', false, true)‎</code>)
+
|align="center"| قيمة متعددة (enum('always', 'never', 'handled', false, true))
|لا
+
|align="center"| لا
 
|}
 
|}
  
 
=== <code>maintainVisibleContentPosition</code> ===
 
=== <code>maintainVisibleContentPosition</code> ===
عند استخدام هذه الخاصيّة، فإن عرض التمرير يضبط موقع التمرير بحيث لا يتغير موقع المكوّن الابن الأول والظاهر حاليًا (عند القيمة <code>minIndexForVisible</code> أو ما بعدها). وهذا مفيد مع القوائم التي تحمّل المحتوى من كلا الاتجاهين كما هو الحال في الدردشة، حيث تمنع هذه الخاصيّة الرسائل الجديدة الواردة من إزاحة موقع التمرير. القيمة الاعتيادية لهذه الخاصيّة هي <code>0</code>، غير أنه يمكن استخدام قيم أخرى مثل <code>1</code> من أجل تجاهل تحميل المحتوى الذي قد يغيّر موقع التمرير.
 
  
يمكن استخدام القيمة الاختيارية <code>autoscrollToTopThreshold</code> لتمرير المحتوى تلقائيا للأعلى بعد ضبط موقع التمرير في حال كان المستخدم ضِمن العتبة العليا قبل الضبط. وهذا مفيد في تطبيقات الدردشة من أجل رؤية الرسائل الجديدة الواردة بشكل تلقائي دون الحاجة للتمرير في حال قام المستخدم بالتمرير بعيدًا عنها.  
+
عند تفعيل هذه الخاصيّة فستضبط واجهة التمرير موقع التمرير بحيث لا يتغير موقع المكوّن الابن الأول والظاهر حاليًا (عند القيمة <code>minIndexForVisible</code> أو ما بعدها)، وهذا مفيد مع القوائم التي تحمّل المحتوى من كلا الاتجاهين كما هو الحال في الدردشة، حيث تمنع هذه الخاصيّة الرسائل الجديدة الواردة من إزاحة موقع التمرير، والقيمة الاعتيادية لهذه الخاصيّة هي 0، غير أنه يمكن استخدام قيم أخرى مثل 1 من أجل تجاهل تحميل المحتوى الذي قد يغيّر موقع التمرير.  
  
'''تنبيه 1:''' قد يؤدي إعادة ترتيب عناصر scrollview مع تمكين هذه الخاصيّة إلى حدوث تقفّز (jumpiness). ولا يوجد نيّة حاليًا لإصلاح هذا الخلل، لذا يجب حاليًا تجنّب إعادة ترتيب محتوى أي مكوّن scrollview أو Lists يستخدم هذه الخاصيّة.  
+
يمكن استخدام القيمة الاختيارية <code>autoscrollToTopThreshold</code> لتمرير المحتوى تلقائيا للأعلى بعد ضبط موقع التمرير إذا كان المستخدم ضِمن العتبة العليا قبل الضبط، وهذا مفيد في تطبيقات الدردشة من أجل رؤية الرسائل الجديدة الواردة بشكلٍ تلقائيٍّ دون الحاجة للتمرير في حال قام المستخدم بالتمرير بعيدًا عنها.
 +
 
 +
'''تنبيه 1:''' قد يؤدي إعادة ترتيب عناصر واجهة التمرير مع تمكين هذه الخاصيّة إلى حدوث قفزات مخلة (jumpiness)، ولا يوجد نيّة حاليًا لإصلاح هذا الخلل، لذا يجب حاليًا تجنّب إعادة ترتيب محتوى أي مكوّن واجهة تمريرٍ أو قوائم تستخدم هذه الخاصيّة.
 +
 
 +
'''تنبيه 2:''' تستخدم هذه الخاصيّة الخاصيتين <code>contentOffset</code> و <code>frame.origin</code> في الشفرة الأصيلة لحساب قدرة الإظهار (visibility). كما أنه لم تؤخذ التحويلات وتعقيدات الإظهار الأخرى في الاعتبار.
  
'''تنبيه 2:''' تَستخدم هذه الخاصيّة الخاصيتين <code>contentOffset</code> و <code>frame.origin</code> في الشفرة الأصيلة لحساب قدرة الإظهار (visibility). كما أنه لم يؤخذ في الاعتبار التحويلات وتعقيدات الإظهار الأخرى.
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
!المنصة
+
!align="center"| مطلوب
 +
!align="center"| المنصة
 
|-
 
|-
|كائن (<code>object: { minIndexForVisible: number, autoscrollToTopThreshold: number }‎</code>)
+
|align="center"| كائن (object: { minIndexForVisible: number, autoscrollToTopThreshold: number })
|لا
+
|align="center"| لا
|iOS
+
|align="center"| iOS
 
|}
 
|}
  
===<code>maximumZoomScale</code>===
+
=== <code>maximumZoomScale</code> ===
تحدد مقياس الرسم (scale) الأعظمي للتكبير. قيمتها الافتراضية <code>1.0</code>.
+
 
 +
تحدد مقياس الرسم (scale) الأعظمي للتكبير. قيمتها الافتراضية <code>1</code>.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
!المنصة
+
!align="center"| مطلوب
 +
!align="center"| المنصة
 
|-
 
|-
|عدد (number)
+
|align="center"| عدد (number)
|لا
+
|align="center"| لا
|iOS
+
|align="center"| iOS
 
|}
 
|}
  
===<code>minimumZoomScale</code>===
+
=== <code>minimumZoomScale</code> ===
تحدد مقياس الرسم (scale) الأصغري للتكبير. قيمتها الافتراضية <code>1.0</code>.
+
 
 +
تحدد مقياس الرسم (scale) الأصغر للتكبير. قيمتها الافتراضية 1.0.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
!المنصة
+
!align="center"| مطلوب
 +
!align="center"| المنصة
 
|-
 
|-
|عدد (number)
+
|align="center"| عدد (number)
|لا
+
|align="center"| لا
|iOS
+
|align="center"| iOS
 
|}
 
|}
  
===<code>nestedScrollEnabled</code>===
+
=== <code>nestedScrollEnabled</code> ===
تمكّن من التمرير المتداخل (nested)، ومدعومة على واجهات منصة Android البرمجية من المستوى 21+. كما أنها مدعومة افتراضيًا على منصّة iOS.
+
 
 +
تمكّن التمرير المتداخل (nested)، وهي مدعومةٌ على واجهات منصة Android البرمجية من المستوى 21 وما بعده، ومدعومة افتراضيًا على منصّة iOS.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
!المنصة
+
!align="center"| مطلوب
 +
!align="center"| المنصة
 
|-
 
|-
|قيمة منطقية (bool)
+
|align="center"| قيمة منطقية (bool)
|لا
+
|align="center"| لا
|Android
+
|align="center"| Android
 
|}
 
|}
  
===<code>onContentSizeChange</code>===
+
=== <code>onContentSizeChange</code> ===
تُستدعى هذه الدالة عند تغيّر المحتوى الممرر في ScrollView، حيث يمرر لهذه الدالة عرض وارتفاع المحتوى على شكل معاملين: <code>contentWidth</code> و <code>contentHeight</code>.
+
 
 +
تُستدعى عند تغيّر المحتوى الممرر في المكون ScrollView، حيث يمرر لها عرض المحتوى وارتفاعه على شكل معاملين: <code>contentWidth</code> و <code>contentHeight</code>.
 +
 
 +
صُممت باستخدام المعالج onLayout المرتبط بحاوية المحتوى الذي يظهره ScrollView.
  
صُممت هذه الدالة باستخدام المعالج <code>onLayout</code> والمرتبط بحاوية المحتوى الذي يظهره ScrollView.
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
 +
!align="center"| مطلوب
 
|-
 
|-
|دالة (function)
+
|align="center"| دالة (function)
|لا
+
|align="center"| لا
 
|}
 
|}
  
=== <code>onMomentumScrollBegin</code> ===
+
=== <code>onMomentumScrollBegin</code> ===
تُستدعى هذه الدالة عند بدء زخم (momentum) التمرير (حين يبدأ ScrollView بالانزلاق).
+
 
 +
تُستدعى عند بدء التمرير الزخم (momentum) (حين يبدأ ScrollView بالانزلاق).
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
 +
!align="center"| مطلوب
 
|-
 
|-
|دالة (function)
+
|align="center"| دالة (function)
|لا
+
|align="center"| لا
 
|}
 
|}
  
=== <code>onMomentumScrollEnd</code> ===
+
=== <code>onMomentumScrollEnd</code> ===
تُستدعى هذه الدالة عند انتهاء زخم التمرير(حين يتوقف ScrollView عن الانزلاق).
+
 
 +
تُستدعى هذه الدالة عند انتهاء التمرير الزخم (حين يتوقف ScrollView عن الانزلاق).
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
 +
!align="center"| مطلوب
 
|-
 
|-
|دالة (function)
+
|align="center"| دالة (function)
|لا
+
|align="center"| لا
 
|}
 
|}
  
=== <code>onScroll</code> ===
+
=== <code>onScroll</code> ===
تُطلق مرة واحدة على الأكثر لكل إطار (frame) أثناء التمرير. ويمكن التحكم بتردد الأحداث عن طريق الخاصيّة <code>scrollEventThrottle</code>، ولهذه الأحداث الشكل التالي (جميع القيم أعداد):<syntaxhighlight lang="javascript">
+
 
{
+
تُطلق مرة واحدة على الأكثر لكل إطار (frame) أثناء التمرير. ويمكن التحكم بتردد الأحداث عن طريق الخاصيّة <code>scrollEventThrottle</code>، ولهذه الأحداث الشكل التالي (جميع القيم أعداد):
 +
 
 +
<syntaxhighlight class="">{
 
   nativeEvent: {
 
   nativeEvent: {
 
     contentInset: {bottom, left, right, top},
 
     contentInset: {bottom, left, right, top},
سطر 443: سطر 523:
 
     zoomScale
 
     zoomScale
 
   }
 
   }
}
+
}</syntaxhighlight>
</syntaxhighlight>
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
 +
!align="center"| مطلوب
 
|-
 
|-
|دالة (function)
+
|align="center"| دالة (function)
|لا
+
|align="center"| لا
 
|}
 
|}
  
=== <code>onScrollBeginDrag</code> ===
+
=== <code>onScrollBeginDrag</code> ===
تُستدعى هذه الدالة عند بدء المستخدم بسحب عرض التمرير.
+
 
 +
تُستدعى عندما يبدأ المستخدم بسحب واجهة التمرير.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
 +
!align="center"| مطلوب
 
|-
 
|-
|دالة (function)
+
|align="center"| دالة (function)
|لا
+
|align="center"| لا
 
|}
 
|}
  
=== <code>onScrollEndDrag</code> ===
+
=== <code>onScrollEndDrag</code> ===
تُستدعى هذه الدالة عند توقف المستخدم عن سحب عرض التمرير، وكذلك عندما يتوقف عرض التمرير أو يبدأ بالانزلاق.
+
 
 +
تُستدعى عند توقف المستخدم عن سحب واجهة التمرير، وكذلك عندما تتوقف واجهة التمرير أو تبدأ بالانزلاق.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
 +
!align="center"| مطلوب
 
|-
 
|-
|دالة (function)
+
|align="center"| دالة (function)
|لا
+
|align="center"| لا
 
|}
 
|}
  
=== <code>onScrollToTop</code> ===
+
=== <code>onScrollToTop</code> ===
تُطلق عند تمرير عرض التمرير للأعلى بعد أن نُقر شريط الحالة.
+
 
 +
تُطلق عند تمرير واجهة التمرير للأعلى بعد نقر شريط الحالة.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
!المنصة
+
!align="center"| مطلوب
 +
!align="center"| المنصة
 
|-
 
|-
|دالة (function)
+
|align="center"| دالة (function)
|لا
+
|align="center"| لا
|iOS
+
|align="center"| iOS
 
|}
 
|}
  
===<code>overScrollMode</code>===
+
=== <code>overScrollMode</code> ===
تُستخدم لتعديل القيمة الافتراضية لوضع التمرير الإضافي (overScroll)، وقيمها:
 
  
* <code>auto</code> (الافتراضية) - تسمح للمستخدم بالتمرير الإضافي لهذا العرض فقط في حال كان حجم المحتوى كبير بشكل كافي لهذا النوع من التمرير.
+
تُستخدم لتعديل القيمة الافتراضية لوضع التمرير الإضافي (overScroll), وقيمها:
* <code>always</code> - تسمح دائمًا للمستخدم بالتمرير الإضافي لهذا العرض.
 
  
* <code>never</code> - لا تسمح للمستخدم بالتمرير الإضافي لهذا العرض.  
+
* <code>'auto'</code> (الافتراضية): تسمح للمستخدم بالتمرير الإضافي لهذه الواجهة فقط إذا كان كان حجم المحتوى كبيرًا بشكل كافٍ لهذا النوع من التمرير.
 +
* <code>'always'</code>: تسمح للمستخدم بالتمرير الإضافي لهذه الواجهة دائمًا.
 +
* <code>'never'</code>: لا تسمح للمستخدم بالتمرير الإضافي لهذه الواجهة.
  
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
!المنصة
+
!align="center"| مطلوب
 +
!align="center"| المنصة
 
|-
 
|-
|قيمة اسمية (<code>enum('auto', 'always', 'never')‎</code>)
+
|align="center"| قيمة متعددة (enum('auto', 'always', 'never'))
|لا
+
|align="center"| لا
|Android
+
|align="center"| Android
 
|}
 
|}
  
 
=== <code>pagingEnabled</code> ===
 
=== <code>pagingEnabled</code> ===
عندما تكون قيمة هذه الخاصيّة <code>true</code> فإن عرض التمرير يتوقف عند مضاعفات حجمه، حيث يمكن استخدام هذه الخاصيّة من أجل التصفح الأفقي. وقيمتها الافتراضية <code>false</code>.
 
  
'''ملاحظة:''' التصفح العمودي غير مدعوم على منصة Android.
+
ستتوقف واجهة التمرير عند مضاعفات حجمها فقط عندما تكون قيمة هذه الخاصيّة true، ويمكن استخدامها للتصفح الأفقي، وقيمتها الافتراضية false.
 +
 
 +
'''ملاحظة:''' لا تدعم منصة Android التصفح العموديّ.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
 +
!align="center"| مطلوب
 
|-
 
|-
|قيمة منطقية (bool)
+
|align="center"| قيمة منطقية (bool)
|لا
+
|align="center"| لا
 
|}
 
|}
  
===<code>persistentScrollbar</code>===
+
=== <code>persistentScrollbar</code> ===
لا تسمح لأشرطة التمرير بأن تعود شفافة بعد الانتهاء منها. وقيمتها الافتراضية <code>false</code>.
+
 
 +
لا تسمح لأشرطة التمرير بأن تكون شفافة عند عدم استخدامها، وقيمتها الافتراضية false.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
!المنصة
+
!align="center"| مطلوب
 +
!align="center"| المنصة
 
|-
 
|-
|قيمة منطقية (bool)
+
|align="center"| قيمة منطقية (bool)
|لا
+
|align="center"| لا
|Android
+
|align="center"| Android
 
|}
 
|}
  
===<code>pinchGestureEnabled</code>===
+
=== <code>pinchGestureEnabled</code> ===
عندما تكون قيمتها <code>true</code> (الافتراضية) فإنها تسمح باستخدام إيماءات القَرص (pinch gestures) للتكبير والتصغير في عرض التمرير.  
+
 
 +
تسمح باستخدام إيماءات القَرص (pinch gestures) للتكبير والتصغير في واجهة التمرير عندما تكون قيمتها true (وهي القيمة الافتراضية).  
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
!المنصة
+
!align="center"| مطلوب
 +
!align="center"| المنصة
 
|-
 
|-
|قيمة منطقية (bool)
+
|align="center"| قيمة منطقية (bool)
|لا
+
|align="center"| لا
|iOS
+
|align="center"| iOS
 
|}
 
|}
  
===<code>refreshControl</code>===
+
=== <code>refreshControl</code> ===
يُستخدم هذا المكوّن لتأمين وظيفة التحديث بالسحب (pull-to-refresh) لعرض التمرير، ويعمل مع عرض التمرير العمودي فقط (يجب أن تكون الخاصيّة <code>horizontal</code> بالقيمة <code>false</code>). ولمزيد من المعلومات حول هذا المكوّن يمكن الإطلاع على <code>[[ReactNative/refreshcontrol|RefreshControl]]</code>.
+
 
 +
يُستخدم لتأمين وظيفة التحديث بالسحب (pull-to-refresh) لواجهة التمرير، ويعمل مع واجهة التمرير العمودية فقط (يجب أن يكون للخاصيّة <code>horizontal</code> القيمة <code>false</code>). ولمزيد من المعلومات حول هذا المكوّن يمكن الإطلاع على [https://reactnative.dev/docs/refreshcontrol <code>RefreshControl</code>].
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
 +
!align="center"| مطلوب
 
|-
 
|-
|عنصر (element)
+
|align="center"| عنصر (element)
|لا
+
|align="center"| لا
 
|}
 
|}
  
===<code>removeClippedSubviews</code>===
+
=== <code>removeClippedSubviews</code> ===
'''تجريبي:''' عندما تكون القيمة <code>true</code> فإن عروض المكونات الأبناء (التي تكون فيها الخاصيّة <code>overflow</code> بالقيمة <code>hidden</code>) التي خارج الشاشة، تُزال من العرض الرئيسي (superview)، مما يحسّن من أداء التمرير في القوائم الطويلة.  
+
 
 +
'''تجريبي:''' تزال الواجهات الأبناء (التي يكون فيها للخاصيّة <code>overflow</code> القيمة <code>hidden</code>) التي تقع خارج الشاشة من الواجهة الرئيسية (superview) عندما تكون القيمة true، مما يحسّن أداء التمرير في القوائم الطويلة.  
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
 +
!align="center"| مطلوب
 
|-
 
|-
|قيمة منطقية (bool)
+
|align="center"| قيمة منطقية (bool)
|لا
+
|align="center"| لا
 
|}
 
|}
  
===<code>scrollBarThumbImage</code>===
+
=== <code>scrollBarThumbImage</code> ===
يمكن بشكل اختياري استخدام صورة كأيقونة لشريط التمرير، وهذا بدوره يلغي اللون عند وجود الصورة، غير أنه يبقى اللون أثناء تحميل الصورة أو عند فشل التحميل. كما يمكن إلغاء اللون أثناء تحميل الصورة بجعل قيمة المعامل <code>alpha</code> الخاص باللون مساوية للصفر.
+
 
* <code>uri</code> - سلسلة نصيّة تمثل معرّف مصدر الصورة، والذي هو عبارة عن مسار الملف المحلّي للصورة أو اسم مصدر الصورة الثابت (static). 
+
يمكن بشكل اختياري استخدام صورةٍ كأيقونةٍ لشريط التمرير، وهذا بدوره يلغي اللون عند وجود الصورة، غير أن اللون يستخدم أثناء تحميل الصورة أو عند فشل التحميل، كما يمكن إلغاء اللون أثناء تحميل الصورة بجعل قناة الشفافية alpha مساويةً للصفر.
* <code>number</code> - نوع مبهم (Opaque) معاد من قبل شيء ما مثل <code>import IMAGE from './image.jpg'</code>.
+
 
 +
* <code>uri</code>: سلسلة نصيّة تمثل معرّف مصدر الصورة، والذي هو عبارة عن مسار الملف المحلي للصورة أو اسم مصدر الصورة الثابت (static).  
 +
* <code>number</code>: نوع مبهم (Opaque) يعاد من قبل شيءٍ ما مثل <code>import IMAGE from'./image.jpg'</code>.
  
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
!المنصة
+
!align="center"| مطلوب
 +
!align="center"| المنصة
 
|-
 
|-
|عدد (number)
+
|align="center"| عدد (number)
|لا
+
|align="center"| لا
|VR
+
|align="center"| VR
 
|}
 
|}
  
===<code>scrollEnabled</code>===
+
=== <code>scrollEnabled</code> ===
عندما تكون قيمتها <code>false</code> فإنه لا يمكن تمرير العرض باللمس. والقيمة الافتراضية <code>true</code>.  
+
 
 +
لا يمكن تمرير الواجهة باللمس عندما تكون قيمتها false، والقيمة الافتراضية true.
 +
 
 +
'''ملاحظة:''' يمكن تمرير الواجهة دائمًا باستدعاء <code>scrollTo</code>.
  
'''ملاحظة:''' يمكن تمرير العرض دائما باستدعاء <code>scrollTo</code>.
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
 +
!align="center"| مطلوب
 
|-
 
|-
|قيمة منطقية (bool)
+
|align="center"| قيمة منطقية (bool)
|لا
+
|align="center"| لا
 
|}
 
|}
  
===<code>scrollEventThrottle</code>===
+
=== <code>scrollEventThrottle</code> ===
تتحكم بعدد مرات إطلاق أحداث التمرير أثناء التمرير (الفاصل الزمني بالميلي ثانية). وكلما كانت قيمتها أصغر كلما زادت دقة الشفرة البرمجية في تعقّب موقع التمرير، غير أن هذا قد يسبب مشاكل في الأداء بسبب كم المعلومات المرسل عبر الجسر، كما أنه لا يلاحظ الفرق عند تغيير القيم ضمن المجال 1- 16 بسبب تزامن حلقة JS مع معدل تحديث الشاشة. لذا يُفضّل عند عدم الحاجة للتعقّب الدقيق للتمرير، وضع قيمة كبيرة لهذه الخاصيّة وذلك للتقليل من كمية المعلومات المرسلة عبر الجسر. إن القيمة الافتراضية لهذه الخاصيّة هي الصفر والذي يعني أن حدث التمرير يُرسل مرة واحدة فقط في كل مرة يمرر فيها العرض.
+
 
 +
تتحكم بعدد مرات إطلاق أحداث التمرير أثناء التمرير (الفاصل الزمنيّ بالميلي ثانية)، وكلما كانت قيمتها أصغر كلما زادت دقة الشفرة البرمجية في تعقّب موقع التمرير، غير أن هذا قد يسبب مشاكل في الأداء بسبب كمّ المعلومات المرسل عبر الجسر، ولا يلاحظ الفرق عند تغيير القيم ضمن المجال 1- 16 بسبب تزامن حلقة JS مع معدل تحديث الشاشة، لذا يُفضّل وضع قيمةٍ كبيرةٍ لهذه الخاصيّة عند عدم الحاجة للتعقب الدقيق لتعقب التمرير، وذلك لتقليل كمية المعلومات المرسلة عبر الجسر. إن القيمة الافتراضية لهذه الخاصيّة هي الصفر والذي يعني إرسال حدث التمرير مرةً واحدةً فقط في كل مرةٍ تمرَّر فيها الواجهة.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
!المنصة
+
!align="center"| مطلوب
 +
!align="center"| المنصة
 
|-
 
|-
|عدد (number)
+
|align="center"| عدد (number)
|لا
+
|align="center"| لا
|iOS
+
|align="center"| iOS
 
|}
 
|}
  
===<code>scrollIndicatorInsets</code>===
+
=== <code>scrollIndicatorInsets</code> ===
تحدد مقدار دخول مؤشرات عرض التمرير من أطرافه، وعادة ما تُضبط قيمة هذه الخاصيّة بشكل مماثل لقيمة الخاصيّة <code>contentInset</code>. وقيمتها الافتراضية <code>{0، 0، 0، 0}</code>.
+
 
 +
تحدد مقدار دخول مؤشرات واجهة التمرير من أطرافه، و تُضبط قيمتها عادةً بشكلٍ مماثلٍ لقيمة الخاصيّة <code>contentInset</code>. وقيمتها الافتراضية <code>{0, 0, 0, 0}</code>.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
!المنصة
+
!align="center"| مطلوب
 +
!align="center"| المنصة
 
|-
 
|-
|كائن (<code>object: {top: number, left: number, bottom: number, right: number}‎</code>)
+
|align="center"| كائن (object: {top: number, left: number, bottom: number, right: number})
|لا
+
|align="center"| لا
|iOS
+
|align="center"| iOS
 
|}
 
|}
  
===<code>scrollEventThrottle</code>===
+
=== <code>scrollEventThrottle</code> ===
هي عبارة عن وسم (tag) يُستخدم لتسجيل أداء عرض التمرير الحالي، حيث يشغّل أحداث الزخم (الخاصيّة <code>sendMomentumEvents</code>). ليس لهذه الخاصيّة وظيفة أخرى، لذا نحتاج إلى تصميم مُنصت <code>FpsListener</code> أصيل للاستفادة من هذه الخاصيّة.
+
 
 +
هي وسمٌ (tag) يُستخدم لتسجيل أداء واجهة التمرير الحالي، حيث يشغّل الأحداث الزخمة (يمكن مراجعة sendMomentumEvents)، ليس لهذه الخاصيّة وظيفة أخرى، لذا نحتاج إلى تصميم مُنصتٍ <code>FpsListener</code> أصيلٍ للاستفادة منها.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
!المنصة
+
!align="center"| مطلوب
 +
!align="center"| المنصة
 
|-
 
|-
|سلسلة نصية (string)
+
|align="center"| سلسلة نصية (string)
|لا
+
|align="center"| لا
|Android
+
|align="center"| Android
 
|}
 
|}
  
===<code>scrollToOverflowEnabled</code>===
+
=== <code>scrollToOverflowEnabled</code> ===
عندما تكون قيمتها <code>true</code> فإنه يمكن برمجيًا تمرير عرض التمرير إلى خارج حدود حجم محتواه. وقيمته الافتراضية <code>false</code>.
+
 
 +
يمكن برمجيًا تمرير واجهة التمرير إلى خارج حدود حجم محتواه عندما تكون قيمتها true. وقيمتها الافتراضية false.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
!المنصة
+
!align="center"| مطلوب
 +
!align="center"| المنصة
 
|-
 
|-
|قيمة منطقية (bool)
+
|align="center"| قيمة منطقية (bool)
|لا
+
|align="center"| لا
|iOS
+
|align="center"| iOS
 
|}
 
|}
  
===<code>scrollsToTop</code>===
+
=== <code>scrollsToTop</code> ===
عندما تكون قيمتها <code>true</code> فإن عرض التمرير يمرَّر للأعلى عند نقر شريط الحالة. وقيمتها الافتراضية <code>true</code>.
+
 
 +
يمرَّر واجهة التمرير للأعلى عند نقر شريط الحالة عندما تكون قيمتها true. وهي القيمة الافتراضية.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
!المنصة
+
!align="center"| مطلوب
 +
!align="center"| المنصة
 
|-
 
|-
|قيمة منطقية (bool)
+
|align="center"| قيمة منطقية (bool)
|لا
+
|align="center"| لا
|iOS
+
|align="center"| iOS
 
|}
 
|}
  
===<code>sendUpdatedChildFrames</code>===
+
=== <code>sendUpdatedChildFrames</code> المهملة ===
'''مهملة:''' عندما تكون قيمتها <code>true</code> فإن عرض التمرير يرسل بيانات <code>updateChildFrames</code> في أحداث التمرير. أوجدت لدعم الإصدارات القديمة، وستُستخدم <code>onLayout</code> بدلًا منها لجلب بيانات الإطار. وقيمتها الافتراضية <code>false</code>.
+
 
 +
ترسل واجهة التمرير بيانات updateChildFrames في أحداث التمرير عندما تكون قيمتها true. أوجدت لدعم الإصدارات القديمة، وستُستخدم <code>onLayout</code> بدلًا منها لجلب بيانات الإطار. وقيمتها الافتراضية false.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
!المنصة
+
!align="center"| مطلوب
 +
!align="center"| المنصة
 
|-
 
|-
|قيمة منطقية (bool)
+
|align="center"| قيمة منطقية (bool)
|لا
+
|align="center"| لا
|iOS
+
|align="center"| iOS
 
|}
 
|}
  
===<code>showsHorizontalScrollIndicator</code>===
+
=== <code>showsHorizontalScrollIndicator</code> ===
عندما تكون قيمتها <code>true</code> فإنها تُظهر مؤشر التمرير الأفقي. وقيمتها الافتراضية <code>true</code>.
+
 
 +
تُظهر مؤشر التمرير الأفقي عندما تكون قيمتها true . وهي قيمتها الافتراضية.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
 +
!align="center"| مطلوب
 
|-
 
|-
|قيمة منطقية (bool)
+
|align="center"| قيمة منطقية (bool)
|لا
+
|align="center"| لا
 
|}
 
|}
  
===<code>showsVerticalScrollIndicator</code>===
+
=== <code>showsVerticalScrollIndicator</code> ===
  
 +
تُظهر مؤشر التمرير العموديّ عندما تكون قيمتها true . وهي قيمتها الافتراضية.
  
عندما تكون قيمتها <code>true</code> فإنها تُظهر مؤشر التمرير العمودي. وقيمتها الافتراضية <code>true</code>.
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
 +
!align="center"| مطلوب
 
|-
 
|-
|قيمة منطقية (bool)
+
|align="center"| قيمة منطقية (bool)
|لا
+
|align="center"| لا
 
|}
 
|}
  
===<code>snapToAlignment</code>===
+
=== <code>snapToAlignment</code> ===
تحدد هذه الخاصيّة علاقة الانجذاب (snapping) بعرض التمرير في حال كانت الخاصيّة <code>snapToInterval</code> مفعّلة. ولها القيم التالية:
+
 
* <code>start</code> (الافتراضية)- تحاذي الانجذاب لليسار في التمرير الأفقي، وللأعلى في التمرير العمودي.
+
تحدد هذه الخاصيّة علاقة الانجذاب (snapping) إلى واجهة التمرير في حال كانت الخاصيّة <code>snapToInterval</code> مفعّلة. ولها القيم التالية:
* <code>center</code> - تحاذي الانجذاب للمنتصف.
 
  
* <code>end</code> - تحاذي الانجذاب لليمين في التمرير الأفقي، وللأسفل في التمرير العمودي.
+
* <code>'start'</code> (الافتراضية): يكون الانجذاب حذاء اليسار في التمرير الأفقي، وحذاء الأعلى في التمرير العمودي.
 +
* <code>'center'</code>: يكون الانجذاب حذاء المنتصف.
 +
* <code>'end'</code>: يكون الانجذاب حذاء اليمين في التمرير الأفقي، وحذاء الأسفل في التمرير العمودي.
  
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
!المنصة
+
!align="center"| مطلوب
 +
!align="center"| المنصة
 
|-
 
|-
|قيمة اسمية (<code>enum('start', 'center', 'end')‎</code>)
+
|align="center"| قيمة متعددة (enum('start', 'center', 'end'))
|لا
+
|align="center"| لا
|iOS
+
|align="center"| iOS
 
|}
 
|}
  
===<code>snapToEnd</code>===
+
=== <code>snapToEnd</code> ===
تعمل بالتعاون مع الخاصيّة <code>snapToOffsets</code>. حيث تعدّ نهاية القائمة كإزاحة للانجذاب عندما تكون قيمتها <code>true</code> (القيمة الافتراضية)، ولتعطيل هذا السلوك يجب ضبطها بالقيمة <code>false</code> للسماح بالتمرير بحريّة بين نهاية القائمة وآخر إزاحة مضبوطة في الخاصيّة <code>snapToOffsets</code>.
+
 
 +
تعمل بالتعاون مع الخاصيّة <code>snapToOffsets</code>، حيث تعدّ نهاية القائمة إزاحةً للانجذاب عندما تكون قيمتها true (القيمة الافتراضية)، ولتعطيل هذا السلوك يجب ضبطها بالقيمة false للسماح بالتمرير بحريّةٍ بين نهاية القائمة وآخر إزاحةٍ مضبوطةٍ في الخاصيّة <code>snapToOffsets</code>.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
 +
!align="center"| مطلوب
 
|-
 
|-
|قيمة منطقية (bool)
+
|align="center"| قيمة منطقية (bool)
|لا
+
|align="center"| لا
 
|}
 
|}
  
 
=== <code>snapToInterval</code> ===
 
=== <code>snapToInterval</code> ===
تسمح هذه الخاصيّة بإيقاف عرض التمرير على مضاعفات قيمتها، لذا تُستخدم للتصفح عبر المكونات الأبناء التي طولها أصغر من عرض التمرير. وتُستخدم نموذجيًا مع الخاصيتين <code>snapToAlignment</code> و <code>decelerationRate="fast"</code>، وتلغي الخاصيّة <code>pagingEnabled</code> الأقل قابلية للضبط. 
+
 
 +
تسمح بإيقاف واجهة التمرير على مضاعفات قيمتها، لذا تُستخدم للتصفح عبر المكونات الأبناء التي طولها أصغر من واجهة التمرير، وتُستخدم نموذجيًا مع الخاصيتين <code>snapToAlignment</code> و <code>decelerationRate=&quot;fast&quot;</code>، وتلغي الخاصيّة <code>pagingEnabled</code> الأقل قابليةً للضبط.  
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
 +
!align="center"| مطلوب
 
|-
 
|-
|عدد (number)
+
|align="center"| عدد (number)
|لا
+
|align="center"| لا
 
|}
 
|}
  
 
=== <code>snapToOffsets</code> ===
 
=== <code>snapToOffsets</code> ===
تعمل هذه الخاصيّة على إيقاف عرض التمرير على الإزاحات المحددة، لذا تُستخدم للتصفح عبر المكونات الأبناء مختلفة الأحجام والتي طولها أصغر من عرض التمرير. وتُستخدم نموذجيًا مع الخاصيّة  <code>decelerationRate="fast"</code>، وتلغي الخاصيتين <code>pagingEnabled</code> و <code>snapToInterval</code> الأقل قابلية للضبط. 
+
 
 +
تعمل هذه الخاصيّة على إيقاف واجهة التمرير على الإزاحات المحددة، لذا تُستخدم للتصفح عبر المكونات الأبناء مختلفة الأحجام والتي طولها أصغر من واجهة التمرير. وتُستخدم نموذجيًا مع الخاصيّة <code>decelerationRate=&quot;fast&quot;</code>, وتلغي الخاصيتين <code>pagingEnabled</code> و <code>snapToInterval</code> ذات قابلية الضبط الأقلّ.  
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
 +
!align="center"| مطلوب
 
|-
 
|-
|مصفوفة عددية (array of number)  
+
|align="center"| مصفوفة عددية (array of number)
|لا
+
|align="center"| لا
 
|}
 
|}
  
 
=== <code>snapToStart</code> ===
 
=== <code>snapToStart</code> ===
تعمل بالتعاون مع الخاصيّة <code>snapToOffsets</code>. حيث تعدّ بداية القائمة كإزاحة للانجذاب عندما تكون قيمتها <code>true</code> (القيمة الافتراضية)، ولتعطيل هذا السلوك يجب ضبطها بالقيمة <code>false</code> للسماح بالتمرير بحريّة بين بداية القائمة وأول إزاحة مضبوطة في الخاصيّة <code>snapToOffsets</code>.
+
 
 +
تعمل بالتعاون مع الخاصيّة <code>snapToOffsets</code>، حيث تعدّ بداية القائمة إزاحةً للانجذاب عندما تكون قيمتها true (القيمة الافتراضية)، ولتعطيل هذا السلوك يجب ضبطها بالقيمة false للسماح بالتمرير بحريّة بين بداية القائمة وأول إزاحةٍ مضبوطةٍ في الخاصيّة <code>snapToOffsets</code>.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
 +
!align="center"| مطلوب
 
|-
 
|-
|قيمة منطقية (bool)
+
|align="center"| قيمة منطقية (bool)
|لا
+
|align="center"| لا
 
|}
 
|}
  
 
=== <code>stickyHeaderIndices</code> ===
 
=== <code>stickyHeaderIndices</code> ===
عبارة عن مصفوفة من أدلة المكونات الأبناء التي ستثبَّت بأعلى الشاشة عند التمرير، حيث يؤدي تمرير القيمة <code>stickyHeaderIndices={[0]}</code> إلى تثبيت الابن الأول بأعلى عرض التمرير. كما يمكن استخدام الإحداثيات <code>[x,y,z]</code> لجعل عدة عناصر دبقة (sticky) عند وصولها لأعلى الشاشة. لا تعمل هذه الخاصيّة مع الخاصيّة <code>horizontal={true}</code>. 
+
 
 +
مصفوفةٌ من أدلة المكونات الأبناء التي ستثبَّت بأعلى الشاشة عند التمرير، حيث يؤدي تمرير القيمة <code>stickyHeaderIndices={[0]}</code> إلى تثبيت الابن الأول في أعلى واجهة التمرير، كما يمكن استخدام الإحداثيات [x,y,z] لتثبيت عدة عناصر عند وصولها لأعلى الشاشة، ولا تعمل هذه الخاصيّة مع الخاصيّة <code>horizontal={true}</code>.  
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
 +
!align="center"| مطلوب
 
|-
 
|-
|مصفوفة عددية (array of number)  
+
|align="center"| مصفوفة عددية (array of number)
|لا
+
|align="center"| لا
 
|}
 
|}
  
 
=== <code>zoomScale</code> ===
 
=== <code>zoomScale</code> ===
تحدد مقياس الرسم لعرض التمرير الحالي، وقيمتها الافتراضية <code>1</code>.
+
 
 +
تحدد مقياس الرسم لواجهة التمرير الحالية، وقيمتها الافتراضية 1.0.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
!النوع
+
 
!مطلوب
+
!align="center"| النوع
!المنصة
+
!align="center"| مطلوب
 +
!align="center"| المنصة
 
|-
 
|-
|عدد (number)
+
|align="center"| عدد (number)
|لا
+
|align="center"| لا
|iOS
+
|align="center"| iOS
 
|}
 
|}
  
== التوابع (Methods) ==
+
== التوابع ==
 +
 
 +
=== <code>flashScrollIndicators()</code> ===
  
=== <code>()flashScrollIndicators</code> ===
+
<syntaxhighlight lang="javascript">flashScrollIndicators();</syntaxhighlight>
<syntaxhighlight lang="javascript">
+
يُظهر مؤشرات التمرير لحظيًا.
flashScrollIndicators();
 
</syntaxhighlight>يُظهر مؤشرات التمرير لحظيًا.
 
  
=== <code>()scrollTo</code> ===
+
=== <code>scrollTo()</code> ===
<syntaxhighlight lang="javascript">
+
 
scrollTo(
+
<syntaxhighlight lang="javascript">scrollTo(
 
   options?: {x?: number, y?: number, animated?: boolean} | number,
 
   options?: {x?: number, y?: number, animated?: boolean} | number,
   deprecatedX?: number,
+
   desyntaxhighlightcatedX?: number,
     deprecatedAnimated?: boolean,
+
     desyntaxhighlightcatedAnimated?: boolean,
);
+
);</syntaxhighlight>
 +
يقوم بالتمرير نحو الإزاحة المعطاة (x,y) بحركةٍ سريعةٍ أو سلسةٍ.
 +
 
 +
'''مثال:'''
 +
 
 +
<syntaxhighlight class="">scrollTo({x: 0, y: 0, animated: true})</syntaxhighlight>
 +
'''ملاحظة:''' لهذا التابع توقيع (signature) غريبٌ لأنّه صُمم لدعم المنصات القديمة، حيث يقبل معاملاتٍ منفصلةً كبديلٍ عن كائن الخيارات، لذا يهمَل هذا الكائن منعًا للالتباس.
  
</syntaxhighlight>يمرر نحو الإزاحة المعطاة (x,y) بحركة سريعة أو سلسة.
+
=== <code>scrollToEnd()</code> ===
  
'''مثال:'''<syntaxhighlight lang="javascript">
+
<syntaxhighlight lang="javascript">scrollToEnd(([options]: { animated: boolean, duration: number }));</syntaxhighlight>
scrollTo({x: 0, y: 0, animated: true})
+
يقوم بالتمرير للأسفل عندما تكون واجهة التمرير عموديةً، ولليمين عندما تكون أفقيةً، وله الخيار <code>scrollToEnd({animated: true})</code> للتمرير السلس وهو الإفتراضي، والخيار <code>scrollToEnd({animated: false})</code> للتمرير السريع، ويمكن على منصة Android إضافة المدة الزمنية للتمرير <code>scrollToEnd({duration: 500})</code>، وتكون القيمة الافتراضية للخيار <code>animated</code> هي true عند عدم تمرير أي خيار لهذا لتابع.  
</syntaxhighlight>'''ملاحظة:''' لهذا التابع توقيع (signature) غريب لكونه صُمم لدعم المنصات القديمة، حيث يقبل معاملات منفصلة كبديل عن كائن الخيارات، لذا فإن هذا الكائن مهمل لمنع الالتباس.
 
  
=== <code>()scrollToEnd</code> ===
+
=== <code>scrollWithoutAnimationTo()</code> ===
<syntaxhighlight lang="javascript">
 
scrollToEnd(([options]: { animated: boolean, duration: number }));
 
</syntaxhighlight>يمرر للأسفل في حال كان عرض التمرير عموديًا، ويمرر لليمين في حال كان عرض التمرير أفقيًا. وله الخيار <code>scrollToEnd({animated: true})</code> من أجل التمرير السلس وهو الإفتراضي، والخيار <code>scrollToEnd({animated: false})‎</code> من أجل التمرير السريع. كما ويمكن على منصة Android إضافة المدة الزمنية للتمرير <code>scrollToEnd({duration:500})‎</code>. في حال عدم تمرير أي خيار لهذا لتابع فإن القيمة الافتراضية للخيار <code>animated</code> هي <code>true</code>.
 
  
=== <code>()scrollWithoutAnimationTo</code> ===
+
<syntaxhighlight lang="javascript">scrollWithoutAnimationTo(y, x);</syntaxhighlight>
<syntaxhighlight lang="javascript">
+
'''مهمل:''' استخدم التابع <code>scrollTo</code> بدلًا منه.
scrollWithoutAnimationTo(y, x);
 
</syntaxhighlight>
 
<blockquote>'''''مهمل:''' استخدم التابع <code>scrollTo</code> بدلا منه.</blockquote>
 
  
 
== مصادر ==
 
== مصادر ==
  
* [https://reactnative.dev/docs/scrollview صفحة scrollView في توثيق React Native الرسمي.]
+
* [https://facebook.github.io/react-native/docs/scrollview صفحة scrollView في توثيق React Native الرسميّ]
[[تصنيف:ReactNative]]
 

مراجعة 16:37، 13 فبراير 2021

مكوّن يغلّف المنصة ScrollView لتأمين التكامل مع منظومة مستجيب قفل اللمس (touch locking).

يعمل عندما يكون ارتفاع مكوّن واجهة التمرير ScrollView محددًا (bounded)، لأنّه سيضم أبناءً غير محددي الارتفاع إلى حاوية محدّدة الارتفاع عبر تفاعل التمرير، يمكن تحديد ارتفاع مكون واجهة التمرير بضبط ارتفاعه مباشرةً (وهو خيار غير مستحسنٍ) أو بالتأكد من أن لجميع الواجهات الآباء ارتفاعٌ محدّدٌ، يؤدي نسيان تحويل {flex: 1} أسفل مكدس الواجهة إلى حدوث أخطاءٍ، يسارع مراقب العناصر إلى تصحيحها (debug).

لا يدعم هذا المكوّن حتى الآن المستجيبات المضمّنة الأخرى والتي تمنع أن تصبح واجهة التمرير الحالية هي المستجيب.

متى يُستخدم المكوّن FlatList بدل المكوّن <ScrollView>:

يصيّر مكوّن واجهة التمرير ScrollView جميع مكونات react الأبناء دفعةً واحدةً، مما يؤثر سلبًا على الأداء، مثلًا عند عرض قوائم طويلة تمتد على عدة صفحات محتوى، يبطئ إنشاء الكثير من مكونات JS -والواجهات الأصيلة (native) التي ستظهر دفعةً واحدةً- عملية التصيير ويستهلك الكثير من الذاكرة.

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

مثال

import React from 'react';
import { StyleSheet, Text, SafeAreaView, ScrollView } from 'react-native';
import Constants from 'expo-constants';

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <ScrollView style={styles.scrollView}>
        <Text style={styles.text}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          resyntaxhighlighthenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </Text>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: Constants.statusBarHeight,
  },
  scrollView: {
    backgroundColor: 'pink',
    marginHorizontal: 20,
  },
  text: {
    fontSize: 42,
  },
});

export default App;

الخاصيّات

موروثة من الخاصيّات View Props.

alwaysBounceHorizontal

تجعل واجهة التمرير ترتدّ (bounce) أفقيًا عند وصولها للنهاية حتى ولو كان المحتوى أصغر من واجهة التمرير نفسها، قيمتها الافتراضية true عندما تكون قيمة horizontal={true} وإلا فستكون false.

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

alwaysBounceVertical

تجعل واجهة التمرير ترتدّ (bounce) عموديًا عند وصولها للنهاية حتى ولو كان المحتوى أصغر من واجهة التمرير نفسها، قيمتها الافتراضية false عندما تكون قيمة horizontal={true} وإلا فستكون true.

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

automaticallyAdjustContentInset

تتحكّم في ضبط iOS التلقائي للمحتوى المنشأ لواجهات التمرير المتواجدة خلف شريط التنقل أو شريط الأدوات. وقيمتها الافتراضية true.

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

bounces

تجعل واجهة التمرير يرتد عند وصوله لنهاية المحتوى إن كان أكبر من واجهة التمرير وفق محور اتجاه التمرير عندما تكون قيمتها true، وستلغي جميع أنواع الارتداد حتى لو كانت الخاصيات alwaysBounce* مفعّلة إذا كانت قيمتها false. قيمتها الافتراضية true.

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

bouncesZoom

تتيح استخدام الإيماءات (gestures) لتجاوز الحد الأدنى والأعلى للتكبير عندما تكون قيمتها true، ويعود التكبير إلى حدوده العليا والصغرى بعد انتهاء الإيماءة. وإلا لن يتجاوز التكبير الحدود

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

canCancelContentTouches

تمنع اللمسة المتحركة من السحب (drag) عندما تكون قيمتها true. وهي القيمة الافتراضية.

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

centerContent

تضع المحتوى آليًا في منتصف واجهة التمرير إذا كان المحتوى أصغر من حدود واجهة التمرير إذا كانت قيمتها true، أما إن كان المحتوى أكبر من واجهة التمرير فلا تأثير لهذه الخاصيّة. وقيمتها الافتراضية false.

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

contentContainerStyle

وهي مجموعة من التنسيقات المطبّقة على محتوى واجهة التمرير، والتي تغلّف جميع واجهات المكونات الأبناء.

مثال:

return (
  &lt;ScrollView contentContainerStyle={styles.contentContainer}&gt;
  &lt;/ScrollView&gt;
);
...
const styles = StyleSheet.create({
  contentContainer: {
    paddingVertical: 20
  }
});
النوع مطلوب
تنسيقات StyleSheetPropType(View Style props) لا

contentInset

تحدد مقدار بعد المحتوى عن حواف واجهة التمرير وقيمتها الافتراضية {top: 0, left: 0, bottom: 0, right: 0}.

النوع مطلوب المنصة
كائن (object: {top: number, left: number, bottom: number, right: number}) لا iOS

contentInsetAdjustmentBehavior

تحدد طريقة استخدام منطقة الإدخال لتعديل منطقة المحتوى في واجهة التمرير. والقيمة الافتراضية لها "never"، وهي متوفرة فقط على منصة iOS ذات الإصدار 11 وما بعده.

النوع مطلوب المنصة
قيمة متعددة (enum('automatic', 'scrollableAxes', 'never', 'always')) لا iOS

contentOffset

تُستخدم لتحديد إزاحة بداية التمرير يدويًا، والقيمة الافتراضية لها {x: 0, y: 0}.

النوع مطلوب المنصة
PointPropType لا iOS

decelerationRate

عبارة عن عدد عشري يحدد معدل تباطؤ التمرير بعد رفع الإصبع عن واجهة التمرير، كما يمكن استخدام اختصارات السلاسل النصية normal و fast والتي تقابل الإعدادات UIScrollViewDecelerationRateNormal و UIScrollViewDecelerationRateFast على منصة iOS.

  • 'normal' (الافتراضية): وتوافق القيمة 0.998 على منصّة iOS والقيمة 0.985 على منصّة Android.
  • 'fast': وتوافق القيمة 0.99 على منصّة iOS والقيمة 0.9 على منصّة Android.
النوع مطلوب
قيمة متعددة، عدد (enum('fast', 'normal'),number) لا

directionalLockEnabled

تقفل التمرير العمودي أو الأفقي فقط أثناء السحب إذا كانت قيمتها true. وقيمتها الافتراضية false.

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

disableIntervalMomentum

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

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

disableScrollViewPanResponder

إذا كانت قيمتها true فستلغي عمل المكوّن Pan Responder الافتراضيّ لواجهة التمرير، ويُترك التحكم الكامل للّمسات داخل واجهة التمرير للمكونات الأبناء. وهذا مفيد عمليًا عند تفعيل الخاصيّة snapToInterval لأنها لا تتبع أنمط اللمسات النموذجية، يجب تجنب هذه الخاصيّة في الاستخدامات الاعتيادية لواجهة التمرير من دون الخاصيّة snapToInterval، لأنها قد تسبب حدوث لمسات غير متوقعة أثناء التمرير. وقيمتها الافتراضية false.

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

endFillColor

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

النوع مطلوب المنصة
لون (color) لا Android

fadingEdgeLength

تُستخدم لتلاشي (Fade) حواف محتوى التمرير، فإذا كانت قيمتها أكبر من الصفر فستتلاشى الحواف وفقًا لاتجاه ومكان التمرير الحالي، للدلالة فيما إذا كان هنالك مزيد من المحتوى لإظهاره.

النوع مطلوب القيمة الافتراضية المنصة
عدد (number) لا 0 Android

horizontal

إذا كانت قيمتها true فستصطفّ المكونات الأبناء لواجهة التمرير أفقيًا في سطر بدل الاصطفاف عموديًا في عمود، وقيمتها الافتراضية false.

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

indicatorStyle

تُستخدم لتنسيق مؤشر التمرير، وقيمها:

  • 'default' (الافتراضية): نفس black.
  • 'black': يكون المؤشر أسودًا، ويستخدم مع الخلفيات الفاتحة.
  • 'white': يكون المؤشر أبيضًا، ويستخدم مع الخلفيات الداكنة.
النوع مطلوب المنصة
قيمة متعددة (enum('default', 'black', 'white')) لا iOS

invertStickyHeaders

تثبت هذه الخاصيّة الترويسات المثبتة (sticky headers) أسفل واجهة التمرير بدلًا من أعلاه، وتستخدم عادة مع واجهة التمرير المقلوبة.

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

keyboardDismissMode

تُستخدم لإبطال لوحة المفاتيح أثناء السحب، وقيمها:

على المنصات المتعددة (Cross platform):

  • 'none' (الافتراضية): لا يلغي السحب لوحة المفاتيح.
  • 'on-drag': تلغى لوحة المفاتيح عند بدء السحب.

على منصّة iOS:

  • interactive: تلغى لوحة المفاتيح تفاعليًا مع السحب والحركات بالتزامن مع اللمس، وتفعّل بالسحب للأعلى. وهذه الخاصيّة غير مفعّلة على منصّة Android وتبقى كما لو أن قيمتها 'none'.
النوع مطلوب
قيمة متعددة (enum('none', 'on-drag', 'interactive')) لا

keyboardShouldPersistTaps

تحدد بقاء لوحة المفاتيح مرئيّةً بعد النقر (tap)، وقيمها:

  • 'never' (الافتراضية): تلغى لوحة المفاتيح عند النقر خارج إطار النص المركّز ولوحة المفاتيح قيد التشغيل. ولن تستقبل المكونات الأبناء لواجهة التمرير النقر عند حدوث ذلك.
  • 'always': لا تلغى لوحة المفاتيح تلقائيًا، ولن تستقبل واجهة التمرير النقر لكن المكونات الأبناء تستطيع استقباله.
  • 'handled': لا تبطل لوحة المفاتيح تلقائيًا عندما تعالج المكونات الأبناء النقر (أو عند استقباله من قبل المكونات الأجداد).
  • false (مهملة): استخدم 'never' بدلًا منها.
  • true (مهملة): استخدم 'always' بدلًا منها.
النوع مطلوب
قيمة متعددة (enum('always', 'never', 'handled', false, true)) لا

maintainVisibleContentPosition

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

يمكن استخدام القيمة الاختيارية autoscrollToTopThreshold لتمرير المحتوى تلقائيا للأعلى بعد ضبط موقع التمرير إذا كان المستخدم ضِمن العتبة العليا قبل الضبط، وهذا مفيد في تطبيقات الدردشة من أجل رؤية الرسائل الجديدة الواردة بشكلٍ تلقائيٍّ دون الحاجة للتمرير في حال قام المستخدم بالتمرير بعيدًا عنها.

تنبيه 1: قد يؤدي إعادة ترتيب عناصر واجهة التمرير مع تمكين هذه الخاصيّة إلى حدوث قفزات مخلة (jumpiness)، ولا يوجد نيّة حاليًا لإصلاح هذا الخلل، لذا يجب حاليًا تجنّب إعادة ترتيب محتوى أي مكوّن واجهة تمريرٍ أو قوائم تستخدم هذه الخاصيّة.

تنبيه 2: تستخدم هذه الخاصيّة الخاصيتين contentOffset و frame.origin في الشفرة الأصيلة لحساب قدرة الإظهار (visibility). كما أنه لم تؤخذ التحويلات وتعقيدات الإظهار الأخرى في الاعتبار.

النوع مطلوب المنصة
كائن (object: { minIndexForVisible: number, autoscrollToTopThreshold: number }) لا iOS

maximumZoomScale

تحدد مقياس الرسم (scale) الأعظمي للتكبير. قيمتها الافتراضية 1.

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

minimumZoomScale

تحدد مقياس الرسم (scale) الأصغر للتكبير. قيمتها الافتراضية 1.0.

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

nestedScrollEnabled

تمكّن التمرير المتداخل (nested)، وهي مدعومةٌ على واجهات منصة Android البرمجية من المستوى 21 وما بعده، ومدعومة افتراضيًا على منصّة iOS.

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

onContentSizeChange

تُستدعى عند تغيّر المحتوى الممرر في المكون ScrollView، حيث يمرر لها عرض المحتوى وارتفاعه على شكل معاملين: contentWidth و contentHeight.

صُممت باستخدام المعالج onLayout المرتبط بحاوية المحتوى الذي يظهره ScrollView.

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

onMomentumScrollBegin

تُستدعى عند بدء التمرير الزخم (momentum) (حين يبدأ ScrollView بالانزلاق).

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

onMomentumScrollEnd

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

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

onScroll

تُطلق مرة واحدة على الأكثر لكل إطار (frame) أثناء التمرير. ويمكن التحكم بتردد الأحداث عن طريق الخاصيّة scrollEventThrottle، ولهذه الأحداث الشكل التالي (جميع القيم أعداد):

{
  nativeEvent: {
    contentInset: {bottom, left, right, top},
    contentOffset: {x, y},
    contentSize: {height, width},
    layoutMeasurement: {height, width},
    zoomScale
  }
}
النوع مطلوب
دالة (function) لا

onScrollBeginDrag

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

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

onScrollEndDrag

تُستدعى عند توقف المستخدم عن سحب واجهة التمرير، وكذلك عندما تتوقف واجهة التمرير أو تبدأ بالانزلاق.

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

onScrollToTop

تُطلق عند تمرير واجهة التمرير للأعلى بعد نقر شريط الحالة.

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

overScrollMode

تُستخدم لتعديل القيمة الافتراضية لوضع التمرير الإضافي (overScroll), وقيمها:

  • 'auto' (الافتراضية): تسمح للمستخدم بالتمرير الإضافي لهذه الواجهة فقط إذا كان كان حجم المحتوى كبيرًا بشكل كافٍ لهذا النوع من التمرير.
  • 'always': تسمح للمستخدم بالتمرير الإضافي لهذه الواجهة دائمًا.
  • 'never': لا تسمح للمستخدم بالتمرير الإضافي لهذه الواجهة.
النوع مطلوب المنصة
قيمة متعددة (enum('auto', 'always', 'never')) لا Android

pagingEnabled

ستتوقف واجهة التمرير عند مضاعفات حجمها فقط عندما تكون قيمة هذه الخاصيّة true، ويمكن استخدامها للتصفح الأفقي، وقيمتها الافتراضية false.

ملاحظة: لا تدعم منصة Android التصفح العموديّ.

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

persistentScrollbar

لا تسمح لأشرطة التمرير بأن تكون شفافة عند عدم استخدامها، وقيمتها الافتراضية false.

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

pinchGestureEnabled

تسمح باستخدام إيماءات القَرص (pinch gestures) للتكبير والتصغير في واجهة التمرير عندما تكون قيمتها true (وهي القيمة الافتراضية).

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

refreshControl

يُستخدم لتأمين وظيفة التحديث بالسحب (pull-to-refresh) لواجهة التمرير، ويعمل مع واجهة التمرير العمودية فقط (يجب أن يكون للخاصيّة horizontal القيمة false). ولمزيد من المعلومات حول هذا المكوّن يمكن الإطلاع على RefreshControl.

النوع مطلوب
عنصر (element) لا

removeClippedSubviews

تجريبي: تزال الواجهات الأبناء (التي يكون فيها للخاصيّة overflow القيمة hidden) التي تقع خارج الشاشة من الواجهة الرئيسية (superview) عندما تكون القيمة true، مما يحسّن أداء التمرير في القوائم الطويلة.

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

scrollBarThumbImage

يمكن بشكل اختياري استخدام صورةٍ كأيقونةٍ لشريط التمرير، وهذا بدوره يلغي اللون عند وجود الصورة، غير أن اللون يستخدم أثناء تحميل الصورة أو عند فشل التحميل، كما يمكن إلغاء اللون أثناء تحميل الصورة بجعل قناة الشفافية alpha مساويةً للصفر.

  • uri: سلسلة نصيّة تمثل معرّف مصدر الصورة، والذي هو عبارة عن مسار الملف المحلي للصورة أو اسم مصدر الصورة الثابت (static).
  • number: نوع مبهم (Opaque) يعاد من قبل شيءٍ ما مثل import IMAGE from'./image.jpg'.
النوع مطلوب المنصة
عدد (number) لا VR

scrollEnabled

لا يمكن تمرير الواجهة باللمس عندما تكون قيمتها false، والقيمة الافتراضية true.

ملاحظة: يمكن تمرير الواجهة دائمًا باستدعاء scrollTo.

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

scrollEventThrottle

تتحكم بعدد مرات إطلاق أحداث التمرير أثناء التمرير (الفاصل الزمنيّ بالميلي ثانية)، وكلما كانت قيمتها أصغر كلما زادت دقة الشفرة البرمجية في تعقّب موقع التمرير، غير أن هذا قد يسبب مشاكل في الأداء بسبب كمّ المعلومات المرسل عبر الجسر، ولا يلاحظ الفرق عند تغيير القيم ضمن المجال 1- 16 بسبب تزامن حلقة JS مع معدل تحديث الشاشة، لذا يُفضّل وضع قيمةٍ كبيرةٍ لهذه الخاصيّة عند عدم الحاجة للتعقب الدقيق لتعقب التمرير، وذلك لتقليل كمية المعلومات المرسلة عبر الجسر. إن القيمة الافتراضية لهذه الخاصيّة هي الصفر والذي يعني إرسال حدث التمرير مرةً واحدةً فقط في كل مرةٍ تمرَّر فيها الواجهة.

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

scrollIndicatorInsets

تحدد مقدار دخول مؤشرات واجهة التمرير من أطرافه، و تُضبط قيمتها عادةً بشكلٍ مماثلٍ لقيمة الخاصيّة contentInset. وقيمتها الافتراضية {0, 0, 0, 0}.

النوع مطلوب المنصة
كائن (object: {top: number, left: number, bottom: number, right: number}) لا iOS

scrollEventThrottle

هي وسمٌ (tag) يُستخدم لتسجيل أداء واجهة التمرير الحالي، حيث يشغّل الأحداث الزخمة (يمكن مراجعة sendMomentumEvents)، ليس لهذه الخاصيّة وظيفة أخرى، لذا نحتاج إلى تصميم مُنصتٍ FpsListener أصيلٍ للاستفادة منها.

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

scrollToOverflowEnabled

يمكن برمجيًا تمرير واجهة التمرير إلى خارج حدود حجم محتواه عندما تكون قيمتها true. وقيمتها الافتراضية false.

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

scrollsToTop

يمرَّر واجهة التمرير للأعلى عند نقر شريط الحالة عندما تكون قيمتها true. وهي القيمة الافتراضية.

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

sendUpdatedChildFrames المهملة

ترسل واجهة التمرير بيانات updateChildFrames في أحداث التمرير عندما تكون قيمتها true. أوجدت لدعم الإصدارات القديمة، وستُستخدم onLayout بدلًا منها لجلب بيانات الإطار. وقيمتها الافتراضية false.

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

showsHorizontalScrollIndicator

تُظهر مؤشر التمرير الأفقي عندما تكون قيمتها true . وهي قيمتها الافتراضية.

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

showsVerticalScrollIndicator

تُظهر مؤشر التمرير العموديّ عندما تكون قيمتها true . وهي قيمتها الافتراضية.

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

snapToAlignment

تحدد هذه الخاصيّة علاقة الانجذاب (snapping) إلى واجهة التمرير في حال كانت الخاصيّة snapToInterval مفعّلة. ولها القيم التالية:

  • 'start' (الافتراضية): يكون الانجذاب حذاء اليسار في التمرير الأفقي، وحذاء الأعلى في التمرير العمودي.
  • 'center': يكون الانجذاب حذاء المنتصف.
  • 'end': يكون الانجذاب حذاء اليمين في التمرير الأفقي، وحذاء الأسفل في التمرير العمودي.
النوع مطلوب المنصة
قيمة متعددة (enum('start', 'center', 'end')) لا iOS

snapToEnd

تعمل بالتعاون مع الخاصيّة snapToOffsets، حيث تعدّ نهاية القائمة إزاحةً للانجذاب عندما تكون قيمتها true (القيمة الافتراضية)، ولتعطيل هذا السلوك يجب ضبطها بالقيمة false للسماح بالتمرير بحريّةٍ بين نهاية القائمة وآخر إزاحةٍ مضبوطةٍ في الخاصيّة snapToOffsets.

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

snapToInterval

تسمح بإيقاف واجهة التمرير على مضاعفات قيمتها، لذا تُستخدم للتصفح عبر المكونات الأبناء التي طولها أصغر من واجهة التمرير، وتُستخدم نموذجيًا مع الخاصيتين snapToAlignment و decelerationRate="fast"، وتلغي الخاصيّة pagingEnabled الأقل قابليةً للضبط.

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

snapToOffsets

تعمل هذه الخاصيّة على إيقاف واجهة التمرير على الإزاحات المحددة، لذا تُستخدم للتصفح عبر المكونات الأبناء مختلفة الأحجام والتي طولها أصغر من واجهة التمرير. وتُستخدم نموذجيًا مع الخاصيّة decelerationRate="fast", وتلغي الخاصيتين pagingEnabled و snapToInterval ذات قابلية الضبط الأقلّ.

النوع مطلوب
مصفوفة عددية (array of number) لا

snapToStart

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

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

stickyHeaderIndices

مصفوفةٌ من أدلة المكونات الأبناء التي ستثبَّت بأعلى الشاشة عند التمرير، حيث يؤدي تمرير القيمة stickyHeaderIndices={[0]} إلى تثبيت الابن الأول في أعلى واجهة التمرير، كما يمكن استخدام الإحداثيات [x,y,z] لتثبيت عدة عناصر عند وصولها لأعلى الشاشة، ولا تعمل هذه الخاصيّة مع الخاصيّة horizontal={true}.

النوع مطلوب
مصفوفة عددية (array of number) لا

zoomScale

تحدد مقياس الرسم لواجهة التمرير الحالية، وقيمتها الافتراضية 1.0.

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

التوابع

flashScrollIndicators()

flashScrollIndicators();

يُظهر مؤشرات التمرير لحظيًا.

scrollTo()

scrollTo(
  options?: {x?: number, y?: number, animated?: boolean} | number,
  desyntaxhighlightcatedX?: number,
    desyntaxhighlightcatedAnimated?: boolean,
);

يقوم بالتمرير نحو الإزاحة المعطاة (x,y) بحركةٍ سريعةٍ أو سلسةٍ.

مثال:

scrollTo({x: 0, y: 0, animated: true})

ملاحظة: لهذا التابع توقيع (signature) غريبٌ لأنّه صُمم لدعم المنصات القديمة، حيث يقبل معاملاتٍ منفصلةً كبديلٍ عن كائن الخيارات، لذا يهمَل هذا الكائن منعًا للالتباس.

scrollToEnd()

scrollToEnd(([options]: { animated: boolean, duration: number }));

يقوم بالتمرير للأسفل عندما تكون واجهة التمرير عموديةً، ولليمين عندما تكون أفقيةً، وله الخيار scrollToEnd({animated: true}) للتمرير السلس وهو الإفتراضي، والخيار scrollToEnd({animated: false}) للتمرير السريع، ويمكن على منصة Android إضافة المدة الزمنية للتمرير scrollToEnd({duration: 500})، وتكون القيمة الافتراضية للخيار animated هي true عند عدم تمرير أي خيار لهذا لتابع.

scrollWithoutAnimationTo()

scrollWithoutAnimationTo(y, x);

مهمل: استخدم التابع scrollTo بدلًا منه.

مصادر