الفرق بين المراجعتين لصفحة: «ReactNative/using a scrollview»
Basema-bakleh (نقاش | مساهمات) ←استخدام المكوّن ScrollView: اعتمدنا ترجمة عرض التمرير سابقا للمكون |
جميل-بيلوني (نقاش | مساهمات) طلا ملخص تعديل |
||
| (2 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:استخدام | <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 تجربة حية]): | |||
يُنشئ هذا المثال مكون <code>ScrollView</code> عموديًّا بصورٍ ونصوصٍ مختلطةٍ مع بعضها البعض. | |||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
| سطر 55: | سطر 53: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
يمكن ضبط | يمكن ضبط واجهة التمرير <code>[[ReactNative/scrollview|ScrollView]]</code> للسماح بالانتقال عبر الواجهات بإيماءات السحب (swiping gestures) باستخدام الخاصيّة <code>pagingEnabled</code>، كما يمكن الحصول على إمكانيّة التمرير الأفقيّ بين الواجهات على Android باستخدام المكوّن <code>ViewPager</code>. | ||
يمكن في منصة iOS استخدامُ مكوّن | يمكن في منصة iOS استخدامُ مكوّن واجهة التمرير <code>ScrollView</code> مع عنصر واحد للسماح للمستخدم بتكبير المحتوى، كل ما عليك فعله هو ضبط الحد الأقصى لمقياس التكبير بالخاصيّة <code>maximumZoomScale</code> والحد الأدنى له بالخاصيّة <code>minimumZoomScale</code> وسيتمكن مستخدم التطبيق من التكبير والتصغير عبر إيماءتي التوسعة (expand) والضغط (pinch). | ||
المكوّن <code>ScrollView</code> فعّالٌ لعرض بيانات قليلة ذات حجم محدود. إذ تُصيَّر جميع العناصر والواجهات الموجودة داخله حتى لو لم تكن ظاهرة حاليًا على الشاشة، ويجب عليك استخدام المكوّن <code>[[ReactNative/flatlist|FlatList]]</code> بدلاً منه إن كنت ترغب بعرض قائمةٍ طويلةٍ من العناصر تتخطّى ما يمكن احتواؤه على الشاشة. لذا لنتعرف على طرق [[ReactNative/using a listview|عرض القوائم]] بفعاليّة وأداء أفضل. | المكوّن <code>ScrollView</code> فعّالٌ لعرض بيانات قليلة ذات حجم محدود. إذ تُصيَّر جميع العناصر والواجهات الموجودة داخله حتى لو لم تكن ظاهرة حاليًا على الشاشة، ويجب عليك استخدام المكوّن <code>[[ReactNative/flatlist|FlatList]]</code> بدلاً منه إن كنت ترغب بعرض قائمةٍ طويلةٍ من العناصر تتخطّى ما يمكن احتواؤه على الشاشة. لذا لنتعرف على طرق [[ReactNative/using a listview|عرض القوائم]] بفعاليّة وأداء أفضل. | ||
| سطر 64: | سطر 62: | ||
* [https://facebook.github.io/react-native/docs/using-a-scrollview صفحة Using a ScrollView في توثيق React Native الرسمي.] | * [https://facebook.github.io/react-native/docs/using-a-scrollview صفحة Using a ScrollView في توثيق React Native الرسمي.] | ||
[[تصنيف:ReactNative]] | [[تصنيف:ReactNative]] | ||
[[تصنيف:React Native Docs]] | |||
المراجعة الحالية بتاريخ 13:33، 9 أكتوبر 2021
واجهة التمرير ScrollView هي حاويةُ تمريرٍ (scrolling container) تحوي عدّة مكوناتٍ وواجهات أخرى (views). ليس من الضروري أن تكون العناصر متجانسة، ويمكن أن يكون التمرير عموديًا وأفقيًا في الوقت نفسه (عن طريق تعيين الخاصية horizontal).
يُنشئ هذا المثال مكون ScrollView عموديًّا بصورٍ ونصوصٍ مختلطةٍ مع بعضها البعض (تجربة حية):
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;
يمكن ضبط واجهة التمرير ScrollView للسماح بالانتقال عبر الواجهات بإيماءات السحب (swiping gestures) باستخدام الخاصيّة pagingEnabled، كما يمكن الحصول على إمكانيّة التمرير الأفقيّ بين الواجهات على Android باستخدام المكوّن ViewPager.
يمكن في منصة iOS استخدامُ مكوّن واجهة التمرير ScrollView مع عنصر واحد للسماح للمستخدم بتكبير المحتوى، كل ما عليك فعله هو ضبط الحد الأقصى لمقياس التكبير بالخاصيّة maximumZoomScale والحد الأدنى له بالخاصيّة minimumZoomScale وسيتمكن مستخدم التطبيق من التكبير والتصغير عبر إيماءتي التوسعة (expand) والضغط (pinch).
المكوّن ScrollView فعّالٌ لعرض بيانات قليلة ذات حجم محدود. إذ تُصيَّر جميع العناصر والواجهات الموجودة داخله حتى لو لم تكن ظاهرة حاليًا على الشاشة، ويجب عليك استخدام المكوّن FlatList بدلاً منه إن كنت ترغب بعرض قائمةٍ طويلةٍ من العناصر تتخطّى ما يمكن احتواؤه على الشاشة. لذا لنتعرف على طرق عرض القوائم بفعاليّة وأداء أفضل.