الفرق بين المراجعتين لصفحة: «ReactNative/scrollview»
جميل-بيلوني (نقاش | مساهمات) طلا ملخص تعديل |
جميل-بيلوني (نقاش | مساهمات) طلا ملخص تعديل |
||
(5 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
سطر 1: | سطر 1: | ||
مكوّن يغلّف المنصة ScrollView لتأمين التكامل مع منظومة مستجيب قفل اللمس (touch locking). | <noinclude>{{DISPLAYTITLE:المكون ScrollView في ReactNative}}</noinclude> | ||
مكوّن يغلّف المنصة <code>ScrollView</code> لتأمين التكامل مع منظومة مستجيب قفل اللمس (touch locking)، حيث يعمل عندما يكون ارتفاع مكوّن واجهة التمرير <code>ScrollView</code> محدّدًا (bounded)، نظرًا لكونه سيضم أبناءً غير محددي الارتفاع إلى حاوية محدّدة الارتفاع عبر تفاعل التمرير، يمكن تحديد ارتفاع مكون واجهة التمرير بضبط ارتفاعه مباشرةً (وهو خيار غير مستحسنٍ)، أو بالتأكد من وجود ارتفاع محدّد لجميع الواجهات الآباء، ويؤدي نسيان تحويل <code>{flex: 1}</code> أسفل مكدس الواجهة إلى حدوث أخطاءٍ يسارع مراقب العناصر إلى تصحيحها (debug). | |||
لا يدعم هذا المكوّن حتى الآن المستجيبات المضمّنة الأخرى والتي تمنع جعل واجهة التمرير الحالية هي المستجيب. | |||
متى يُستخدم المكوّن <code>[[ReactNative/flatlist|FlatList]]</code> بدل المكوّن <code>ScrollView</code>؟ | |||
يصيّر مكوّن واجهة التمرير <code>ScrollView</code> جميع مكونات [[React|react]] الأبناء دفعةً واحدةً، مما يؤثر سلبًا على الأداء، فمثلًا عند عرض قوائم طويلة تمتد على عدة صفحات محتوى، فسيبطئ إنشاء الكثير من مكونات JS -والواجهات الأصيلة (native) التي ستظهر دفعةً واحدةً- عملية التصيير ويستهلك الكثير من الذاكرة، وفي هذه الحالة يفضَّل استخدام المكوّن <code>FlatList</code> الذي لا يصير المكوّنات إلا عندما يقترب وقت ظهورها، كما يقوم بإزالتها عند الانتهاء من عرضها على الشاشة مما يوفر قدرة المعالجة والذاكرة المستخدمة، كما يُستخدم هذا المكوّن عند الحاجة لتصيير فاصلٍ بين العناصر أو بين الأعمدة المتعددة، أو تحميل التمرير اللانهائيّ وغيرها من الميزات غير المتوافرة في غيره. | |||
يصيّر مكوّن واجهة التمرير <code>ScrollView</code> جميع مكونات react الأبناء دفعةً واحدةً، مما يؤثر سلبًا على الأداء، | |||
__toc__ | |||
== مثال == | == مثال == | ||
إليك المثال التالي ([https://snack.expo.dev/@hsoubwiki/scrollview تجربة حية]):<syntaxhighlight lang="javascript">import React from 'react'; | |||
<syntaxhighlight lang="javascript">import React from 'react'; | import { StyleSheet, Text, SafeAreaView, ScrollView, StatusBar } from 'react-native'; | ||
import { StyleSheet, Text, SafeAreaView, ScrollView } from 'react-native | |||
const App = () => { | const App = () => { | ||
سطر 26: | سطر 22: | ||
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 | |||
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. | ||
سطر 38: | سطر 34: | ||
container: { | container: { | ||
flex: 1, | flex: 1, | ||
paddingTop: StatusBar.currentHeight, | |||
}, | }, | ||
scrollView: { | scrollView: { | ||
سطر 50: | سطر 46: | ||
export default App;</syntaxhighlight> | export default App;</syntaxhighlight> | ||
== | == الخاصيات == | ||
موروثة من الخاصيّات <code>[[ReactNative/view|View]]</code>. | موروثة من الخاصيّات <code>[[ReactNative/view|View]]</code>. | ||
=== <code>StickyHeaderComponent</code> === | |||
مكون React سيستخدم لتصيير ترويسات مثبة (sticky headers) ويجب أن يستخدم مع <code>stickyHeaderIndices</code>، وستحتاج إلى تعيين هذ المكون إذا كانت الترويسة المثبتة تستعمل تحويلات مخصصة مثل أن تريد أن تملك قائمةً تحريكات مخصصة مع ترويسة قابلة للاختفاء. إن لم يعطى هذا المكون، فسيُستعمَل المكون <code>[https://github.com/facebook/react-native/blob/master/Libraries/Components/ScrollView/ScrollViewStickyHeader.js ScrollViewStickyHeader]</code> بدلًا منه افتراضيًا. | |||
{| class="wikitable" | |||
! النوع | |||
|- | |||
| مكون، عنصر | |||
|} | |||
=== <code>alwaysBounceHorizontal</code> === | === <code>alwaysBounceHorizontal</code> === | ||
تجعل واجهة التمرير ترتدّ (bounce) أفقيًا عند وصولها للنهاية حتى ولو كان المحتوى أصغر من واجهة التمرير نفسها، قيمتها الافتراضية true عندما تكون قيمة <code>horizontal={true | تجعل واجهة التمرير ترتدّ (bounce) أفقيًا عند وصولها للنهاية حتى ولو كان المحتوى أصغر من واجهة التمرير نفسها، قيمتها الافتراضية <code>true</code> عندما تكون قيمة <code>{horizontal={true</code> وإلا فستكون <code>false</code>. | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | ! المنصة | ||
! | |||
|- | |- | ||
| | | (bool) | ||
| لا | |||
| iOS | |||
|} | |} | ||
=== <code>alwaysBounceVertical</code> === | === <code>alwaysBounceVertical</code> === | ||
تجعل واجهة التمرير ترتدّ (bounce) عموديًا عند وصولها للنهاية حتى ولو كان المحتوى أصغر من واجهة التمرير نفسها، قيمتها الافتراضية false عندما تكون قيمة <code>horizontal={true | تجعل واجهة التمرير ترتدّ (bounce) عموديًا عند وصولها للنهاية حتى ولو كان المحتوى أصغر من واجهة التمرير نفسها، قيمتها الافتراضية <code>false</code> عندما تكون قيمة <code>{horizontal={true</code> وإلا فستكون <code>true</code>. | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | ! المنصة | ||
! | |||
|- | |- | ||
| | | (bool) | ||
| لا | |||
| iOS | |||
|} | |} | ||
=== <code>automaticallyAdjustContentInset</code> === | === <code>automaticallyAdjustContentInset</code> === | ||
تتحكّم في ضبط iOS التلقائي للمحتوى المنشأ لواجهات التمرير المتواجدة خلف شريط التنقل أو شريط | تتحكّم في ضبط iOS التلقائي للمحتوى المنشأ لواجهات التمرير المتواجدة خلف شريط التنقل أو شريط الأدوات، وقيمتها الافتراضية <code>true</code>. | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | ! المنصة | ||
! | |||
|- | |- | ||
| | | (bool) | ||
| لا | |||
| iOS | |||
|} | |} | ||
=== <code>bounces</code> === | === <code>bounces</code> === | ||
تجعل واجهة التمرير يرتد عند وصوله لنهاية المحتوى إن كان أكبر من واجهة التمرير وفق محور اتجاه التمرير عندما تكون قيمتها | تجعل واجهة التمرير يرتد عند وصوله لنهاية المحتوى إن كان أكبر من واجهة التمرير وفق محور اتجاه التمرير عندما تكون قيمتها <code>true</code>، وستلغي جميع أنواع الارتداد حتى لو كانت الخاصيات <code>*alwaysBounce</code> مفعّلة إذا كانت قيمتها <code>false</code>، وقيمتها الافتراضية <code>true</code>. | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | ! المنصة | ||
! | |||
|- | |- | ||
| | | (bool) | ||
| لا | |||
| iOS | |||
|} | |} | ||
=== <code>bouncesZoom</code> === | === <code>bouncesZoom</code> === | ||
تتيح استخدام الإيماءات (gestures) لتجاوز الحد الأدنى والأعلى للتكبير عندما تكون قيمتها | تتيح استخدام الإيماءات (gestures) لتجاوز الحد الأدنى والأعلى للتكبير عندما تكون قيمتها <code>true</code>، ويعود التكبير إلى حدوده العليا والصغرى بعد انتهاء الإيماءة، وإلا فلن يتجاوز التكبير الحدود | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | ! المنصة | ||
! | |||
|- | |- | ||
| | | (bool) | ||
| لا | |||
| iOS | |||
|} | |} | ||
=== <code>canCancelContentTouches</code> === | === <code>canCancelContentTouches</code> === | ||
تمنع اللمسة المتحركة من السحب (drag) عندما تكون قيمتها true | تمنع اللمسة المتحركة من السحب (drag) عندما تكون قيمتها <code>true</code>، وهي القيمة الافتراضية. | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | ! المنصة | ||
! | |||
|- | |- | ||
| | | (bool) | ||
| لا | |||
| iOS | |||
|} | |} | ||
=== <code>centerContent</code> === | === <code>centerContent</code> === | ||
تضع المحتوى آليًا في منتصف واجهة التمرير إذا كان المحتوى أصغر من حدود واجهة التمرير إذا كانت قيمتها | تضع المحتوى آليًا في منتصف واجهة التمرير إذا كان المحتوى أصغر من حدود واجهة التمرير إذا كانت قيمتها <code>true</code>، أما إن كان المحتوى أكبر من واجهة التمرير فلا تأثير لهذه الخاصيّة، وقيمتها الافتراضية هي <code>false</code>. | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | ! المنصة | ||
! | |||
|- | |- | ||
| | | (bool) | ||
| لا | |||
| iOS | |||
|} | |} | ||
سطر 163: | سطر 160: | ||
وهي مجموعة من التنسيقات المطبّقة على محتوى واجهة التمرير، والتي تغلّف جميع واجهات المكونات الأبناء. | وهي مجموعة من التنسيقات المطبّقة على محتوى واجهة التمرير، والتي تغلّف جميع واجهات المكونات الأبناء. | ||
مثال: | |||
<syntaxhighlight class="" lang="javascript">return ( | <syntaxhighlight class="" lang="javascript">return ( | ||
<ScrollView contentContainerStyle={styles.contentContainer}> | |||
</ScrollView> | |||
); | ); | ||
... | ... | ||
سطر 176: | سطر 173: | ||
});</syntaxhighlight> | });</syntaxhighlight> | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | |||
|- | |- | ||
| | | خاصيات تنسيق الواجهة ([[ReactNative/view style props|View Style props]]) | ||
| لا | |||
|} | |} | ||
سطر 189: | سطر 185: | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | ! المنصة | ||
! | |||
|- | |- | ||
| كائن {top: number, left: number, bottom: number, right: number} | |||
| لا | |||
| iOS | |||
|} | |} | ||
=== <code>contentInsetAdjustmentBehavior</code> === | === <code>contentInsetAdjustmentBehavior</code> === | ||
تحدد طريقة استخدام منطقة الإدخال لتعديل منطقة المحتوى في واجهة | تحدد طريقة استخدام منطقة الإدخال لتعديل منطقة المحتوى في واجهة التمرير، والقيمة الافتراضية لها "<code>never</code>"، وهي متوفرة فقط على منصة iOS ذات الإصدار 11 وما بعده. | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | ! المنصة | ||
! | |||
|- | |- | ||
| | | <code>('automatic', 'scrollableAxes', 'never', 'always')</code> | ||
| لا | |||
| iOS | |||
|} | |} | ||
سطر 219: | سطر 213: | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | ! المنصة | ||
! | |||
|- | |- | ||
| PointPropType | |||
| لا | |||
| iOS | |||
|} | |} | ||
=== <code>decelerationRate</code> === | === <code>decelerationRate</code> === | ||
عبارة عن عدد عشري يحدد معدل تباطؤ التمرير بعد رفع الإصبع عن واجهة التمرير، كما يمكن استخدام اختصارات السلاسل النصية <code>normal</code> و <code>fast</code> والتي تقابل الإعدادات <code>UIScrollViewDecelerationRateNormal</code> و <code>UIScrollViewDecelerationRateFast</code> على منصة iOS. | عبارة عن عدد عشري يحدد معدل تباطؤ التمرير بعد رفع الإصبع عن واجهة التمرير، كما يمكن استخدام اختصارات السلاسل النصية <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> (الافتراضية): وتوافق القيمة 0.998 على منصّة iOS والقيمة 0.985 على منصّة Android. | ||
سطر 237: | سطر 230: | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | |||
|- | |- | ||
| قيمة ('fast', 'normal') أو عدد number | |||
| لا | |||
|} | |} | ||
=== <code>directionalLockEnabled</code> === | === <code>directionalLockEnabled</code> === | ||
تقفل التمرير العمودي أو الأفقي فقط أثناء السحب إذا كانت قيمتها true | تقفل التمرير العمودي أو الأفقي فقط أثناء السحب إذا كانت قيمتها <code>true</code>، وقيمتها الافتراضية <code>false</code>. | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | ! المنصة | ||
! | |||
|- | |- | ||
| | | (bool) | ||
| لا | |||
| iOS | |||
|} | |} | ||
=== <code>disableIntervalMomentum</code> === | === <code>disableIntervalMomentum</code> === | ||
إذا كانت قيمتها true فستوقف واجهة التمرير على الدليل (index) التالي (المتعلّق بموقع التمرير عند التحرير) بغض النظر عن سرعة الإيماءة، ويمكن | إذا كانت قيمتها <code>true</code> فستوقف واجهة التمرير على الدليل (index) التالي (المتعلّق بموقع التمرير عند التحرير) بغض النظر عن سرعة الإيماءة، ويمكن استخدامها للتصفّح الأفقي عندما يكون عرض الصفحة أصغر من عرض المكون <code>ScrollView</code>، وقيمتها الافتراضية <code>false</code>. | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | |||
|- | |- | ||
| | | (bool) | ||
| لا | |||
|} | |} | ||
=== <code>disableScrollViewPanResponder</code> === | === <code>disableScrollViewPanResponder</code> === | ||
إذا كانت قيمتها true فستلغي عمل المكوّن <code>[[ReactNative/panresponder| | إذا كانت قيمتها <code>true</code> فستلغي عمل المكوّن <code>[[ReactNative/panresponder|PanResponder]]</code> الافتراضيّ لواجهة التمرير، ويُترك التحكم الكامل للّمسات داخل واجهة التمرير للمكونات الأبناء. وهذا مفيد عمليًا عند تفعيل الخاصيّة <code>snapToInterval</code> لأنها لا تتبع أنمط اللمسات النموذجية، ويجب تجنب هذه الخاصيّة في الاستخدامات الاعتيادية لواجهة التمرير من دون الخاصيّة <code>snapToInterval</code>، لأنها قد تسبب حدوث لمسات غير متوقعة أثناء التمرير. وقيمتها الافتراضية <code>false</code>. | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | |||
|- | |- | ||
| | | (bool) | ||
| لا | |||
|} | |} | ||
=== <code>endFillColor</code> === | === <code>endFillColor</code> === | ||
تُستخدم هذه الخاصيّة لملء الفراغ المتبقي في واجهة التمرير - والذي يحدث أحيانًا نتيجة أخذ واجهة التمرير حيزًا أكبر من الذي يشغله المحتوى- بلونٍ، دون الحاجة إلى إعداد | تُستخدم هذه الخاصيّة لملء الفراغ المتبقي في واجهة التمرير - والذي يحدث أحيانًا نتيجة أخذ واجهة التمرير حيزًا أكبر من الذي يشغله المحتوى- بلونٍ، دون الحاجة إلى إعداد الخلفية، وتُعَدّ هذه الخاصيّة من التحسينات المتقدمة والتي لا تُستخدم في الحالات الاعتيادية. | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | ! المنصة | ||
! | |||
|- | |- | ||
| لون (<code>[[ReactNative/colors|color]]</code>) | |||
| لا | |||
| Android | |||
|} | |} | ||
سطر 306: | سطر 294: | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | ! القيمة الافتراضية | ||
! | ! المنصة | ||
! | |||
|- | |- | ||
| عدد (number) | |||
| لا | |||
| 0 | |||
| Android | |||
|} | |} | ||
=== <code>horizontal</code> === | === <code>horizontal</code> === | ||
إذا كانت قيمتها true فستصطفّ المكونات الأبناء لواجهة التمرير أفقيًا في سطر بدل الاصطفاف عموديًا في عمود، وقيمتها الافتراضية false. | إذا كانت قيمتها <code>true</code> فستصطفّ المكونات الأبناء لواجهة التمرير أفقيًا في سطر بدل الاصطفاف عموديًا في عمود، وقيمتها الافتراضية <code>false</code>. | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | |||
|- | |- | ||
| | | (bool) | ||
| لا | |||
|} | |} | ||
سطر 340: | سطر 326: | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | ! المنصة | ||
! | |||
|- | |- | ||
| | | ('default', 'black', 'white') | ||
| لا | |||
| iOS | |||
|} | |} | ||
=== <code>invertStickyHeaders</code> === | === <code>invertStickyHeaders</code> === | ||
تثبت هذه الخاصيّة الترويسات المثبتة (sticky headers) أسفل واجهة التمرير بدلًا من أعلاه، وتستخدم | تثبت هذه الخاصيّة الترويسات المثبتة (sticky headers) أسفل واجهة التمرير بدلًا من أعلاه، وتستخدم عادةً مع واجهة التمرير المقلوبة. | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | |||
|- | |- | ||
| | | (bool) | ||
| لا | |||
|} | |} | ||
=== <code>keyboardDismissMode</code> === | === <code>keyboardDismissMode</code> === | ||
تُستخدم لإبطال لوحة المفاتيح أثناء السحب، وقيمها: | تُستخدم لإبطال لوحة المفاتيح أثناء السحب، وقيمها كالتالي: | ||
على المنصات المتعددة (Cross platform): | * على المنصات المتعددة (Cross platform) بما فيها iOS: | ||
**<code>'none'</code> (الافتراضية): لا يلغي السحب لوحة المفاتيح. | |||
**<code>'on-drag'</code>: تلغى لوحة المفاتيح عند بدء السحب. | |||
* | * على منصّة iOS: | ||
**<code>interactive</code>: تلغى لوحة المفاتيح تفاعليًا مع السحب والحركات بالتزامن مع اللمس، وتفعّل بالسحب للأعلى. وهذه الخاصيّة غير مفعّلة على منصّة Android وتبقى كما لو أن قيمتها <code>'none'</code>. طبعًا القيم السابقة تدخل ضمن الحسبان على منصة iOS. | |||
على منصّة iOS: | |||
* <code>interactive</code>: تلغى لوحة المفاتيح تفاعليًا مع السحب والحركات بالتزامن مع اللمس، وتفعّل بالسحب للأعلى. وهذه الخاصيّة غير مفعّلة على منصّة Android وتبقى كما لو أن قيمتها 'none'. | |||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | |||
|- | |- | ||
| | | ('none', 'on-drag', 'interactive') | ||
| لا | |||
|} | |} | ||
سطر 392: | سطر 373: | ||
* <code>'always'</code>: لا تلغى لوحة المفاتيح تلقائيًا، ولن تستقبل واجهة التمرير النقر لكن المكونات الأبناء تستطيع استقباله. | * <code>'always'</code>: لا تلغى لوحة المفاتيح تلقائيًا، ولن تستقبل واجهة التمرير النقر لكن المكونات الأبناء تستطيع استقباله. | ||
* <code>'handled'</code>: لا تبطل لوحة المفاتيح تلقائيًا عندما تعالج المكونات الأبناء النقر (أو عند استقباله من قبل المكونات الأجداد). | * <code>'handled'</code>: لا تبطل لوحة المفاتيح تلقائيًا عندما تعالج المكونات الأبناء النقر (أو عند استقباله من قبل المكونات الأجداد). | ||
* <code>false</code> (مهملة): استخدم 'never' بدلًا منها. | * <code>false</code> (مهملة): استخدم <code>'never'</code> بدلًا منها. | ||
* <code>true</code> (مهملة): استخدم 'always' بدلًا منها. | * <code>true</code> (مهملة): استخدم <code>'always'</code> بدلًا منها. | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | |||
|- | |- | ||
| | | ('always', 'never', 'handled', 'false', 'true') | ||
| لا | |||
|} | |} | ||
سطر 408: | سطر 388: | ||
عند تفعيل هذه الخاصيّة فستضبط واجهة التمرير موقع التمرير بحيث لا يتغير موقع المكوّن الابن الأول والظاهر حاليًا (عند القيمة <code>minIndexForVisible</code> أو ما بعدها)، وهذا مفيد مع القوائم التي تحمّل المحتوى من كلا الاتجاهين كما هو الحال في الدردشة، حيث تمنع هذه الخاصيّة الرسائل الجديدة الواردة من إزاحة موقع التمرير، والقيمة الاعتيادية لهذه الخاصيّة هي 0، غير أنه يمكن استخدام قيم أخرى مثل 1 من أجل تجاهل تحميل المحتوى الذي قد يغيّر موقع التمرير. | عند تفعيل هذه الخاصيّة فستضبط واجهة التمرير موقع التمرير بحيث لا يتغير موقع المكوّن الابن الأول والظاهر حاليًا (عند القيمة <code>minIndexForVisible</code> أو ما بعدها)، وهذا مفيد مع القوائم التي تحمّل المحتوى من كلا الاتجاهين كما هو الحال في الدردشة، حيث تمنع هذه الخاصيّة الرسائل الجديدة الواردة من إزاحة موقع التمرير، والقيمة الاعتيادية لهذه الخاصيّة هي 0، غير أنه يمكن استخدام قيم أخرى مثل 1 من أجل تجاهل تحميل المحتوى الذي قد يغيّر موقع التمرير. | ||
يمكن استخدام القيمة الاختيارية <code>autoscrollToTopThreshold</code> لتمرير المحتوى تلقائيا للأعلى بعد ضبط موقع التمرير إذا كان المستخدم ضِمن العتبة العليا قبل الضبط، وهذا مفيد في تطبيقات الدردشة من أجل رؤية الرسائل الجديدة الواردة | يمكن استخدام القيمة الاختيارية <code>autoscrollToTopThreshold</code> لتمرير المحتوى تلقائيا للأعلى بعد ضبط موقع التمرير إذا كان المستخدم ضِمن العتبة العليا قبل الضبط، وهذا مفيد في تطبيقات الدردشة من أجل رؤية الرسائل الجديدة الواردة تلقائًّا دون الحاجة للتمرير في حال قام المستخدم بالتمرير بعيدًا عنها. | ||
'''تنبيه 1:''' قد | '''تنبيه 1:''' قد تؤدي إعادة ترتيب عناصر واجهة التمرير مع تمكين هذه الخاصيّة إلى حدوث قفزات مخلة (jumpiness)، ولا توجد نيّة حاليًا لإصلاح هذا الخلل، لذا يجب حاليًا تجنّب إعادة ترتيب محتوى أي مكوّن واجهة تمريرٍ أو قوائم تستخدم هذه الخاصيّة. | ||
'''تنبيه 2:''' تستخدم هذه الخاصيّة الخاصيتين <code>contentOffset</code> و <code>frame.origin</code> في الشفرة الأصيلة لحساب قدرة الإظهار (visibility) | '''تنبيه 2:''' تستخدم هذه الخاصيّة الخاصيتين <code>contentOffset</code> و<code>frame.origin</code> في الشفرة الأصيلة لحساب قدرة الإظهار (visibility)، كما أنه لم تؤخذ التحويلات وتعقيدات الإظهار الأخرى في الاعتبار. | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | ! المنصة | ||
! | |||
|- | |- | ||
| كائن { minIndexForVisible: number, autoscrollToTopThreshold: number } | |||
| لا | |||
| iOS | |||
|} | |} | ||
=== <code>maximumZoomScale</code> === | === <code>maximumZoomScale</code> === | ||
تحدد مقياس الرسم (scale) الأعظمي للتكبير. قيمتها الافتراضية <code>1</code>. | تحدد مقياس الرسم (scale) الأعظمي للتكبير. قيمتها الافتراضية <code>1.0</code>. | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | ! المنصة | ||
! | |||
|- | |- | ||
| عدد (number) | |||
| لا | |||
| iOS | |||
|} | |} | ||
=== <code>minimumZoomScale</code> === | === <code>minimumZoomScale</code> === | ||
تحدد مقياس الرسم (scale) الأصغر للتكبير. قيمتها الافتراضية 1.0. | تحدد مقياس الرسم (scale) الأصغر للتكبير. قيمتها الافتراضية <code>1.0</code>. | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | ! المنصة | ||
! | |||
|- | |- | ||
| عدد (number) | |||
| لا | |||
| iOS | |||
|} | |} | ||
سطر 460: | سطر 437: | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | ! المنصة | ||
! | |||
|- | |- | ||
| | | (bool) | ||
| لا | |||
| Android | |||
|} | |} | ||
=== <code>onContentSizeChange</code> === | === <code>onContentSizeChange</code> === | ||
تُستدعى عند تغيّر المحتوى الممرر في المكون | تُستدعى عند تغيّر المحتوى الممرر في المكون <code>ScrollView</code>، حيث يمرر لها عرض المحتوى وارتفاعه على شكل معاملين: <code>contentWidth</code> و<code>contentHeight</code>. | ||
صُممت باستخدام المعالج onLayout المرتبط بحاوية المحتوى الذي يظهره ScrollView. | صُممت باستخدام المعالج <code>onLayout</code> المرتبط بحاوية المحتوى الذي يظهره <code>ScrollView</code>. | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | |||
|- | |- | ||
| دالة (function) | |||
| لا | |||
|} | |} | ||
=== <code>onMomentumScrollBegin</code> === | === <code>onMomentumScrollBegin</code> === | ||
تُستدعى عند بدء التمرير الزخم (momentum) | تُستدعى عند بدء التمرير الزخم (momentum)، حين يبدأ <code>ScrollView</code> بالانزلاق. | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | |||
|- | |- | ||
| دالة (function) | |||
| لا | |||
|} | |} | ||
=== <code>onMomentumScrollEnd</code> === | === <code>onMomentumScrollEnd</code> === | ||
تُستدعى هذه الدالة عند انتهاء التمرير الزخم (حين يتوقف ScrollView عن الانزلاق). | تُستدعى هذه الدالة عند انتهاء التمرير الزخم (حين يتوقف <code>ScrollView</code> عن الانزلاق). | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | |||
|- | |- | ||
| دالة (function) | |||
| لا | |||
|} | |} | ||
=== <code>onScroll</code> === | === <code>onScroll</code> === | ||
تُطلق مرة واحدة على الأكثر لكل إطار (frame) أثناء | تُطلق مرة واحدة على الأكثر لكل إطار (frame) أثناء التمرير، ويمكن التحكم بتردد الأحداث عن طريق الخاصيّة <code>scrollEventThrottle</code>، ولهذه الأحداث الشكل التالي (جميع القيم أعداد): | ||
<syntaxhighlight class="">{ | <syntaxhighlight class="" lang="javascript">{ | ||
nativeEvent: { | nativeEvent: { | ||
contentInset: {bottom, left, right, top}, | contentInset: {bottom, left, right, top}, | ||
سطر 525: | سطر 498: | ||
}</syntaxhighlight> | }</syntaxhighlight> | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | |||
|- | |- | ||
| دالة (function) | |||
| لا | |||
|} | |} | ||
=== <code>onScrollBeginDrag</code> === | === <code>onScrollBeginDrag</code> === | ||
تُستدعى عندما يبدأ المستخدم بسحب واجهة التمرير. | تُستدعى عندما يبدأ المستخدم بسحب واجهة التمرير (scroll view). | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | |||
|- | |- | ||
| دالة (function) | |||
| لا | |||
|} | |} | ||
سطر 551: | سطر 522: | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | |||
|- | |- | ||
| دالة (function) | |||
| لا | |||
|} | |} | ||
سطر 564: | سطر 534: | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | ! المنصة | ||
! | |||
|- | |- | ||
| دالة (function) | |||
| لا | |||
| iOS | |||
|} | |} | ||
=== <code>overScrollMode</code> === | === <code>overScrollMode</code> === | ||
تُستخدم لتعديل القيمة الافتراضية لوضع التمرير الإضافي (overScroll) | تُستخدم لتعديل القيمة الافتراضية لوضع التمرير الإضافي (overScroll)، وقيمها: | ||
* <code>'auto'</code> (الافتراضية): تسمح للمستخدم بالتمرير الإضافي لهذه الواجهة فقط إذا كان كان حجم المحتوى كبيرًا | * <code>'auto'</code> (الافتراضية): تسمح للمستخدم بالتمرير الإضافي لهذه الواجهة فقط إذا كان كان حجم المحتوى كبيرًا كفايةً لهذا النوع من التمرير. | ||
* <code>'always'</code>: تسمح للمستخدم بالتمرير الإضافي لهذه الواجهة دائمًا. | * <code>'always'</code>: تسمح للمستخدم بالتمرير الإضافي لهذه الواجهة دائمًا. | ||
* <code>'never'</code>: لا تسمح للمستخدم بالتمرير الإضافي لهذه الواجهة. | * <code>'never'</code>: لا تسمح للمستخدم بالتمرير الإضافي لهذه الواجهة. | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | ! المنصة | ||
! | |||
|- | |- | ||
| | | ('auto', 'always', 'never') | ||
| لا | |||
| Android | |||
|} | |} | ||
=== <code>pagingEnabled</code> === | === <code>pagingEnabled</code> === | ||
ستتوقف واجهة التمرير عند مضاعفات حجمها فقط عندما تكون قيمة هذه الخاصيّة | ستتوقف واجهة التمرير عند مضاعفات حجمها فقط عندما تكون قيمة هذه الخاصيّة <code>true</code>، ويمكن استخدامها للتصفح الأفقي، وقيمتها الافتراضية <code>false</code>. | ||
'''ملاحظة:''' لا تدعم منصة Android التصفح العموديّ. | '''ملاحظة:''' لا تدعم منصة Android التصفح العموديّ. | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | |||
|- | |- | ||
| | | (bool) | ||
| لا | |||
|} | |} | ||
=== <code>persistentScrollbar</code> === | === <code>persistentScrollbar</code> === | ||
لا تسمح لأشرطة التمرير بأن تكون شفافة عند عدم استخدامها، وقيمتها الافتراضية false. | لا تسمح لأشرطة التمرير بأن تكون شفافة عند عدم استخدامها، وقيمتها الافتراضية <code>false</code>. | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | ! المنصة | ||
! | |||
|- | |- | ||
| | | (bool) | ||
| لا | |||
| Android | |||
|} | |} | ||
=== <code>pinchGestureEnabled</code> === | === <code>pinchGestureEnabled</code> === | ||
تسمح باستخدام إيماءات القَرص (pinch gestures) للتكبير والتصغير في واجهة التمرير عندما تكون قيمتها true (وهي القيمة الافتراضية). | تسمح باستخدام إيماءات القَرص (pinch gestures) للتكبير والتصغير في واجهة التمرير عندما تكون قيمتها <code>true</code> (وهي القيمة الافتراضية). | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | ! المنصة | ||
! | |||
|- | |- | ||
| | | (bool) | ||
| لا | |||
| iOS | |||
|} | |} | ||
=== <code>refreshControl</code> === | === <code>refreshControl</code> === | ||
يُستخدم لتأمين وظيفة التحديث بالسحب (pull-to-refresh) لواجهة التمرير، ويعمل مع واجهة التمرير العمودية فقط (يجب أن يكون للخاصيّة <code>horizontal</code> القيمة <code>false</code>). ولمزيد من المعلومات حول هذا المكوّن يمكن الإطلاع على [ | يُستخدم لتأمين وظيفة التحديث بالسحب (pull-to-refresh) لواجهة التمرير، ويعمل مع واجهة التمرير العمودية فقط (يجب أن يكون للخاصيّة <code>horizontal</code> القيمة <code>false</code>). ولمزيد من المعلومات حول هذا المكوّن يمكن الإطلاع على <code>[[ReactNative/refreshcontrol|RefreshControl]]</code>. | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | |||
|- | |- | ||
| عنصر (element) | |||
| لا | |||
|} | |} | ||
=== <code>removeClippedSubviews</code> === | === <code>removeClippedSubviews</code> === | ||
'''تجريبي:''' | '''تجريبي:''' تُزال الواجهات الأبناء (التي يكون فيها للخاصيّة <code>overflow</code> القيمة <code>hidden</code>) التي تقع خارج الشاشة من الواجهة الرئيسية (superview) عندما تكون القيمة <code>true</code>، مما يحسّن أداء التمرير في القوائم الطويلة. القيمة الافتراضية <code>false</code>. | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | |||
|- | |- | ||
| | | (bool) | ||
| لا | |||
|} | |} | ||
=== <code>scrollEnabled</code> === | ===<code>scrollEnabled</code>=== | ||
لا يمكن تمرير الواجهة باللمس عندما تكون قيمتها | لا يمكن تمرير الواجهة باللمس عندما تكون قيمتها <code>false</code>، والقيمة الافتراضية <code>true</code>. | ||
'''ملاحظة:''' يمكن تمرير الواجهة دائمًا باستدعاء <code>scrollTo</code>. | '''ملاحظة:''' يمكن تمرير الواجهة دائمًا باستدعاء <code>scrollTo</code>. | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | |||
|- | |- | ||
| | | (bool) | ||
| لا | |||
|} | |} | ||
=== <code>scrollEventThrottle</code> === | === <code>scrollEventThrottle</code> === | ||
تتحكم بعدد مرات إطلاق أحداث التمرير أثناء التمرير (الفاصل الزمنيّ بالميلي ثانية)، وكلما كانت قيمتها أصغر | تتحكم بعدد مرات إطلاق أحداث التمرير أثناء التمرير (الفاصل الزمنيّ بالميلي ثانية)، وكلما كانت قيمتها أصغر زادت دقة الشفرة البرمجية في تعقّب موقع التمرير، غير أن هذا قد يسبب مشاكل في الأداء بسبب كمّ المعلومات المرسل عبر الجسر، ولا يلاحظ الفرق عند تغيير القيم ضمن المجال 1- 16 بسبب تزامن حلقة JS مع معدل تحديث الشاشة، لذا يُفضّل وضع قيمةٍ كبيرةٍ لهذه الخاصيّة عند عدم الحاجة للتعقب الدقيق لتعقب التمرير، وذلك لتقليل كمية المعلومات المرسلة عبر الجسر. | ||
القيمة الافتراضية لهذه الخاصيّة هي الصفر 0 والذي يعني إرسال حدث التمرير مرةً واحدةً فقط في كل مرةٍ تمرَّر فيها الواجهة. | |||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | ! المنصة | ||
! | |||
|- | |- | ||
| عدد (number) | |||
| لا | |||
| iOS | |||
|} | |} | ||
=== <code>scrollIndicatorInsets</code> === | === <code>scrollIndicatorInsets</code> === | ||
تحدد مقدار دخول مؤشرات واجهة التمرير من أطرافه، و تُضبط قيمتها عادةً | تحدد مقدار دخول مؤشرات واجهة التمرير من أطرافه، و تُضبط قيمتها عادةً بما يماثل قيمة الخاصيّة <code>contentInset</code>، وقيمتها الافتراضية هي <code>{0, 0, 0, 0}</code>. | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | ! المنصة | ||
! | |||
|- | |- | ||
| | | {top: number, left: number, bottom: number, right: number} | ||
| لا | |||
| iOS | |||
|} | |} | ||
سطر 732: | سطر 676: | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | ! المنصة | ||
! | |||
|- | |- | ||
| سلسلة نصية (string) | |||
| لا | |||
| Android | |||
|} | |} | ||
=== <code>scrollToOverflowEnabled</code> === | === <code>scrollToOverflowEnabled</code> === | ||
يمكن برمجيًا تمرير واجهة التمرير إلى خارج حدود حجم محتواه عندما تكون قيمتها true | يمكن برمجيًا تمرير واجهة التمرير إلى خارج حدود حجم محتواه عندما تكون قيمتها <code>true</code>، وقيمتها الافتراضية <code>false</code>. | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | ! المنصة | ||
! | |||
|- | |- | ||
| | | (bool) | ||
| لا | |||
| iOS | |||
|} | |} | ||
=== <code>scrollsToTop</code> === | === <code>scrollsToTop</code> === | ||
يمرَّر واجهة التمرير للأعلى عند نقر شريط الحالة عندما تكون قيمتها | يمرَّر واجهة التمرير للأعلى عند نقر شريط الحالة عندما تكون قيمتها <code>true</code>، وهي القيمة الافتراضية. | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | ! المنصة | ||
! | |||
|- | |- | ||
| | | (bool) | ||
| لا | |||
| iOS | |||
|} | |} | ||
=== <code>showsHorizontalScrollIndicator</code> === | ===<code>showsHorizontalScrollIndicator</code>=== | ||
تُظهر مؤشر التمرير الأفقي عندما تكون قيمتها true | تُظهر مؤشر التمرير الأفقي عندما تكون قيمتها <code>true</code>، وهي قيمتها الافتراضية. | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | |||
|- | |- | ||
| | | (bool) | ||
| لا | |||
|} | |} | ||
=== <code>showsVerticalScrollIndicator</code> === | === <code>showsVerticalScrollIndicator</code> === | ||
تُظهر مؤشر التمرير العموديّ عندما تكون قيمتها true | تُظهر مؤشر التمرير العموديّ عندما تكون قيمتها <code>true</code>، وهي قيمتها الافتراضية. | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | |||
|- | |- | ||
| | | (bool) | ||
| لا | |||
|} | |} | ||
=== <code>snapToAlignment</code> === | === <code>snapToAlignment</code> === | ||
تحدد هذه الخاصيّة علاقة الانجذاب (snapping) إلى واجهة التمرير في حال كانت الخاصيّة <code>snapToInterval</code> | تحدد هذه الخاصيّة علاقة الانجذاب (snapping) إلى واجهة التمرير في حال كانت الخاصيّة <code>snapToInterval</code> مفعّلة، ولها القيم التالية: | ||
* <code>'start'</code> (الافتراضية): يكون الانجذاب حذاء اليسار في التمرير الأفقي، وحذاء الأعلى في التمرير العمودي. | * <code>'start'</code> (الافتراضية): يكون الانجذاب حذاء اليسار في التمرير الأفقي، وحذاء الأعلى في التمرير العمودي. | ||
سطر 822: | سطر 746: | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | ! المنصة | ||
! | |||
|- | |- | ||
| | | ('start', 'center', 'end') | ||
| لا | |||
| iOS | |||
|} | |} | ||
=== <code>snapToEnd</code> === | === <code>snapToEnd</code> === | ||
تعمل بالتعاون مع الخاصيّة <code>snapToOffsets</code>، حيث تعدّ نهاية القائمة إزاحةً للانجذاب عندما تكون قيمتها true (القيمة الافتراضية)، ولتعطيل هذا السلوك يجب ضبطها بالقيمة false للسماح بالتمرير بحريّةٍ بين نهاية القائمة وآخر إزاحةٍ مضبوطةٍ في الخاصيّة <code>snapToOffsets</code>. | تعمل بالتعاون مع الخاصيّة <code>snapToOffsets</code>، حيث تعدّ نهاية القائمة إزاحةً للانجذاب عندما تكون قيمتها <code>true</code> (القيمة الافتراضية)، ولتعطيل هذا السلوك يجب ضبطها بالقيمة <code>false</code> للسماح بالتمرير بحريّةٍ بين نهاية القائمة وآخر إزاحةٍ مضبوطةٍ في الخاصيّة <code>snapToOffsets</code>. | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | |||
|- | |- | ||
| | | (bool) | ||
| لا | |||
|} | |} | ||
=== <code>snapToInterval</code> === | === <code>snapToInterval</code> === | ||
تسمح بإيقاف واجهة التمرير على مضاعفات قيمتها، لذا تُستخدم للتصفح عبر المكونات الأبناء التي طولها أصغر من واجهة التمرير، وتُستخدم نموذجيًا مع الخاصيتين <code>snapToAlignment</code> و <code>decelerationRate="fast"</code>، وتلغي الخاصيّة <code>pagingEnabled</code> الأقل قابليةً للضبط. | تسمح بإيقاف واجهة التمرير على مضاعفات قيمتها، لذا تُستخدم للتصفح عبر المكونات الأبناء التي طولها أصغر من واجهة التمرير، وتُستخدم نموذجيًا مع الخاصيتين <code>snapToAlignment</code> و <code>decelerationRate="fast"</code>، وتلغي الخاصيّة <code>pagingEnabled</code> الأقل قابليةً للضبط. | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | |||
|- | |- | ||
| عدد (number) | |||
| لا | |||
|} | |} | ||
=== <code>snapToOffsets</code> === | === <code>snapToOffsets</code> === | ||
تعمل هذه الخاصيّة على إيقاف واجهة التمرير على الإزاحات المحددة، لذا تُستخدم للتصفح عبر المكونات الأبناء مختلفة الأحجام والتي طولها أصغر من واجهة التمرير. وتُستخدم نموذجيًا مع الخاصيّة <code>decelerationRate="fast"</code> | تعمل هذه الخاصيّة على إيقاف واجهة التمرير على الإزاحات المحددة، لذا تُستخدم للتصفح عبر المكونات الأبناء مختلفة الأحجام والتي طولها أصغر من واجهة التمرير. وتُستخدم نموذجيًا مع الخاصيّة <code>decelerationRate="fast"</code>، وتلغي الخاصيتين <code>pagingEnabled</code> و<code>snapToInterval</code> ذات قابلية الضبط الأقلّ. | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | |||
|- | |- | ||
| مصفوفة من الأعداد | |||
| لا | |||
|} | |} | ||
=== <code>snapToStart</code> === | === <code>snapToStart</code> === | ||
تعمل بالتعاون مع الخاصيّة <code>snapToOffsets</code>، حيث تعدّ بداية القائمة إزاحةً للانجذاب عندما تكون قيمتها true (القيمة الافتراضية)، ولتعطيل هذا السلوك يجب ضبطها بالقيمة false للسماح بالتمرير بحريّة بين بداية القائمة وأول إزاحةٍ مضبوطةٍ في الخاصيّة <code>snapToOffsets</code>. | تعمل بالتعاون مع الخاصيّة <code>snapToOffsets</code>، حيث تعدّ بداية القائمة إزاحةً للانجذاب عندما تكون قيمتها <code>true</code> (القيمة الافتراضية)، ولتعطيل هذا السلوك يجب ضبطها بالقيمة <code>false</code> للسماح بالتمرير بحريّة بين بداية القائمة وأول إزاحةٍ مضبوطةٍ في الخاصيّة <code>snapToOffsets</code>. | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | |||
|- | |- | ||
| | | (bool) | ||
| لا | |||
|} | |} | ||
=== <code>stickyHeaderIndices</code> === | === <code>stickyHeaderIndices</code> === | ||
مصفوفةٌ من أدلة المكونات الأبناء التي ستثبَّت بأعلى الشاشة عند التمرير، حيث يؤدي تمرير القيمة <code>stickyHeaderIndices={[0 | مصفوفةٌ من أدلة المكونات الأبناء التي ستثبَّت بأعلى الشاشة عند التمرير، حيث يؤدي تمرير القيمة <code>{[stickyHeaderIndices={[0</code> إلى تثبيت الابن الأول في أعلى واجهة التمرير، كما يمكن استخدام الإحداثيات [x,y,z] لتثبيت عدة عناصر عند وصولها لأعلى الشاشة، ولا تعمل هذه الخاصيّة مع الخاصيّة <code>{horizontal={true</code>. | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | |||
|- | |- | ||
| مصفوفة من الأعداد | |||
| لا | |||
|} | |} | ||
=== <code>zoomScale</code> === | === <code>zoomScale</code> === | ||
تحدد مقياس الرسم لواجهة التمرير الحالية، وقيمتها الافتراضية 1.0. | تحدد مقياس الرسم لواجهة التمرير الحالية، وقيمتها الافتراضية <code>1.0</code>. | ||
{| class="wikitable" | {| class="wikitable" | ||
! النوع | |||
! | ! مطلوب | ||
! | ! المنصة | ||
! | |||
|- | |- | ||
| عدد (number) | |||
| لا | |||
| iOS | |||
|} | |} | ||
== التوابع == | == التوابع == | ||
=== <code> | === <code>()flashScrollIndicators</code> === | ||
<syntaxhighlight lang="javascript">flashScrollIndicators();</syntaxhighlight> | <syntaxhighlight lang="javascript">flashScrollIndicators();</syntaxhighlight> | ||
يُظهر مؤشرات التمرير لحظيًا. | يُظهر مؤشرات التمرير لحظيًا. | ||
=== <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, | |||
deprecatedAnimated?: boolean, | |||
);</syntaxhighlight> | );</syntaxhighlight> | ||
يقوم بالتمرير نحو الإزاحة المعطاة (x,y) بحركةٍ سريعةٍ أو سلسةٍ. | يقوم بالتمرير نحو الإزاحة المعطاة (x,y) بحركةٍ سريعةٍ أو سلسةٍ. | ||
مثال: | |||
<syntaxhighlight class="" lang="javascript">scrollTo({x: 0, y: 0, animated: true})</syntaxhighlight> | <syntaxhighlight class="" lang="javascript">scrollTo({x: 0, y: 0, animated: true})</syntaxhighlight> | ||
''' | '''تنبيه:''' لهذا التابع توقيع (signature) غريبٌ لأنّه صُمم لدعم المنصات القديمة، حيث يقبل معاملاتٍ منفصلةً كبديلٍ عن كائن الخيارات، لذا يهمَل هذا الكائن منعًا للالتباس (مثل قيمة y قبل x) لذا '''لا يجب أن يُستعمَل'''. | ||
=== <code> | === <code>()scrollToEnd</code> === | ||
<syntaxhighlight lang="javascript">scrollToEnd(([options]: { animated: boolean, duration: number }));</syntaxhighlight> | <syntaxhighlight lang="javascript">scrollToEnd(([options]: { animated: boolean, duration: number }));</syntaxhighlight> | ||
يقوم بالتمرير للأسفل عندما تكون واجهة التمرير عموديةً، ولليمين عندما تكون أفقيةً، وله الخيار <code>scrollToEnd({animated: true | يقوم بالتمرير للأسفل عندما تكون واجهة التمرير عموديةً، ولليمين عندما تكون أفقيةً، وله الخيار <code>({scrollToEnd({animated: true</code> للتمرير السلس وهو الإفتراضي، والخيار <code>{(scrollToEnd({animated: false</code> للتمرير السريع، ويمكن على منصة Android إضافة المدة الزمنية للتمرير <code>({scrollToEnd({duration: 500</code>، وتكون القيمة الافتراضية للخيار <code>animated</code> هي <code>true</code> عند عدم تمرير أي خيار لهذا لتابع. | ||
== مصادر == | == مصادر == | ||
* [https:// | * [https://reactnative.dev/docs/scrollview صفحة scrollView في توثيق React Native الرسميّ] | ||
[[تصنيف:ReactNative]] | |||
[[تصنيف:React Native Component]] |
المراجعة الحالية بتاريخ 14:02، 9 أكتوبر 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, StatusBar } from 'react-native';
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
reprehenderit 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,
paddingTop: StatusBar.currentHeight,
},
scrollView: {
backgroundColor: 'pink',
marginHorizontal: 20,
},
text: {
fontSize: 42,
},
});
export default App;
الخاصيات
موروثة من الخاصيّات View
.
StickyHeaderComponent
مكون React سيستخدم لتصيير ترويسات مثبة (sticky headers) ويجب أن يستخدم مع stickyHeaderIndices
، وستحتاج إلى تعيين هذ المكون إذا كانت الترويسة المثبتة تستعمل تحويلات مخصصة مثل أن تريد أن تملك قائمةً تحريكات مخصصة مع ترويسة قابلة للاختفاء. إن لم يعطى هذا المكون، فسيُستعمَل المكون ScrollViewStickyHeader
بدلًا منه افتراضيًا.
النوع |
---|
مكون، عنصر |
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 (
<ScrollView contentContainerStyle={styles.contentContainer}>
</ScrollView>
);
...
const styles = StyleSheet.create({
contentContainer: {
paddingVertical: 20
}
});
النوع | مطلوب |
---|---|
خاصيات تنسيق الواجهة (View Style props) | لا |
contentInset
تحدد مقدار بعد المحتوى عن حواف واجهة التمرير وقيمتها الافتراضية {top: 0, left: 0, bottom: 0, right: 0}
.
النوع | مطلوب | المنصة |
---|---|---|
كائن {top: number, left: number, bottom: number, right: number} | لا | iOS |
contentInsetAdjustmentBehavior
تحدد طريقة استخدام منطقة الإدخال لتعديل منطقة المحتوى في واجهة التمرير، والقيمة الافتراضية لها "never
"، وهي متوفرة فقط على منصة iOS ذات الإصدار 11 وما بعده.
النوع | مطلوب | المنصة |
---|---|---|
('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.
النوع | مطلوب |
---|---|
قيمة ('fast', 'normal') أو عدد number | لا |
directionalLockEnabled
تقفل التمرير العمودي أو الأفقي فقط أثناء السحب إذا كانت قيمتها true
، وقيمتها الافتراضية false
.
النوع | مطلوب | المنصة |
---|---|---|
(bool) | لا | iOS |
disableIntervalMomentum
إذا كانت قيمتها true
فستوقف واجهة التمرير على الدليل (index) التالي (المتعلّق بموقع التمرير عند التحرير) بغض النظر عن سرعة الإيماءة، ويمكن استخدامها للتصفّح الأفقي عندما يكون عرض الصفحة أصغر من عرض المكون ScrollView
، وقيمتها الافتراضية false
.
النوع | مطلوب |
---|---|
(bool) | لا |
disableScrollViewPanResponder
إذا كانت قيمتها true
فستلغي عمل المكوّن PanResponder
الافتراضيّ لواجهة التمرير، ويُترك التحكم الكامل للّمسات داخل واجهة التمرير للمكونات الأبناء. وهذا مفيد عمليًا عند تفعيل الخاصيّة snapToInterval
لأنها لا تتبع أنمط اللمسات النموذجية، ويجب تجنب هذه الخاصيّة في الاستخدامات الاعتيادية لواجهة التمرير من دون الخاصيّة snapToInterval
، لأنها قد تسبب حدوث لمسات غير متوقعة أثناء التمرير. وقيمتها الافتراضية false
.
النوع | مطلوب |
---|---|
(bool) | لا |
endFillColor
تُستخدم هذه الخاصيّة لملء الفراغ المتبقي في واجهة التمرير - والذي يحدث أحيانًا نتيجة أخذ واجهة التمرير حيزًا أكبر من الذي يشغله المحتوى- بلونٍ، دون الحاجة إلى إعداد الخلفية، وتُعَدّ هذه الخاصيّة من التحسينات المتقدمة والتي لا تُستخدم في الحالات الاعتيادية.
النوع | مطلوب | المنصة |
---|---|---|
لون (color )
|
لا | Android |
fadingEdgeLength
تُستخدم لتلاشي (Fade) حواف محتوى التمرير، فإذا كانت قيمتها أكبر من الصفر فستتلاشى الحواف وفقًا لاتجاه ومكان التمرير الحالي، للدلالة فيما إذا كان هنالك مزيد من المحتوى لإظهاره.
النوع | مطلوب | القيمة الافتراضية | المنصة |
---|---|---|---|
عدد (number) | لا | 0 | Android |
horizontal
إذا كانت قيمتها true
فستصطفّ المكونات الأبناء لواجهة التمرير أفقيًا في سطر بدل الاصطفاف عموديًا في عمود، وقيمتها الافتراضية false
.
النوع | مطلوب |
---|---|
(bool) | لا |
indicatorStyle
تُستخدم لتنسيق مؤشر التمرير، وقيمها:
'default'
(الافتراضية): نفسblack
.'black'
: يكون المؤشر أسودًا، ويستخدم مع الخلفيات الفاتحة.'white'
: يكون المؤشر أبيضًا، ويستخدم مع الخلفيات الداكنة.
النوع | مطلوب | المنصة |
---|---|---|
('default', 'black', 'white') | لا | iOS |
invertStickyHeaders
تثبت هذه الخاصيّة الترويسات المثبتة (sticky headers) أسفل واجهة التمرير بدلًا من أعلاه، وتستخدم عادةً مع واجهة التمرير المقلوبة.
النوع | مطلوب |
---|---|
(bool) | لا |
keyboardDismissMode
تُستخدم لإبطال لوحة المفاتيح أثناء السحب، وقيمها كالتالي:
- على المنصات المتعددة (Cross platform) بما فيها iOS:
'none'
(الافتراضية): لا يلغي السحب لوحة المفاتيح.'on-drag'
: تلغى لوحة المفاتيح عند بدء السحب.
- على منصّة iOS:
interactive
: تلغى لوحة المفاتيح تفاعليًا مع السحب والحركات بالتزامن مع اللمس، وتفعّل بالسحب للأعلى. وهذه الخاصيّة غير مفعّلة على منصّة Android وتبقى كما لو أن قيمتها'none'
. طبعًا القيم السابقة تدخل ضمن الحسبان على منصة iOS.
النوع | مطلوب |
---|---|
('none', 'on-drag', 'interactive') | لا |
keyboardShouldPersistTaps
تحدد بقاء لوحة المفاتيح مرئيّةً بعد النقر (tap)، وقيمها:
'never'
(الافتراضية): تلغى لوحة المفاتيح عند النقر خارج إطار النص المركّز ولوحة المفاتيح قيد التشغيل. ولن تستقبل المكونات الأبناء لواجهة التمرير النقر عند حدوث ذلك.'always'
: لا تلغى لوحة المفاتيح تلقائيًا، ولن تستقبل واجهة التمرير النقر لكن المكونات الأبناء تستطيع استقباله.'handled'
: لا تبطل لوحة المفاتيح تلقائيًا عندما تعالج المكونات الأبناء النقر (أو عند استقباله من قبل المكونات الأجداد).false
(مهملة): استخدم'never'
بدلًا منها.true
(مهملة): استخدم'always'
بدلًا منها.
النوع | مطلوب |
---|---|
('always', 'never', 'handled', 'false', 'true') | لا |
maintainVisibleContentPosition
عند تفعيل هذه الخاصيّة فستضبط واجهة التمرير موقع التمرير بحيث لا يتغير موقع المكوّن الابن الأول والظاهر حاليًا (عند القيمة minIndexForVisible
أو ما بعدها)، وهذا مفيد مع القوائم التي تحمّل المحتوى من كلا الاتجاهين كما هو الحال في الدردشة، حيث تمنع هذه الخاصيّة الرسائل الجديدة الواردة من إزاحة موقع التمرير، والقيمة الاعتيادية لهذه الخاصيّة هي 0، غير أنه يمكن استخدام قيم أخرى مثل 1 من أجل تجاهل تحميل المحتوى الذي قد يغيّر موقع التمرير.
يمكن استخدام القيمة الاختيارية autoscrollToTopThreshold
لتمرير المحتوى تلقائيا للأعلى بعد ضبط موقع التمرير إذا كان المستخدم ضِمن العتبة العليا قبل الضبط، وهذا مفيد في تطبيقات الدردشة من أجل رؤية الرسائل الجديدة الواردة تلقائًّا دون الحاجة للتمرير في حال قام المستخدم بالتمرير بعيدًا عنها.
تنبيه 1: قد تؤدي إعادة ترتيب عناصر واجهة التمرير مع تمكين هذه الخاصيّة إلى حدوث قفزات مخلة (jumpiness)، ولا توجد نيّة حاليًا لإصلاح هذا الخلل، لذا يجب حاليًا تجنّب إعادة ترتيب محتوى أي مكوّن واجهة تمريرٍ أو قوائم تستخدم هذه الخاصيّة.
تنبيه 2: تستخدم هذه الخاصيّة الخاصيتين contentOffset
وframe.origin
في الشفرة الأصيلة لحساب قدرة الإظهار (visibility)، كما أنه لم تؤخذ التحويلات وتعقيدات الإظهار الأخرى في الاعتبار.
النوع | مطلوب | المنصة |
---|---|---|
كائن { minIndexForVisible: number, autoscrollToTopThreshold: number } | لا | iOS |
maximumZoomScale
تحدد مقياس الرسم (scale) الأعظمي للتكبير. قيمتها الافتراضية 1.0
.
النوع | مطلوب | المنصة |
---|---|---|
عدد (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
تُستدعى عندما يبدأ المستخدم بسحب واجهة التمرير (scroll view).
النوع | مطلوب |
---|---|
دالة (function) | لا |
onScrollEndDrag
تُستدعى عند توقف المستخدم عن سحب واجهة التمرير، وكذلك عندما تتوقف واجهة التمرير أو تبدأ بالانزلاق.
النوع | مطلوب |
---|---|
دالة (function) | لا |
onScrollToTop
تُطلق عند تمرير واجهة التمرير للأعلى بعد نقر شريط الحالة.
النوع | مطلوب | المنصة |
---|---|---|
دالة (function) | لا | iOS |
overScrollMode
تُستخدم لتعديل القيمة الافتراضية لوضع التمرير الإضافي (overScroll)، وقيمها:
'auto'
(الافتراضية): تسمح للمستخدم بالتمرير الإضافي لهذه الواجهة فقط إذا كان كان حجم المحتوى كبيرًا كفايةً لهذا النوع من التمرير.'always'
: تسمح للمستخدم بالتمرير الإضافي لهذه الواجهة دائمًا.'never'
: لا تسمح للمستخدم بالتمرير الإضافي لهذه الواجهة.
النوع | مطلوب | المنصة |
---|---|---|
('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
، مما يحسّن أداء التمرير في القوائم الطويلة. القيمة الافتراضية false
.
النوع | مطلوب |
---|---|
(bool) | لا |
scrollEnabled
لا يمكن تمرير الواجهة باللمس عندما تكون قيمتها false
، والقيمة الافتراضية true
.
ملاحظة: يمكن تمرير الواجهة دائمًا باستدعاء scrollTo
.
النوع | مطلوب |
---|---|
(bool) | لا |
scrollEventThrottle
تتحكم بعدد مرات إطلاق أحداث التمرير أثناء التمرير (الفاصل الزمنيّ بالميلي ثانية)، وكلما كانت قيمتها أصغر زادت دقة الشفرة البرمجية في تعقّب موقع التمرير، غير أن هذا قد يسبب مشاكل في الأداء بسبب كمّ المعلومات المرسل عبر الجسر، ولا يلاحظ الفرق عند تغيير القيم ضمن المجال 1- 16 بسبب تزامن حلقة JS مع معدل تحديث الشاشة، لذا يُفضّل وضع قيمةٍ كبيرةٍ لهذه الخاصيّة عند عدم الحاجة للتعقب الدقيق لتعقب التمرير، وذلك لتقليل كمية المعلومات المرسلة عبر الجسر.
القيمة الافتراضية لهذه الخاصيّة هي الصفر 0 والذي يعني إرسال حدث التمرير مرةً واحدةً فقط في كل مرةٍ تمرَّر فيها الواجهة.
النوع | مطلوب | المنصة |
---|---|---|
عدد (number) | لا | iOS |
scrollIndicatorInsets
تحدد مقدار دخول مؤشرات واجهة التمرير من أطرافه، و تُضبط قيمتها عادةً بما يماثل قيمة الخاصيّة contentInset
، وقيمتها الافتراضية هي {0, 0, 0, 0}
.
النوع | مطلوب | المنصة |
---|---|---|
{top: number, left: number, bottom: number, right: number} | لا | iOS |
scrollEventThrottle
هي وسمٌ (tag) يُستخدم لتسجيل أداء واجهة التمرير الحالي، حيث يشغّل الأحداث الزخمة (يمكن مراجعة sendMomentumEvents)، ليس لهذه الخاصيّة وظيفة أخرى، لذا نحتاج إلى تصميم مُنصتٍ FpsListener
أصيلٍ للاستفادة منها.
النوع | مطلوب | المنصة |
---|---|---|
سلسلة نصية (string) | لا | Android |
scrollToOverflowEnabled
يمكن برمجيًا تمرير واجهة التمرير إلى خارج حدود حجم محتواه عندما تكون قيمتها true
، وقيمتها الافتراضية false
.
النوع | مطلوب | المنصة |
---|---|---|
(bool) | لا | iOS |
scrollsToTop
يمرَّر واجهة التمرير للأعلى عند نقر شريط الحالة عندما تكون قيمتها true
، وهي القيمة الافتراضية.
النوع | مطلوب | المنصة |
---|---|---|
(bool) | لا | iOS |
showsHorizontalScrollIndicator
تُظهر مؤشر التمرير الأفقي عندما تكون قيمتها true
، وهي قيمتها الافتراضية.
النوع | مطلوب |
---|---|
(bool) | لا |
showsVerticalScrollIndicator
تُظهر مؤشر التمرير العموديّ عندما تكون قيمتها true
، وهي قيمتها الافتراضية.
النوع | مطلوب |
---|---|
(bool) | لا |
snapToAlignment
تحدد هذه الخاصيّة علاقة الانجذاب (snapping) إلى واجهة التمرير في حال كانت الخاصيّة snapToInterval
مفعّلة، ولها القيم التالية:
'start'
(الافتراضية): يكون الانجذاب حذاء اليسار في التمرير الأفقي، وحذاء الأعلى في التمرير العمودي.'center'
: يكون الانجذاب حذاء المنتصف.'end'
: يكون الانجذاب حذاء اليمين في التمرير الأفقي، وحذاء الأسفل في التمرير العمودي.
النوع | مطلوب | المنصة |
---|---|---|
('start', 'center', 'end') | لا | iOS |
snapToEnd
تعمل بالتعاون مع الخاصيّة snapToOffsets
، حيث تعدّ نهاية القائمة إزاحةً للانجذاب عندما تكون قيمتها true
(القيمة الافتراضية)، ولتعطيل هذا السلوك يجب ضبطها بالقيمة false
للسماح بالتمرير بحريّةٍ بين نهاية القائمة وآخر إزاحةٍ مضبوطةٍ في الخاصيّة snapToOffsets
.
النوع | مطلوب |
---|---|
(bool) | لا |
snapToInterval
تسمح بإيقاف واجهة التمرير على مضاعفات قيمتها، لذا تُستخدم للتصفح عبر المكونات الأبناء التي طولها أصغر من واجهة التمرير، وتُستخدم نموذجيًا مع الخاصيتين snapToAlignment
و decelerationRate="fast"
، وتلغي الخاصيّة pagingEnabled
الأقل قابليةً للضبط.
النوع | مطلوب |
---|---|
عدد (number) | لا |
snapToOffsets
تعمل هذه الخاصيّة على إيقاف واجهة التمرير على الإزاحات المحددة، لذا تُستخدم للتصفح عبر المكونات الأبناء مختلفة الأحجام والتي طولها أصغر من واجهة التمرير. وتُستخدم نموذجيًا مع الخاصيّة decelerationRate="fast"
، وتلغي الخاصيتين pagingEnabled
وsnapToInterval
ذات قابلية الضبط الأقلّ.
النوع | مطلوب |
---|---|
مصفوفة من الأعداد | لا |
snapToStart
تعمل بالتعاون مع الخاصيّة snapToOffsets
، حيث تعدّ بداية القائمة إزاحةً للانجذاب عندما تكون قيمتها true
(القيمة الافتراضية)، ولتعطيل هذا السلوك يجب ضبطها بالقيمة false
للسماح بالتمرير بحريّة بين بداية القائمة وأول إزاحةٍ مضبوطةٍ في الخاصيّة snapToOffsets
.
النوع | مطلوب |
---|---|
(bool) | لا |
stickyHeaderIndices
مصفوفةٌ من أدلة المكونات الأبناء التي ستثبَّت بأعلى الشاشة عند التمرير، حيث يؤدي تمرير القيمة {[stickyHeaderIndices={[0
إلى تثبيت الابن الأول في أعلى واجهة التمرير، كما يمكن استخدام الإحداثيات [x,y,z] لتثبيت عدة عناصر عند وصولها لأعلى الشاشة، ولا تعمل هذه الخاصيّة مع الخاصيّة {horizontal={true
.
النوع | مطلوب |
---|---|
مصفوفة من الأعداد | لا |
zoomScale
تحدد مقياس الرسم لواجهة التمرير الحالية، وقيمتها الافتراضية 1.0
.
النوع | مطلوب | المنصة |
---|---|---|
عدد (number) | لا | iOS |
التوابع
()flashScrollIndicators
flashScrollIndicators();
يُظهر مؤشرات التمرير لحظيًا.
()scrollTo
scrollTo(
options?: {x?: number, y?: number, animated?: boolean} | number,
deprecatedX?: number,
deprecatedAnimated?: boolean,
);
يقوم بالتمرير نحو الإزاحة المعطاة (x,y) بحركةٍ سريعةٍ أو سلسةٍ.
مثال:
scrollTo({x: 0, y: 0, animated: true})
تنبيه: لهذا التابع توقيع (signature) غريبٌ لأنّه صُمم لدعم المنصات القديمة، حيث يقبل معاملاتٍ منفصلةً كبديلٍ عن كائن الخيارات، لذا يهمَل هذا الكائن منعًا للالتباس (مثل قيمة y قبل x) لذا لا يجب أن يُستعمَل.
()scrollToEnd
scrollToEnd(([options]: { animated: boolean, duration: number }));
يقوم بالتمرير للأسفل عندما تكون واجهة التمرير عموديةً، ولليمين عندما تكون أفقيةً، وله الخيار ({scrollToEnd({animated: true
للتمرير السلس وهو الإفتراضي، والخيار {(scrollToEnd({animated: false
للتمرير السريع، ويمكن على منصة Android إضافة المدة الزمنية للتمرير ({scrollToEnd({duration: 500
، وتكون القيمة الافتراضية للخيار animated
هي true
عند عدم تمرير أي خيار لهذا لتابع.