الفرق بين المراجعتين لصفحة: «ReactNative/using a scrollview»

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


يُنشئ هذا المثال عرضَ <code>ScrollView</code> عمودي بصور ونصوص مختلطة مع بعضها البعض.
يُنشئ هذا المثال مكون <code>ScrollView</code> عموديًّا بصورٍ ونصوصٍ مختلطةٍ مع بعضها البعض.


<syntaxhighlight lang="javascript">
<syntaxhighlight lang="javascript">
import React, { Component } from 'react';
import React from 'react';
import { AppRegistry, ScrollView, Image, Text } from 'react-native';
import { Image, ScrollView, Text } from 'react-native';
 
const logo = {
  uri: 'https://reactnative.dev/img/tiny_logo.png',
  width: 64,
  height: 64
};


export default class IScrolledDownAndWhatHappenedNextShockedMe extends Component {
const App = () => (
  render() {
  <ScrollView>
      return (
    <Text style={{ fontSize: 96 }}>Scroll me plz</Text>
        <ScrollView>
    <Image source={logo} />
          <Text style={{fontSize:96}}>Scroll me plz</Text>
    <Image source={logo} />
          <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
    <Image source={logo} />
          <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
    <Image source={logo} />
          <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
    <Image source={logo} />
          <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={logo} />
          <Text style={{fontSize:96}}>If you like</Text>
    <Image source={logo} />
          <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
    <Image source={logo} />
          <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
    <Image source={logo} />
          <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
    <Image source={logo} />
          <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={logo} />
          <Text style={{fontSize:96}}>Scrolling down</Text>
    <Image source={logo} />
          <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
    <Image source={logo} />
          <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
    <Image source={logo} />
          <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
    <Image source={logo} />
          <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={logo} />
          <Text style={{fontSize:96}}>What's the best</Text>
    <Image source={logo} />
          <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
    <Image source={logo} />
          <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
    <Image source={logo} />
          <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
    <Image source={logo} />
          <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={logo} />
          <Text style={{fontSize:96}}>Framework around?</Text>
    <Image source={logo} />
          <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
    <Image source={logo} />
          <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
    <Image source={logo} />
          <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
    <Image source={logo} />
          <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
    <Text style={{ fontSize: 80 }}>React Native</Text>
          <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
  </ScrollView>
          <Text style={{fontSize:80}}>React Native</Text>
);
        </ScrollView>
    );
  }
}


// تخطّ هذا السطر إن كنت تستعمل أداة
export default App;
// Create React Native App
AppRegistry.registerComponent(
  'AwesomeProject',
  () => IScrolledDownAndWhatHappenedNextShockedMe);
</syntaxhighlight>
</syntaxhighlight>


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


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


المكوّن <code>ScrollView</code> فعّالٌ لعرض بيانات قليلة ذات حجم محدود. إذ تُصيَّر جميع العناصر والعروض الموجودة داخل المكوّن <code>ScrollView</code>، حتى ولو لم تكن معروضة حاليًا على الشاشة. إن كنت ترغب بعرض قائمة طويلة من العناصر تتخطّى ما يمكن احتواءه على الشاشة، فيجب عليك استخدام المكوّن <code>[[ReactNative/flatlist|FlatList]]</code> بدلاً منه. لذا لنتعرف على طرق [[ReactNative/using a listview|عرض القوائم]] بفعاليّة وأداء أفضل.
المكوّن <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 الرسمي.]
* [https://facebook.github.io/react-native/docs/using-a-scrollview صفحة Using a ScrollView في توثيق React Native الرسمي.]
[[تصنيف:ReactNative]]
[[تصنيف:ReactNative]]

مراجعة 21:47، 9 مارس 2021


استخدام المكوّن ScrollView

عرض التمرير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 بدلاً منه إن كنت ترغب بعرض قائمةٍ طويلةٍ من العناصر تتخطّى ما يمكن احتواؤه على الشاشة. لذا لنتعرف على طرق عرض القوائم بفعاليّة وأداء أفضل.

مصادر

مجلوبة من «https://wiki.hsoub.com/index.php?title=ReactNative/using_a_scrollview&oldid=30406»