بخش های اصلی

آموزش React Native

React Native – ListView

در این بخش درمورد عنصر ListView توضیح میدیم.

ListView باید برای لیست های بزرگ استفاده بشه چون فقط عناصر قابل مشاهده را روی صفحه نمایش رِندِر می کنه.

نحوه ی استفاده از ListView

dataSource در لیست، بعنوانِ مدل (model) بکار میره. dataSource را در کامپوننتِ container ایجاد می کنیم.

renderRow یکایک عناصر را از آرایه ی dataSource میگیره و روی صفحه نمایش رِندِر می کنه. از آن جایی که renderRow، عناصر را رِندِر می کنه، در کامپوننت نمایشی از آن استفاده می کنیم.

rowHasChanged تابعیِه که تعیین می کنه که row (سطر) تغییر کرده یا نه.

مثال

در حال حاضر تمام قسمت هایی که برای کار با ListView مورد نیاز هستن را توضیح دادیم. کامپوننتِ container، dataSource را به کامپوننت نمایشی پاس میده.

src/components/myComponent/MyContainerComponent

import React, { Component } from 'react';

import {
   ListView,
   View
} from 'react-native';

import MyPresentationalComponent from './MyPresentationalComponent'

export default class MyContainerComponent extends Component {
   constructor(props) {
      super(props);
      const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
      this.state = {
         dataSource: ds.cloneWithRows([
            'Item1', 'Item2', 'Item3', 'Item4', 'Item5', 'Item6', 'Item7', 'Item8', 
               'Item9', 'Item10'
         ])
      };
   }
   render() {
      return (
         <View>
            <MyPresentationalComponent dataSource = {this.state.dataSource} />
         </View>
      );
   }
}

کامپوننت نمایشی برای رندِر کردن تمام آیتم هایی که بعنوانِ {props.dataSource} پاس داده شدن، از تابعِ renderRow استفاده می کنه.

src/components/myComponent/MyContainerComponent

import React, { Component } from 'react'
import {
   View,
   ListView,
   Text,
   StyleSheet
} from 'react-native'

export default MyPresentationalComponent = (props) => {
   return (
      <View>
         <ListView
            style = {styles.listContainer}
            dataSource = {props.dataSource}
            renderRow = {
               (rowData) => (
                  <Text style = {styles.listItem}>
                     {rowData}
                  </Text>
               )
            }
         />
      </View>
   )
}

const styles = StyleSheet.create ({
   listContainer: {
      paddingTop: 22
   },
   listItem: {
      fontSize: 30,
      fontWeight: 'bold',
      textAlign: 'center',
   }
})

اگه برنامه را اجرا کنین، خروجی بصورت زیر خواهید دید:

خروجی

react native listview

نکته – از ListView در هر دو کامپوننت فاکتورگیری مجدد می کنیم تا بتواند از MyContainerComponent بعنوان منبع داده و منطق استفاده کنه و از MyPresentationalComponent، برای رِندِر کردن استفاده کنه.

حالا اگه بخواین قسمت هایی از لیست را که قابل دیدن هستن، تغییر بدین، می توانید استایلی که در کامپوننت نمایشی است را تغییر بدین و نیازی به دخالت دادنِ منطق یا چیزهای دیگه نیست.

مبحث آموزشی

آموزش React Native

Learn React Native

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

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

تبلیغات

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

https://telegram.me/softskill_ir

آخرین مقالات

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

خبـرنــامه

Newsletters

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