عرض مصدر ReactNative/scrollview

<noinclude>{{DISPLAYTITLE:ScrollView في React Native}}</noinclude>
هو عبارة عن مكوّن يغلّف المنصة ScrollView لتأمين التكامل مع منظومة مستجيب "responder" تعليق اللمس (touch locking).

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

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

'''متى يُستخدم المكوّن  <code>[[ReactNative/flatlist|FlatList]]</code> بدل المكوّن <code><ScrollView></code>:'''

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

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

== مثال ==
<syntaxhighlight lang="javascript">
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
          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,
    marginTop: Constants.statusBarHeight,
  },
  scrollView: {
    backgroundColor: 'pink',
    marginHorizontal: 20,
  },
  text: {
    fontSize: 42,
  },
});

export default App;

</syntaxhighlight>

== الخاصيّات (Props) ==
موروثة من خاصيّات المكوّن <code>[[ReactNative/view#.D8.A7.D9.84.D8.AE.D8.A7.D8.B5.D9.8A.D8.A7.D8.AA|View]]</code>.

=== <code>alwaysBounceHorizontal</code> ===
قيمتها الافتراضية <code>horizontal={true}</code> حيث تجعل عرض التمرير يرتد (bounce) أفقيًا عند وصوله للنهاية حتى ولو كان المحتوى أصغر من عرض التمرير نفسه.
{| class="wikitable"
!النوع
!مطلوب   
!المنصة   
|-
|قيمة منطقية (bool)
|لا
|iOS
|}

=== <code>alwaysBounceVertical</code> ===
قيمتها الافتراضية <code>vertical={true}</code> حيث تجعل عرض التمرير يرتد (bounce) عموديًا عند وصوله للنهاية حتى ولو كان المحتوى أصغر من عرض التمرير نفسه.
{| class="wikitable"
!النوع
!مطلوب   
!المنصة   
|-
|قيمة منطقية (bool)
|لا
|iOS
|}

=== <code>automaticallyAdjustContentInset</code> ===
تجعل منصّة iOS تتحكم آليًا بإدخال (inset) المحتوى من أجل عروض التمرير المتواجدة خلف شريط التنقل أو شريط الأدوات. وقيمتها الافتراضية <code>true</code>.
{| class="wikitable"
!النوع
!مطلوب   
!المنصة   
|-
|قيمة منطقية (bool)
|لا
|iOS
|}

=== <code>bounces</code> ===
قيمتها الافتراضية <code>true</code> حيث تجعل عرض التمرير يرتد عند وصوله لنهاية  المحتوى إن كان أكبر من عرض التمرير وفق محور التمرير. أما في حال كانت قيمتها <code>false</code> فإنها تلغي جميع أنواع الارتداد حتى لو كانت الخاصيات <code>*alwaysBounce</code> مفعّلة.
{| class="wikitable"
!النوع
!مطلوب   
!المنصة   
|-
|قيمة منطقية (bool)
|لا
|iOS
|}

=== <code>bouncesZoom</code> ===
قيمتها الافتراضية <code>true</code> حيث تتيح استخدام الإيماءات (gestures) لتجاوز الحد الأدنى والأقصى للتكبير، ويعود التكبير إلى حدوده الافتراضية بعد انتهاء الإيماءة.
{| class="wikitable"
!النوع
!مطلوب   
!المنصة   
|-
|قيمة منطقية (bool)
|لا
|iOS
|}

=== <code>canCancelContentTouches</code> ===
إذا كانت قيمتها <code>false</code> فإنها تمنع اللمسة المتحركة من السحب (drag). وقيمتها الافتراضية <code>true</code>.
{| class="wikitable"
!النوع
!مطلوب   
!المنصة   
|-
|قيمة منطقية (bool)
|لا
|iOS
|}

=== <code>centerContent</code> ===
إذا كانت قيمتها <code>true</code> فإنها تضع المحتوى آليًا في منتصف عرض التمرير إن كان المحتوى أصغر من حدود عرض التمرير، أما إن كان المحتوى أكبر من عرض التمرير فلا تأثير لهذه الخاصيّة. وقيمتها الافتراضية <code>false</code>.
{| class="wikitable"
!النوع
!مطلوب   
!المنصة   
|-
|قيمة منطقية (bool)
|لا
|iOS
|}

=== <code>contentContainerStyle</code> ===
وهي مجموعة من التنسيقات المطبّقة على محتوى عرض التمرير، والتي تغلّف جميع عروض المكونات الأبناء.

'''مثال:'''<syntaxhighlight lang="javascript">
return (
  <ScrollView contentContainerStyle={styles.contentContainer}>
  </ScrollView>
);
...
const styles = StyleSheet.create({
  contentContainer: {
    paddingVertical: 20
  }
});
</syntaxhighlight>
{| class="wikitable"
!النوع
!مطلوب   
|-
|تنسيقات StyleSheetPropType(View Style props)
|لا
|}

=== <code>contentInset</code> ===
تحدد مقدار دخول المحتوى من حواف عرض التمرير، وقيمتها الافتراضية <code>{top: 0، left: 0، bottom: 0، right: 0}</code>.
{| class="wikitable"
!النوع
!مطلوب
!المنصة
|-
|كائن (<code>object: {top: number, left: number, bottom: number, right: number}</code>)
|لا
|iOS
|}

=== <code>contentInsetAdjustmentBehavior</code> ===
تحدد هذه الخاصيّة طريقة استخدام منطقة الإدخال لتعديل منطقة المحتوى في عرض التمرير. والقيمة الافتراضية لها <code>never</code>، ومتوفرة فقط على منصة iOS إصدار 11 وما فوق.
{| class="wikitable"
!النوع
!مطلوب
!المنصة
|-
|قيمة اسمية (<code>enum('automatic', 'scrollableAxes', 'never', 'always')</code>)
|لا
|iOS
|}

=== <code>contentOffset</code> ===
تُستخدم لتحديد إزاحة بداية التمرير يدويًا، والقيمة الافتراضية لها <code>{x: 0، y: 0}</code>.
{| class="wikitable"
!النوع
!مطلوب
!المنصة
|-
|PointPropType 
|لا
|iOS
|}

=== <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>fast</code> - وتوافق القيمة 0.99 على منصّة iOS والقيمة 0.9 على منصّة Android. 

{| class="wikitable"
!النوع
!مطلوب
|-
|قيمة اسمية، عدد (<code>enum('fast', 'normal')</code> ،number)
|لا
|}

=== <code>directionalLockEnabled</code> ===
إذا كانت قيمتها <code>true</code> فإنها تسمح بالتمرير وفق الاتجاه العمودي أو الأفقي فقط أثناء السحب. وقيمتها الافتراضية <code>false</code>.
{| class="wikitable"
!النوع
!مطلوب
!المنصة
|-
|قيمة منطقية (bool)
|لا
|iOS
|}

===<code>disableIntervalMomentum</code>===
إذا كانت قيمتها <code>true</code> فإنها توقف عرض التمرير على الدليل (index) التالي (المتعلّق بموقع التمرير عند التحرير) بغض النظر عن سرعة الإيماءة. ويمكن أن تُستخدم للتصفّح الأفقي عندما يكون عرض الصفحة أصغر من عرض ScrollView. وقيمتها الافتراضية <code>false</code>.
{| class="wikitable"
!النوع
!مطلوب
|-
|قيمة منطقية (bool)
|لا
|}

===<code>disableScrollViewPanResponder</code>===
إذا كانت قيمتها <code>true</code> فإنها تلغي عمل المكوّن <code>[[ReactNative/panresponder|PanResponder]]</code> الافتراضي لعرض التمرير، ويُترك التحكم الكامل للّمسات داخل عرض التمرير للمكونات الأبناء. وهذا مفيد عمليًا عندما تكون الخاصيّة <code>snapToInterval</code> مفعّلة كونها لا تتبع أنمط اللمسات النموذجية. يجب تجنب هذه الخاصيّة في الاستخدامات الاعتيادية لعرض التمرير من دون الخاصيّة <code>snapToInterval</code>، لأنها قد تسبب حدوث لمسات غير متوقعة أثناء التمرير. وقيمتها الافتراضية <code>false</code>. 
{| class="wikitable"
!النوع
!مطلوب
|-
|قيمة منطقية (bool)
|لا
|}

===<code>endFillColor</code>===
تُستخدم هذه الخاصيّة لملء الفراغ المتبقي في عرض التمرير والذي يحدث أحيانًا نتيجة أخذ عرض التمرير لحيز أكبر من الذي يشغله المحتوى، حيث تسمح هذه الخاصيّة بتجنب إعداد الخلفية. وتعد هذه الخاصيّة من التحسينات المتقدمة والتي لا تُستخدم في الحالات الاعتيادية.  
{| class="wikitable"
!النوع
!مطلوب
!المنصة
|-
|لون (<code>[[ReactNative/colors|color]]</code>)
|لا
|iOS
|}

===<code>fadingEdgeLength</code>===
تُستخدم لتلاشي (Fade) حواف المحتوى الممرر. فإذا كانت قيمتها أكبر من الصفر، فإن تلاشي الحواف سيكون وفقًا لاتجاه ومكان التمرير الحالي للدلالة فيما إذا كان هنالك مزيدًا من المحتوى لإظهاره.
{| class="wikitable"
!النوع
!مطلوب
!القيمة الافتراضية
!المنصة
|-
|عدد (number)
|لا
|0  
|Android 
|}

===<code>horizontal</code>===
إذا كانت قيمتها <code>true</code> فإن المكونات الأبناء لعرض التمرير ستصطف أفقيًا في سطر بدل الاصطفاف عموديًا في عمود، وقيمتها الافتراضية <code>false</code>. 
{| class="wikitable"
!النوع
!مطلوب
|-
|قيمة منطقية (bool)
|لا
|}

=== <code>indicatorStyle</code> ===
تُستخدم لتنسيق مؤشر التمرير، وقيمها: 

* <code>default</code> (الافتراضية) - نفس <code>black</code>. 
* <code>black</code> - يكون المؤشر أسود ويُستخدم مع الخلفيات الفاتحة.  
* <code>white</code> - يكون المؤشر أبيض ويُستخدم مع الخلفيات الداكنة. 

{| class="wikitable"
!النوع
!مطلوب
!المنصة
|-
|قيمة اسمية (<code>enum('default', 'black', 'white')‎</code>)
|لا
|iOS
|}

===<code>invertStickyHeaders</code>===
تجعل هذه الخاصيّة الترويسات الدبقة (sticky headers) تلتصق في أسفل عرض التمرير بدل الالتصاق في الأعلى، وعادة ما تُستخدم مع عرض التمرير المقلوب. 
{| class="wikitable"
!النوع
!مطلوب
|-
|قيمة منطقية (bool)
|لا
|}

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

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

* <code>none</code> (الافتراضية) - لا يبطل السحب لوحة المفاتيح. 
* <code>on-drag</code> - تبطل لوحة المفاتيح عند بدء السحب. 

على منصّة iOS:

* <code>interactive</code> - تبطل لوحة المفاتيح تفاعليًا مع السحب والحركات بالتزامن مع اللمس، وتفعّل بالسحب للأعلى. وهذه الخاصيّة غير مفعّلة على منصّة Android وتبقى كما لو أن قيمتها <code>none</code>.

{| class="wikitable"
!النوع
!مطلوب
|-
|قيمة اسمية (<code>enum('none', 'on-drag', 'interactive')‎</code>)
|لا
|}

=== <code>keyboardShouldPersistTaps</code> ===
تحدد فيما إذا كانت لوحة المفاتيح ستبقى ظاهرة بعد النقر (tap)، وقيمها:

* <code>never</code> (الافتراضية) - إن النقر خارج إطار النص المركّز ولوحة المفاتيح مرفوعة، يؤدي إلى إبطالها. ولن تستقبل المكونات الأبناء لعرض التمرير النقر عند حدوث ذلك.
* <code>always</code> - لا تبطل لوحة المفاتيح تلقائيًا، ولن يستقبل عرض التمرير النقر لكن المكونات الأبناء تستطيع استقباله.

* <code>handled</code> - لا تبطل لوحة المفاتيح تلقائيًا عند معالجة النقر من قبل المكونات الأبناء لعرض التمرير (أو عند استقباله من قبل المكونات الأجداد). 
* <code>false</code> (مهملة) - استخدم <code>never</code> بدلًا منها. 
* <code>true</code> (مهملة) - استخدم <code>always</code> بدلًا منها. 

{| class="wikitable"
!النوع
!مطلوب
|-
|قيمة اسمية (<code>enum('always', 'never', 'handled', false, true)‎</code>)
|لا
|}

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

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

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

'''تنبيه 2:''' تَستخدم هذه الخاصيّة الخاصيتين <code>contentOffset</code> و <code>frame.origin</code> في الشفرة الأصيلة لحساب قدرة الإظهار (visibility). كما أنه لم يؤخذ في الاعتبار التحويلات وتعقيدات الإظهار الأخرى.
{| class="wikitable"
!النوع
!مطلوب
!المنصة
|-
|كائن (<code>object: { minIndexForVisible: number, autoscrollToTopThreshold: number }‎</code>)
|لا
|iOS
|}

===<code>maximumZoomScale</code>===
تحدد مقياس الرسم (scale) الأعظمي للتكبير. قيمتها الافتراضية <code>1.0</code>.
{| class="wikitable"
!النوع
!مطلوب
!المنصة
|-
|عدد (number)
|لا
|iOS
|}

===<code>minimumZoomScale</code>===
تحدد مقياس الرسم (scale) الأصغري للتكبير. قيمتها الافتراضية <code>1.0</code>.
{| class="wikitable"
!النوع
!مطلوب
!المنصة
|-
|عدد (number)
|لا
|iOS
|}

===<code>nestedScrollEnabled</code>===
تمكّن من التمرير المتداخل (nested)، ومدعومة على واجهات منصة Android البرمجية من المستوى 21+. كما أنها مدعومة افتراضيًا على منصّة iOS.
{| class="wikitable"
!النوع
!مطلوب
!المنصة
|-
|قيمة منطقية (bool)
|لا
|Android
|}

===<code>onContentSizeChange</code>===
تُستدعى هذه الدالة عند تغيّر المحتوى الممرر في ScrollView، حيث يمرر لهذه الدالة عرض وارتفاع المحتوى على شكل معاملين: <code>contentWidth</code> و <code>contentHeight</code>.

صُممت هذه الدالة باستخدام المعالج <code>onLayout</code> والمرتبط بحاوية المحتوى الذي يظهره ScrollView.
{| class="wikitable"
!النوع
!مطلوب
|-
|دالة (function)
|لا
|}

=== <code>onMomentumScrollBegin</code> ===
تُستدعى هذه الدالة عند بدء زخم (momentum) التمرير (حين يبدأ ScrollView بالانزلاق).
{| class="wikitable"
!النوع
!مطلوب
|-
|دالة (function)
|لا
|}

=== <code>onMomentumScrollEnd</code> ===
تُستدعى هذه الدالة عند انتهاء زخم التمرير(حين يتوقف ScrollView عن الانزلاق).
{| class="wikitable"
!النوع
!مطلوب
|-
|دالة (function)
|لا
|}

=== <code>onScroll</code> ===
تُطلق مرة واحدة على الأكثر لكل إطار (frame) أثناء التمرير. ويمكن التحكم بتردد الأحداث عن طريق الخاصيّة <code>scrollEventThrottle</code>، ولهذه الأحداث الشكل التالي (جميع القيم أعداد):<syntaxhighlight lang="javascript">
{
  nativeEvent: {
    contentInset: {bottom, left, right, top},
    contentOffset: {x, y},
    contentSize: {height, width},
    layoutMeasurement: {height, width},
    zoomScale
  }
}
</syntaxhighlight>
{| class="wikitable"
!النوع
!مطلوب
|-
|دالة (function)
|لا
|}

=== <code>onScrollBeginDrag</code> ===
تُستدعى هذه الدالة عند بدء المستخدم بسحب عرض التمرير.
{| class="wikitable"
!النوع
!مطلوب
|-
|دالة (function)
|لا
|}

=== <code>onScrollEndDrag</code> ===
تُستدعى هذه الدالة عند توقف المستخدم عن سحب عرض التمرير، وكذلك عندما يتوقف عرض التمرير أو يبدأ بالانزلاق.
{| class="wikitable"
!النوع
!مطلوب
|-
|دالة (function)
|لا
|}

=== <code>onScrollToTop</code> ===
تُطلق عند تمرير عرض التمرير للأعلى بعد أن نُقر شريط الحالة.
{| class="wikitable"
!النوع
!مطلوب
!المنصة
|-
|دالة (function)
|لا
|iOS
|}

===<code>overScrollMode</code>===
تُستخدم لتعديل القيمة الافتراضية لوضع التمرير الإضافي (overScroll)، وقيمها:

* <code>auto</code> (الافتراضية) - تسمح للمستخدم بالتمرير الإضافي لهذا العرض فقط في حال كان حجم المحتوى كبير بشكل كافي لهذا النوع من التمرير. 
* <code>always</code> - تسمح دائمًا للمستخدم بالتمرير الإضافي لهذا العرض. 

* <code>never</code> - لا تسمح للمستخدم بالتمرير الإضافي لهذا العرض. 

{| class="wikitable"
!النوع
!مطلوب
!المنصة
|-
|قيمة اسمية (<code>enum('auto', 'always', 'never')</code>)
|لا
|Android
|}

=== <code>pagingEnabled</code> ===
عندما تكون قيمة هذه الخاصيّة <code>true</code> فإن عرض التمرير يتوقف عند مضاعفات حجمه، حيث يمكن استخدام هذه الخاصيّة من أجل التصفح الأفقي. وقيمتها الافتراضية <code>false</code>.

'''ملاحظة:''' التصفح العمودي غير مدعوم على منصة Android.
{| class="wikitable"
!النوع
!مطلوب
|-
|قيمة منطقية (bool)
|لا
|}

===<code>persistentScrollbar</code>===
لا تسمح لأشرطة التمرير بأن تعود شفافة بعد الانتهاء منها. وقيمتها الافتراضية <code>false</code>.
{| class="wikitable"
!النوع
!مطلوب
!المنصة
|-
|قيمة منطقية (bool)
|لا
|Android
|}

===<code>pinchGestureEnabled</code>===
عندما تكون قيمتها <code>true</code> (الافتراضية) فإنها تسمح باستخدام إيماءات القَرص (pinch gestures) للتكبير والتصغير في عرض التمرير. 
{| class="wikitable"
!النوع
!مطلوب
!المنصة
|-
|قيمة منطقية (bool)
|لا
|iOS
|}

===<code>refreshControl</code>===
يُستخدم هذا المكوّن لتأمين وظيفة التحديث بالسحب (pull-to-refresh) لعرض التمرير، ويعمل مع عرض التمرير العمودي فقط (يجب أن تكون الخاصيّة <code>horizontal</code> بالقيمة <code>false</code>). ولمزيد من المعلومات حول هذا المكوّن يمكن الإطلاع على <code>[[ReactNative/refreshcontrol|RefreshControl]]</code>.
{| class="wikitable"
!النوع
!مطلوب
|-
|عنصر (element)
|لا
|}

===<code>removeClippedSubviews</code>===
'''تجريبي:''' عندما تكون القيمة <code>true</code> فإن عروض المكونات الأبناء (التي تكون فيها الخاصيّة <code>overflow</code> بالقيمة <code>hidden</code>) التي خارج الشاشة، تُزال من العرض الرئيسي (superview)، مما يحسّن من أداء التمرير في القوائم الطويلة. 
{| class="wikitable"
!النوع
!مطلوب
|-
|قيمة منطقية (bool)
|لا
|}

===<code>scrollBarThumbImage</code>===
يمكن بشكل اختياري استخدام صورة كأيقونة لشريط التمرير، وهذا بدوره يلغي اللون عند وجود الصورة، غير أنه يبقى اللون أثناء تحميل الصورة أو عند فشل التحميل. كما يمكن إلغاء اللون أثناء تحميل الصورة بجعل قيمة المعامل <code>alpha</code> الخاص باللون مساوية للصفر.
* <code>uri</code> - سلسلة نصيّة تمثل معرّف مصدر الصورة، والذي هو عبارة عن مسار الملف المحلّي للصورة أو اسم مصدر الصورة الثابت (static). 
* <code>number</code> - نوع مبهم (Opaque) معاد من قبل شيء ما مثل <code>import IMAGE from './image.jpg'‎</code>.

{| class="wikitable"
!النوع
!مطلوب
!المنصة
|-
|عدد (number)
|لا
|VR
|}

===<code>scrollEnabled</code>===
عندما تكون قيمتها <code>false</code> فإنه لا يمكن تمرير العرض باللمس. والقيمة الافتراضية <code>true</code>. 

'''ملاحظة:''' يمكن تمرير العرض دائما باستدعاء <code>scrollTo</code>.
{| class="wikitable"
!النوع
!مطلوب
|-
|قيمة منطقية (bool)
|لا
|}

===<code>scrollEventThrottle</code>===
تتحكم بعدد مرات إطلاق أحداث التمرير أثناء التمرير (الفاصل الزمني بالميلي ثانية). وكلما كانت قيمتها أصغر كلما زادت دقة الشفرة البرمجية في تعقّب موقع التمرير، غير أن هذا قد يسبب مشاكل في الأداء بسبب كم المعلومات المرسل عبر الجسر، كما أنه لا يلاحظ الفرق عند تغيير القيم ضمن المجال 1- 16 بسبب تزامن حلقة JS مع معدل تحديث الشاشة. لذا يُفضّل عند عدم الحاجة للتعقّب الدقيق للتمرير، وضع قيمة كبيرة لهذه الخاصيّة وذلك للتقليل من كمية المعلومات المرسلة عبر الجسر. إن القيمة الافتراضية لهذه الخاصيّة هي الصفر والذي يعني أن حدث التمرير يُرسل مرة واحدة فقط في كل مرة يمرر فيها العرض.
{| class="wikitable"
!النوع
!مطلوب
!المنصة
|-
|عدد (number)
|لا
|iOS
|}

===<code>scrollIndicatorInsets</code>===
تحدد مقدار دخول مؤشرات عرض التمرير من أطرافه، وعادة ما تُضبط قيمة هذه الخاصيّة بشكل مماثل لقيمة الخاصيّة <code>contentInset</code>. وقيمتها الافتراضية <code>{0، 0، 0، 0}</code>.
{| class="wikitable"
!النوع
!مطلوب
!المنصة
|-
|كائن (<code>object: {top: number, left: number, bottom: number, right: number}‎</code>)
|لا
|iOS
|}

===<code>scrollEventThrottle</code>===
هي عبارة عن وسم (tag) يُستخدم لتسجيل أداء عرض التمرير الحالي، حيث يشغّل أحداث الزخم (الخاصيّة <code>sendMomentumEvents</code>). ليس لهذه الخاصيّة وظيفة أخرى، لذا نحتاج إلى تصميم مُنصت <code>FpsListener</code> أصيل للاستفادة من هذه الخاصيّة.
{| class="wikitable"
!النوع
!مطلوب
!المنصة
|-
|سلسلة نصية (string)
|لا
|Android
|}

===<code>scrollToOverflowEnabled</code>===
عندما تكون قيمتها <code>true</code> فإنه يمكن برمجيًا تمرير عرض التمرير إلى خارج حدود حجم محتواه. وقيمته الافتراضية <code>false</code>.
{| class="wikitable"
!النوع
!مطلوب
!المنصة
|-
|قيمة منطقية (bool)
|لا
|iOS
|}

===<code>scrollsToTop</code>===
عندما تكون قيمتها <code>true</code> فإن عرض التمرير يمرَّر للأعلى عند نقر شريط الحالة. وقيمتها الافتراضية <code>true</code>.
{| class="wikitable"
!النوع
!مطلوب
!المنصة
|-
|قيمة منطقية (bool)
|لا
|iOS
|}

===<code>sendUpdatedChildFrames</code>===
'''مهملة:''' عندما تكون قيمتها <code>true</code> فإن عرض التمرير يرسل بيانات <code>updateChildFrames</code> في أحداث التمرير. أوجدت لدعم الإصدارات القديمة، وستُستخدم <code>onLayout</code> بدلًا منها لجلب بيانات الإطار. وقيمتها الافتراضية <code>false</code>.
{| class="wikitable"
!النوع
!مطلوب
!المنصة
|-
|قيمة منطقية (bool)
|لا
|iOS
|}

===<code>showsHorizontalScrollIndicator</code>===
عندما تكون قيمتها <code>true</code> فإنها تُظهر مؤشر التمرير الأفقي. وقيمتها الافتراضية <code>true</code>.
{| class="wikitable"
!النوع
!مطلوب
|-
|قيمة منطقية (bool)
|لا
|}

===<code>showsVerticalScrollIndicator</code>===


عندما تكون قيمتها <code>true</code> فإنها تُظهر مؤشر التمرير العمودي. وقيمتها الافتراضية <code>true</code>.
{| class="wikitable"
!النوع
!مطلوب
|-
|قيمة منطقية (bool)
|لا
|}

===<code>snapToAlignment</code>===
تحدد هذه الخاصيّة علاقة الانجذاب (snapping) بعرض التمرير في حال كانت الخاصيّة <code>snapToInterval</code> مفعّلة. ولها القيم التالية:
* <code>start</code> (الافتراضية)- تحاذي الانجذاب لليسار في التمرير الأفقي، وللأعلى في التمرير العمودي.
* <code>center</code> - تحاذي الانجذاب للمنتصف. 

* <code>end</code> - تحاذي الانجذاب لليمين في التمرير الأفقي، وللأسفل في التمرير العمودي.

{| class="wikitable"
!النوع
!مطلوب
!المنصة
|-
|قيمة اسمية (<code>enum('start', 'center', 'end')</code>)
|لا
|iOS
|}

===<code>snapToEnd</code>===
تعمل بالتعاون مع الخاصيّة <code>snapToOffsets</code>. حيث تعدّ نهاية القائمة كإزاحة للانجذاب عندما تكون قيمتها <code>true</code> (القيمة الافتراضية)، ولتعطيل هذا السلوك يجب ضبطها بالقيمة <code>false</code> للسماح بالتمرير بحريّة بين نهاية القائمة وآخر إزاحة مضبوطة في الخاصيّة <code>snapToOffsets</code>.
{| class="wikitable"
!النوع
!مطلوب
|-
|قيمة منطقية (bool)
|لا
|}

=== <code>snapToInterval</code> ===
تسمح هذه الخاصيّة بإيقاف عرض التمرير على مضاعفات قيمتها، لذا تُستخدم للتصفح عبر المكونات الأبناء التي طولها أصغر من عرض التمرير. وتُستخدم نموذجيًا مع الخاصيتين <code>snapToAlignment</code> و <code>decelerationRate="fast"</code>، وتلغي الخاصيّة <code>pagingEnabled</code> الأقل قابلية للضبط.  
{| class="wikitable"
!النوع
!مطلوب
|-
|عدد (number)
|لا
|}

=== <code>snapToOffsets</code> ===
تعمل هذه الخاصيّة على إيقاف عرض التمرير على الإزاحات المحددة، لذا تُستخدم للتصفح عبر المكونات الأبناء مختلفة الأحجام والتي طولها أصغر من عرض التمرير. وتُستخدم نموذجيًا مع الخاصيّة  <code>decelerationRate="fast"</code>، وتلغي الخاصيتين <code>pagingEnabled</code> و <code>snapToInterval</code> الأقل قابلية للضبط.  
{| class="wikitable"
!النوع
!مطلوب
|-
|مصفوفة عددية (array of number) 
|لا
|}

=== <code>snapToStart</code> ===
تعمل بالتعاون مع الخاصيّة <code>snapToOffsets</code>. حيث تعدّ بداية القائمة كإزاحة للانجذاب عندما تكون قيمتها <code>true</code> (القيمة الافتراضية)، ولتعطيل هذا السلوك يجب ضبطها بالقيمة <code>false</code> للسماح بالتمرير بحريّة بين بداية القائمة وأول إزاحة مضبوطة في الخاصيّة <code>snapToOffsets</code>.
{| class="wikitable"
!النوع
!مطلوب
|-
|قيمة منطقية (bool)
|لا
|}

=== <code>stickyHeaderIndices</code> ===
عبارة عن مصفوفة من أدلة المكونات الأبناء التي ستثبَّت بأعلى الشاشة عند التمرير، حيث يؤدي تمرير القيمة <code>stickyHeaderIndices={[0]}‎</code> إلى تثبيت الابن الأول بأعلى عرض التمرير. كما يمكن استخدام الإحداثيات <code>[x,y,z]</code> لجعل عدة عناصر دبقة (sticky) عند وصولها لأعلى الشاشة. لا تعمل هذه الخاصيّة مع الخاصيّة <code>horizontal={true}‎</code>.  
{| class="wikitable"
!النوع
!مطلوب
|-
|مصفوفة عددية (array of number) 
|لا
|}

=== <code>zoomScale</code> ===
تحدد مقياس الرسم لعرض التمرير الحالي، وقيمتها الافتراضية <code>1</code>.
{| class="wikitable"
!النوع
!مطلوب
!المنصة
|-
|عدد (number)
|لا
|iOS
|}

== التوابع (Methods) ==

=== <code>()flashScrollIndicators</code> ===
<syntaxhighlight lang="javascript">
flashScrollIndicators();
</syntaxhighlight>يُظهر مؤشرات التمرير لحظيًا.

=== <code>()scrollTo</code> ===
<syntaxhighlight lang="javascript">
scrollTo(
  options?: {x?: number, y?: number, animated?: boolean} | number,
  deprecatedX?: number,
    deprecatedAnimated?: boolean,
);

</syntaxhighlight>يمرر نحو الإزاحة المعطاة (x,y) بحركة سريعة أو سلسة.

'''مثال:'''<syntaxhighlight lang="javascript">
scrollTo({x: 0, y: 0, animated: true})
</syntaxhighlight>'''ملاحظة:''' لهذا التابع توقيع (signature) غريب لكونه صُمم لدعم المنصات القديمة، حيث يقبل معاملات منفصلة كبديل عن كائن الخيارات، لذا فإن هذا الكائن مهمل لمنع الالتباس.

=== <code>()scrollToEnd</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>
<blockquote>'''''مهمل:''' استخدم التابع <code>scrollTo</code> بدلا منه.</blockquote>

== مصادر ==

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