آموزش لیست ویو در برنامه نویسی React Native

آموزش لیست ویو در برنامه نویسی React Native

در خدمت شما عزیزان هستیم با  آموزش لیست ویو در برنامه نویسی React Native از وب سایت آموزش برنامه نویسی سورس باران. در جلسه هشتم آموزش ریکت نیتیو،لیست ویو (ListView) یکی از قدیمی ترین و پرکاربردترین کامپوننت ها در توسعه اپلیکیشن های Android و Ios است. لیست ویو ساده ترین راه برای نمایش داده های چندگانه در یک صفحه نمایش با قابلیت scroll است. تا نتها با ما همراه باشید…

آموزش لیست ویو در برنامه نویسی React Native

بدون معطلی بریم سراغ آموزش و کارمون رو شروع کنیم. ابتدا یک پروژه جدید ایجاد کنید. ما List را در کامپوننت Home وارد می کنیم و آن را روی صفحه نمایش نشان می دهیم.

App.js

import React from 'react'
import List from './List.js'

const App = () => {
   return (
      <List />
   )
}
export default App

برای ایجاد یک ListView ،از روش ()map استفاده خواهیم کرد. این یک آرایه ای از موارد را تکرار می کند و هر کدام را رندر می کند.

 

List.js

import React, { Component } from 'react'
import { Text, View, TouchableOpacity, StyleSheet } from 'react-native'
   
class List extends Component {
   state = {
      names: [
         {
            id: 0,
            name: 'Ben',
         },
         {
            id: 1,
            name: 'Susan',
         },
         {
            id: 2,
            name: 'Robert',
         },
         {
            id: 3,
            name: 'Mary',
         }
      ]
   }
   alertItemName = (item) => {
      alert(item.name)
   }
   render() {
      return (
         <View>
            {
               this.state.names.map((item, index) => (
                  <TouchableOpacity
                     key = {item.id}
                     style = {styles.container}
                     onPress = {() => this.alertItemName(item)}>
                     <Text style = {styles.text}>
                        {item.name}
                     </Text>
                  </TouchableOpacity>
               ))
            }
         </View>
      )
   }
}
export default List

const styles = StyleSheet.create ({
   container: {
      padding: 10,
      marginTop: 3,
      backgroundColor: '#d9f9b1',
      alignItems: 'center',
   },
   text: {
      color: '#4f603c'
   }
})

هنگامی که ما برنامه را اجرا می کنیم، لیستی از اسامی را خواهیم دید.

شما می توانید بر روی هر یک از آیتم های موجود در لیست کلیک کنید تا هشدار را با نام نشان دهد.

 

مثال 2 از آموزش ListView در react native

ساخت پروژه جدید و اضافه کردن کامپوننت های AppRegistry, StyleSheet, View, Alert, ListView , Text در بلاک import

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

ایجاد constructor در کلاس اصلی با پارامتر props

constructor(props) {
 
    super(props);
 
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    
    this.state = {
 
      dataSource: ds.cloneWithRows([
           'One',
            'Two',
            'Three',
            'Four',
            'Five',
            'Six',
            'Seven',
            'Eight',
            'Nine',
            'Ten',
            'Eleven',
            'Twelve'
        ]),
    
    };
 
  }

ایجاد یک تابع به نام ListViewItemSeparator . با استفاده از این تابع بین آیتم های ListView یک جداکننده بصورت خط ایجاد میکنیم.

ListViewItemSeparator = () => {
    return (
      <View
        style={{
          height: .5,
          width: "100%",
          backgroundColor: "#000",
        }}
      />
    );
  }

ایجاد تابع GetListViewItem برای نمایش نام آیتم های ListView

GetListViewItem (rowData) {
   
  Alert.alert(rowData);
 
  }

اضافه کردن View در بلاک render return

render() {
    return (
 
<View>
  
      
</View>
            
    );
  }

ایجاد StyleSheet در بالای خط کد AppRegistry.registerComponent

const styles = StyleSheet.create({
 
  MainContainer :{
  
    justifyContent: 'center',
    flex:1,
    margin: 10
  },
 
  rowViewContainer: 
  {
 
    fontSize: 18,
    paddingRight: 10,
    paddingTop: 10,
    paddingBottom: 10,
 
  }
});

اضافه کردن کامپوننت ListView دورن View

dataSource: فراخوانی data source که با استفاده از state تعریف کردیم.

renderSeparator: فراخوانی تابع ListViewItemSeparator برای نمایش خط جداکننده بین آیتم ها

renderRow: نمایش اطلاعات با استفاده از کامپوننت Text

onPress: فراخوانی تابع GetListViewItem

<View style={styles.MainContainer}>
  
         <ListView
 
            dataSource={this.state.dataSource}
 
            renderSeparator= {this.ListViewItemSeparator}
 
            renderRow={
                        (rowData) => <Text style={styles.rowViewContainer} onPress={this.GetListViewItem.bind(this, rowData)}>{rowData}</Text>
                      }
 
          />
 
</View>

کد کامل برنامه در فایل index.js

import React, { Component } from 'react';
 
import { AppRegistry, StyleSheet, View, Alert, ListView, Text } from 'react-native';
 
class MainProject extends Component {
 
constructor(props) {
 
    super(props);
 
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    
    this.state = {
 
      dataSource: ds.cloneWithRows([
           'One',
            'Two',
            'Three',
            'Four',
            'Five',
            'Six',
            'Seven',
            'Eight',
            'Nine',
            'Ten',
            'Eleven',
            'Twelve'
        ]),
    
    };
 
 
  }
 
 ListViewItemSeparator = () => {
    return (
      <View
        style={{
          height: .5,
          width: "100%",
          backgroundColor: "#000",
        }}
      />
    );
  }
 
  GetListViewItem (rowData) {
   
  Alert.alert(rowData);
 
  }
 
render() {
return (
 
<View style={styles.MainContainer}>
  
         <ListView
 
            dataSource={this.state.dataSource}
 
            renderSeparator= {this.ListViewItemSeparator}
 
            renderRow={
                        (rowData) => <Text style={styles.rowViewContainer} onPress={this.GetListViewItem.bind(this, rowData)}>{rowData}</Text>
                      }
 
          />
 
</View>
            
    );
  }
}
 
const styles = StyleSheet.create({
 
  MainContainer :{
  
    justifyContent: 'center',
    flex:1,
    margin: 10
  },
 
  rowViewContainer: 
  {
 
    fontSize: 18,
    paddingRight: 10,
    paddingTop: 10,
    paddingBottom: 10,
 
  }
});
 
AppRegistry.registerComponent('MainProject', () => MainProject);

ممنون از اینکه ما رو تا انتهای آموزش ListView در برنامه نویسی React Native همراهی نمودید. لیست جلسات قبل رو میتونید در زیر مشاهده نمایید.

 

لیست جلسات قبل آموزش React Native

  1. React Native یا ریکت نیتیو چیست؟
  2. آموزش React Native – نصب و تنظیم محیط React Native
  3. آموزش App در React Native
  4. آموزش کار با State در React Native
  5. آموزش کار با کامپوننت Props در React Native
  6. آموزش استایل دهی در برنامه نویسی React Native
  7. آموزش flex در برنامه نویسی react native
5/5 - (1 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

پکیج جامع و حرفه ای آموزش طراحی قالب ریسپانسیو وردپرس به زبان فارسی + پکیج سئو

دسته بندی موضوعات

آخرین محصولات فروشگاه

مشاهده همه

نظرات

بازخوردهای خود را برای ما ارسال کنید

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.