بخش های اصلی

آموزش React Native

React Native – ScrollView

در این بخش نحوه ی کار با عنصرِ ScrollView را آموزش میدیم.

ScrollView برای عناصر لیست، بعنوان یک container قابل اسکرول شدن، عمل می کنه.

کامپوننتِ Container

قرار نیست اتفاق خیلی خاصی در این بخش بیفته. state (وضعیت)، آرایه ای از داده ها (listItems) است و به کامپوننت نمایشی پاس داده میشه.

مثال

import React, { Component } from 'react'
import { View } from 'react-native'
import MyPresentationalComponent from './MyPresentationalComponent'

export default class MyContainerComponent extends Component {
   constructor() {
      super()
      this.state = {
         listItems: [
            {'name': 'Item1', 'id': 1},
            {'name': 'Item2', 'id': 2},
            {'name': 'Item3', 'id': 3},
            {'name': 'Item4', 'id': 4},
            {'name': 'Item5', 'id': 5},
            {'name': 'Item6', 'id': 6},
            {'name': 'Item7', 'id': 7},
            {'name': 'Item8', 'id': 8},
            {'name': 'Item9', 'id': 9},
            {'name': 'Item10', 'id': 10},
            {'name': 'Item11', 'id': 11},
            {'name': 'Item12', 'id': 12}
         ]
      }
   }

   render(){
      return (
         <View>
            <MyPresentationalComponent
               listItems = {this.state.listItems}
            />
         </View>
      )
   }
}

کامپوننت نمایشی

تابعِ CreatItem، در آیتم هایی که بصورت داینامیک ایجاد شدن، بعنوان یک مدل (model) عمل می کنه. این تابع می تواند در کامپوننتِ container هم قرار بگیره ولی از آن جایی که قراره به عنصر Text، استایل بدیم، این تابع در کامپوننت نمایشی نگه میداریم.

پراپرتیِ key برای پیگیری و کنترل کردن آیتم ها لازمه.

و در پایان، تمام آیتم ها را در ScrollView، mapp می کنیم.

مثال

import React, { Component } from 'react'

import {
   View,
   Text,
   StyleSheet,
   ScrollView
} from 'react-native'

export default MyPresentationalComponent = (props) => {
   const createItem = (item) => (
      <Text
         key={item.id}
         style={styles.item}>
         {item.name}
      </Text>
   )

   return (
      <View style={styles.container}>
         <ScrollView>
            {props.listItems.map(createItem)}
         </ScrollView>
      </View>
   )
}

const styles = StyleSheet.create ({
   container: {
      marginTop: 50,
      height: 500,
      backgroundColor: 'silver'
   },
   item: {
      margin: 15,
      padding: 15,
      height: 40,
      borderColor: 'red',
      borderWidth: 1
   }
})

اگه برنامه را اجرا کنین، یک ناحیه ی قابل اسکرول کردن خواهید دید که تمام آیتم هایِ listItems در آن قرار دارن.

خروجی

react native scrollview

مبحث آموزشی

آموزش React Native

Learn React Native

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

آخرین مقالات

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد