ListView در react native
سلام دوستان . در این آموزش متنی قصد داریم یاد بگیریم که چجوری از ListView در react native استفاده کنیم.ListView یکی از قدیمی ترین و پرکاربردترین کامپوننت ها در توسعه اپلیکیشن های Android و Ios است.ListView ساده ترین راه برای نمایش داده های چندگانه در یک صفحه نمایش با قابلیت scroll است.
1.ساخت یک پروژه جدید.اگه نمیدونید چطور اینکارو بکنید،پیشنهاد میکنم دوره آموزش مقدماتی react native رو ببینید(برای مک هم میتونید مقاله آموزش نصب react native بر روی مک رو مطالعه کنید)
2.اضافه کردن کامپوننت های AppRegistry, StyleSheet, View, Alert, ListView , Text در بلاک import
|
1 2 3 |
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, View, Alert, ListView, Text } from 'react-native'; |
3.ایجاد constructor در کلاس اصلی با پارامتر props .
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
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' ]), }; } |
4.ایجاد یک تابع به نام ListViewItemSeparator . با استفاده از این تابع بین آیتم های ListView یک جداکننده بصورت خط ایجاد میکنیم.
|
1 2 3 4 5 6 7 8 9 10 11 |
ListViewItemSeparator = () => { return ( <View style={{ height: .5, width: "100%", backgroundColor: "#000", }} /> ); } |
5.ایجاد تابع GetListViewItem برای نمایش نام آیتم های ListView
|
1 2 3 4 5 |
GetListViewItem (rowData) { Alert.alert(rowData); } |
6.اضافه کردن View در بلاک render return
|
1 2 3 4 5 6 7 8 9 10 |
render() { return ( <View> </View> ); } |
7.ایجاد StyleSheet در بالای خط کد AppRegistry.registerComponent
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
const styles = StyleSheet.create({ MainContainer :{ justifyContent: 'center', flex:1, margin: 10 }, rowViewContainer: { fontSize: 18, paddingRight: 10, paddingTop: 10, paddingBottom: 10, } }); |
8. اضافه کردن استایل MainContainer به View
|
1 2 3 4 5 6 7 8 9 10 11 |
render() { return ( <View style={styles.MainContainer}> </View> ); } |
9.اضافه کردن کامپوننت ListView دورن View
dataSource: فراخوانی data source که با استفاده از state تعریف کردیم.
renderSeparator: فراخوانی تابع ListViewItemSeparator برای نمایش خط جداکننده بین آیتم ها
renderRow: نمایش اطلاعات با استفاده از کامپوننت Text
onPress: فراخوانی تابع GetListViewItem
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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> |
10.کد کامل برنامه در فایل index.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
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); |
اسکرین شات:
مطالب زیر را حتما مطالعه کنید
چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟
آموزش آرایه در جاوا اسکریپت ( JavaScript)
استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)
نمایش PDF در react native
ایجاد Timeline ListView در React Native
دیدگاهتان را بنویسید