الفرق بين المراجعتين ل"ReactNative/using a scrollview"
اذهب إلى التنقل
اذهب إلى البحث
(إضافة الصّفحة) |
|||
| سطر 2: | سطر 2: | ||
==استخدام المكوّن ScrollView== | ==استخدام المكوّن ScrollView== | ||
| − | ScrollView حاويةٌ تمريرٍ (scrolling container) تحوي عدّة مكوناتٍ وعروض. | + | <code>[[ReactNative/scrollview|ScrollView]]</code> حاويةٌ تمريرٍ (scrolling container) تحوي عدّة مكوناتٍ وعروض ([[ReactNative/view|views]]). وليس من الضروري أن تكون العناصر متجانسة، ويمكنك التمرير عموديًا وأفقيًا (عن طريق تعيين الخاصية <code>horizontal</code>). |
| − | يُنشئ هذا المثال عرضَ ScrollView عمودي بصور ونصوص مختلطة مع بعضها البعض. | + | يُنشئ هذا المثال عرضَ <code>ScrollView</code> عمودي بصور ونصوص مختلطة مع بعضها البعض. |
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
| سطر 59: | سطر 59: | ||
يمكن ضبط عروضِ <code>ScrollView</code> للسماح بالانتقال عبر العروض بإيماءات السحب (swiping gestures) باستخدام الخاصيّة <code>pagingEnabled</code>. يمكن أيضًا الحصول على إمكانيّة التمرير الأفقيّ بين العروض على Android باستخدام المكوّن <code>ViewPagerAndroid</code>. | يمكن ضبط عروضِ <code>ScrollView</code> للسماح بالانتقال عبر العروض بإيماءات السحب (swiping gestures) باستخدام الخاصيّة <code>pagingEnabled</code>. يمكن أيضًا الحصول على إمكانيّة التمرير الأفقيّ بين العروض على Android باستخدام المكوّن <code>ViewPagerAndroid</code>. | ||
| − | يمكن استخدامُ مكوّن ScrollView مع عنصر واحد للسماح للمستخدم بتكبير المحتوى. كل ما عليك فعله هو ضبط الحد الأقصى لسلّم التكبير بالخاصيّة <code>maximumZoomScale</code> والحد الأدنى له بالخاصيّة <code>minimumZoomScale</code> وسيتمكن مستخدم التطبيق من التكبير والتصغير عبر إيماءتي التوسعة (expand) والقرص (pinch). | + | يمكن استخدامُ مكوّن <code>ScrollView</code> مع عنصر واحد للسماح للمستخدم بتكبير المحتوى. كل ما عليك فعله هو ضبط الحد الأقصى لسلّم التكبير بالخاصيّة <code>maximumZoomScale</code> والحد الأدنى له بالخاصيّة <code>minimumZoomScale</code> وسيتمكن مستخدم التطبيق من التكبير والتصغير عبر إيماءتي التوسعة (expand) والقرص (pinch). |
| − | المكوّن ScrollView فعّالٌ لعرض بيانات قليلة ذات حجم محدود. إذ تُصيَّر جميع العناصر والعروض | + | المكوّن <code>ScrollView</code> فعّالٌ لعرض بيانات قليلة ذات حجم محدود. إذ تُصيَّر جميع العناصر والعروض الموجودة داخل المكوّن <code>ScrollView</code>، حتى ولو لم تكن معروضة حاليًا على الشاشة. إن كنت ترغب بعرض قائمة طويلة من العناصر تتخطّى ما يمكن احتواءه على الشاشة، فيجب عليك استخدام المكوّن <code>[[ReactNative/flatlist|FlatList]]</code> بدلاً منه. لذا لنتعرف على طرق [[ReactNative/using a listview|عرض القوائم]] بفعاليّة وأداء أفضل. |
مراجعة 11:34، 25 يناير 2019
استخدام المكوّن ScrollView
ScrollView حاويةٌ تمريرٍ (scrolling container) تحوي عدّة مكوناتٍ وعروض (views). وليس من الضروري أن تكون العناصر متجانسة، ويمكنك التمرير عموديًا وأفقيًا (عن طريق تعيين الخاصية horizontal).
يُنشئ هذا المثال عرضَ ScrollView عمودي بصور ونصوص مختلطة مع بعضها البعض.
import React, { Component } from 'react';
import { AppRegistry, ScrollView, Image, Text } from 'react-native';
export default class IScrolledDownAndWhatHappenedNextShockedMe extends Component {
render() {
return (
<ScrollView>
<Text style={{fontSize:96}}>Scroll me plz</Text>
<Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
<Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
<Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
<Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
<Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
<Text style={{fontSize:96}}>If you like</Text>
<Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
<Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
<Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
<Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
<Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
<Text style={{fontSize:96}}>Scrolling down</Text>
<Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
<Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
<Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
<Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
<Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
<Text style={{fontSize:96}}>What's the best</Text>
<Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
<Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
<Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
<Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
<Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
<Text style={{fontSize:96}}>Framework around?</Text>
<Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
<Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
<Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
<Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
<Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
<Text style={{fontSize:80}}>React Native</Text>
</ScrollView>
);
}
}
// تخطّ هذا السطر إن كنت تستعمل أداة
// Create React Native App
AppRegistry.registerComponent(
'AwesomeProject',
() => IScrolledDownAndWhatHappenedNextShockedMe);
يمكن ضبط عروضِ ScrollView للسماح بالانتقال عبر العروض بإيماءات السحب (swiping gestures) باستخدام الخاصيّة pagingEnabled. يمكن أيضًا الحصول على إمكانيّة التمرير الأفقيّ بين العروض على Android باستخدام المكوّن ViewPagerAndroid.
يمكن استخدامُ مكوّن ScrollView مع عنصر واحد للسماح للمستخدم بتكبير المحتوى. كل ما عليك فعله هو ضبط الحد الأقصى لسلّم التكبير بالخاصيّة maximumZoomScale والحد الأدنى له بالخاصيّة minimumZoomScale وسيتمكن مستخدم التطبيق من التكبير والتصغير عبر إيماءتي التوسعة (expand) والقرص (pinch).
المكوّن ScrollView فعّالٌ لعرض بيانات قليلة ذات حجم محدود. إذ تُصيَّر جميع العناصر والعروض الموجودة داخل المكوّن ScrollView، حتى ولو لم تكن معروضة حاليًا على الشاشة. إن كنت ترغب بعرض قائمة طويلة من العناصر تتخطّى ما يمكن احتواءه على الشاشة، فيجب عليك استخدام المكوّن FlatList بدلاً منه. لذا لنتعرف على طرق عرض القوائم بفعاليّة وأداء أفضل.