ReactNative/scrollview

ScrollView

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

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

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

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

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

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

مثال

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;

الخاصيّات (Props)

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

alwaysBounceHorizontal

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

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

alwaysBounceVertical

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

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

automaticallyAdjustContentInset

تجعل منصّة iOS تتحكم آليًا بإدخال (inset) المحتوى من أجل عروض التمرير المتواجدة خلف شريط التنقل أو شريط الأدوات. وقيمتها الافتراضية true.

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

bounces

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

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

bouncesZoom

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

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

canCancelContentTouches

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

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

centerContent

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

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

contentContainerStyle

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

مثال:

return (
  <ScrollView contentContainerStyle={styles.contentContainer}>
  </ScrollView>
);
...
const styles = StyleSheet.create({
  contentContainer: {
    paddingVertical: 20
  }
});

النوع	مطلوب
تنسيقات StyleSheetPropType(View Style props)	لا