ReactNative/scrollview

ScrollView

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

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

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

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

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

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

مثال

```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;
```