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

0 دیدگاه

در خدمت شما عزیزان هستیم با آموزش لیست ویو در برنامه نویسی 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

import React from 'react'

import List from './List.js'

const App = () => {

return (

)

}

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'
   }
})

import React, { Component } from 'react'

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

class List extends Component {

state = {

names: [

{

id: 0,

{

id: 1,

{

id: 2,

{

id: 3,

}

]

}

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)}>

{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';

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'
        ]),
    
    };
 
  }

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",
        }}
      />
    );
  }

ListViewItemSeparator = () => {

return (

<View

style={{

height: .5,

width: "100%",

backgroundColor: "#000",

}}

);

}

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

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

GetListViewItem (rowData) {

Alert.alert(rowData);

}

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

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

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,
 
  }
});

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>

<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);

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 (

<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

React Native یا ریکت نیتیو چیست؟

آموزش React Native – نصب و تنظیم محیط React Native

آموزش App در React Native

آموزش کار با State در React Native

آموزش کار با کامپوننت Props در React Native

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

آموزش flex در برنامه نویسی react native

5/5 - (1 امتیاز)

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

نظرات

صابر بوستانی

داستان من با دنیای برنامه‌ نویسی آغاز شد، و در ادامه به عنوان یک توسعه‌ دهنده نرم‌ افزار، طراح وب سایت و متخصص سئو، مهارت ‌های تکنیکی و تحلیلی خودم رو پرورش دادم. علاقه م به دنیای مالی منو به سمت یادگیری ترید و معامله‌گری سوق داد. و در حال حاضر در برنامه نویسی و معامله گری ارز دیجیتال انجام میدم. از سال 96 سعی کردم معامله گری در کریپتو رو یاد بگیرم. ترید و معامله گری برام پر از چالش و شکست‌ های متعدد بود. اما هر شکست، درسی ارزشمند برام داشت و من رو به یک تریدر و معامله گر قوی‌ تر و هوشمندتر تبدیل کرد. با پشتکار و یادگیری مداوم، تونستم به موفقیت‌های قابل توجهی دست یابم و به معامله گری موفق تبدیل بشم. در اینجا بزرگترین تجربیات و مهمترین دانش خودم رو در اختیار شما قرار میدم تا در مدت زمان کوتاه تر و شکست های کمتر در این مسیر به موفقیت برسید.

دوره آموزش برنامه نویسی پایتون در 24 ساعت + ساخت ربات تلگرامی

منبع : سورس باران
رمز فايل : www.sourcebaran.com
انتشار: ۱۲ اردیبهشت ۱۳۹۹

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

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

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

صابر بوستانی

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

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

نظرات

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

لغو پاسخ

مطالب مرتبط