آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش استفاده از ScrollView در React Native-آموزش React

دوره های مرتبط با این مقاله

آموزش استفاده از ScrollView در React Native

ScrollView یک container scroll کلی است که می تواند چندین component و view را در خود نگه دارد. آیتم های قابل scroll لازم نیست هم نوع باشند، و می توان آن ها را هم افقی (با مقداردهی بهprop horizontal) و هم عمودی scroll کرد.

این مثال یک ScrollView با قابلیت scroll عمودی، حاوی ترکیبی از عکس و متن می سازد:


آموزش react

import React, { Component } from 'react';
import { 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/tiny_logo.png", width: 64, height: 64}} / >
                        < Image source={ {uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} / >
                        < Image source={ {uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} / >
                        < Image source={ {uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} / >
                        < Image source={ {uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} / >
                        < Text style={ {fontSize:96}} >If you like< /Text >
                        < Image source={ {uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} / >
                        < Image source={ {uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} / >
                        < Image source={ {uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} / >
                        < Image source={ {uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} / >
                        < Image source={ {uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} / >
                        < Text style={ {fontSize:96}} >Scrolling down< /Text >
                        < Image source={ {uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} / >
                        < Image source={ {uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} / >
                        < Image source={ {uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} / >
                        < Image source={ {uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} / >
                        < Image source={ {uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} / >
                        < Text style={ {fontSize:96}} >What's the best< /Text >
                        < Image source={ {uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} / >
                        < Image source={ {uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} / >
                        < Image source={ {uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} / >
                        < Image source={ {uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} / >
                        < Image source={ {uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} / >
                        < Text style={ {fontSize:96}} >Framework around?< /Text >
                        < Image source={ {uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} / >
                        < Image source={ {uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} / >
                        < Image source={ {uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} / >
                        < Image source={ {uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} / >
                        < Image source={ {uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} / >
                        < Text style={ {fontSize:80}} >React Native< /Text >
        < /ScrollView >
    );
  }
}
                        

ScrollView ها می توانند با استفاده از pagingEnabled به گونه ای تنظیم شوند که بتوان چندین صفحه داشت و بین آن ها حرکت کرد. حرکت افقی بین viewها در android نیز با استفاده از component ViewPager قابل پیاده سازی است.

در iOS، یک ScrollView با فقط یک آیتم می تواند برای ایجاد امکان zoom استفاده شود. با تنظیم مقادیر برای maximumZoomScale و minimumZoomScale امکان بزرگ و کوچک کردن محتوا توسط حرکات pinch and expand ممکن خواهد بود.

استفاده از ScrollView برای نمایش تعداد کمی آیتم در سایز محدود مناسب است، چرا که همه المان ها و view های یک ScrollView، render می شوند، حتی اگر در لحظه در صفحه قابل نمایش نباشند. اگر لیست طویلی از آیتم ها دارید که در صفحه جا نمی شود، باید از FlatList ها استفاده کنید. مرحله بعد یادگیری درمورد list view ها خواهد بود.

  • 492
  •    0
  • تاریخ ارسال :   1398/05/30

دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .