عرض مصدر ReactNative/using a scrollview

<noinclude>{{DISPLAYTITLE:استخدام المكوّن ScrollView في React Native}}</noinclude>واجهة التمرير <code>[[ReactNative/scrollview|ScrollView]]</code> هي حاويةُ تمريرٍ (scrolling container) تحوي عدّة مكوناتٍ وواجهات أخرى ([[ReactNative/view|views]]). ليس من الضروري أن تكون العناصر متجانسة، ويمكن أن يكون التمرير عموديًا وأفقيًا في الوقت نفسه (عن طريق تعيين الخاصية ‎<code>horizontal</code>‎).

يُنشئ هذا المثال مكون <code>ScrollView</code> عموديًّا بصورٍ ونصوصٍ مختلطةٍ مع بعضها البعض ([https://snack.expo.dev/@hsoubwiki/using-scrollview تجربة حية]):

<syntaxhighlight lang="javascript">
import React from 'react';
import { Image, ScrollView, Text } from 'react-native';

const logo = {
  uri: 'https://reactnative.dev/img/tiny_logo.png',
  width: 64,
  height: 64
};

const App = () => (
  <ScrollView>
    <Text style={{ fontSize: 96 }}>Scroll me plz</Text>
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Text style={{ fontSize: 96 }}>If you like</Text>
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Text style={{ fontSize: 96 }}>Scrolling down</Text>
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Text style={{ fontSize: 96 }}>What's the best</Text>
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Text style={{ fontSize: 96 }}>Framework around?</Text>
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Text style={{ fontSize: 80 }}>React Native</Text>
  </ScrollView>
);

export default App;
</syntaxhighlight>

يمكن ضبط واجهة التمرير ‎<code>[[ReactNative/scrollview|ScrollView‎]]</code> للسماح بالانتقال عبر الواجهات بإيماءات السحب (swiping gestures) باستخدام الخاصيّة ‎<code>pagingEnabled</code>‎، كما يمكن الحصول على إمكانيّة التمرير الأفقيّ بين الواجهات على Android باستخدام المكوّن ‎<code>ViewPager</code>‎.

يمكن في منصة iOS استخدامُ مكوّن واجهة التمرير <code>ScrollView</code> مع عنصر واحد للسماح للمستخدم بتكبير المحتوى، كل ما عليك فعله هو ضبط الحد الأقصى لمقياس التكبير بالخاصيّة ‎<code>maximumZoomScale</code>‎ والحد الأدنى له بالخاصيّة ‎<code>minimumZoomScale</code>‎ وسيتمكن مستخدم التطبيق من التكبير والتصغير عبر إيماءتي التوسعة (expand) والضغط (pinch).

المكوّن <code>ScrollView</code> فعّالٌ لعرض بيانات قليلة ذات حجم محدود. إذ تُصيَّر جميع العناصر والواجهات الموجودة داخله حتى لو لم تكن ظاهرة حاليًا على الشاشة، ويجب عليك استخدام المكوّن <code>[[ReactNative/flatlist|FlatList]]</code> بدلاً منه إن كنت ترغب بعرض قائمةٍ طويلةٍ من العناصر تتخطّى ما يمكن احتواؤه على الشاشة. لذا لنتعرف على طرق [[ReactNative/using a listview|عرض القوائم]] بفعاليّة وأداء أفضل.

== مصادر ==
* [https://facebook.github.io/react-native/docs/using-a-scrollview صفحة Using a ScrollView في توثيق React Native الرسمي.]
[[تصنيف:ReactNative]]