ایجاد Timeline ListView در React Native


کامپوننت Timeline ListView در React Native یکی از محبوب ترین کامپوننت های custom است که در بسیاری از اپلیکیشن های e-commerce موبایل و وب اپلیکیشن ها استفاده می شود.کامپوننت Timeline برای نمایش دادن یک فعالیت خاص به صورت مرحله به مرحله روی صفحه تلفن همراه است. ما در بسیاری از اپلیکیشن های e-commerce مشاهده کرده ایم تا هر فعالیتی را که قصد دارند به کاربران خود نشان دهند مانند جایی که محصول بسته بندی شده است ، محصول آماده ارسال است ، کالا ارسال می شود ، محصول در نزدیکی محل تحویل شما و … را در قالب Timeline نمایش می دهند.در هسته React Native کامپوننتی به این منظور وجود ندارد اما ما می توانیم با استفاده از کتابخانه react-native-timeline-flatlist یک Timeline ListView در اپلیکیشن های خود به راحتی ایجاد کنیم.
1.در اولین گام کتابخانه react-native-timeline-flatlist رو نصب می کنیم.برای این منطور دایرکتوری پروژه رو در Command Prompt یا Terminal باز می کنیم و دستور زیر را اجرا می کنیم:
1 |
npm i react-native-timeline-flatlist --save |
2. در فایل App.js کامپوننت های StyleSheet, View and Text رو ایمپورت کنید.
1 2 3 |
import React, {Component} from 'react'; import {StyleSheet, View, Text} from 'react-native'; |
3. کامپوننت Timeline را از کتابخانه react-native-timeline-flatlist ایمپورت کنید.
1 |
import Timeline from 'react-native-timeline-flatlist' |
4. یک کلاس به نام App ایجاد کنید.
1 2 3 4 |
export default class App extends Component { } |
5.()constructor را تعریف کنید و درون آن یک متغیر به نام data ایجاد کنید.با استفاده از این متغیر ما چندین نوع data مانند time stamp, title و description مشخص می کنیم.
1 2 3 4 5 6 7 8 9 10 |
constructor(){ super() this.data = [ {time: '09:00', title: 'Event 1', description: 'Event 1 Description', }, {time: '10:45', title: 'Event 2', description: 'Event 2 Description'}, {time: '12:00', title: 'Event 3', description: 'Event 3 Description'}, {time: '14:00', title: 'Event 4', description: 'Event 4 Description'}, {time: '16:30', title: 'Event 5', description: 'Event 5 Description'} ] } |
6. ایجاد بلاک render’s return در کلاس App.
1 2 3 4 5 6 7 8 9 10 11 12 |
render() { return ( <View style={styles.MainContainer}> <Text style={styles.text}>React Native Timeline ListView Component</Text> </View> ); } |
7. اضافه کردن Timeline به View اصلی
data : برای نگه داشتن data نمایش داده شده در Timeline استفاده می شود
separator : برای نمایش خط افقی جدا کننده بین هر data استفاده می شود.
circleSize : برای مشخص کردن سایز دایره Timeline استفاده می شود.
circleColor : برای مشخص کردن رنگ دایره Timeline استفاده می شود.
lineColor : برای مشخص کردن رنگ خط Timeline استفاده می شود
timeStyle : برای مشخص کردن استایل Time stamp استفاده می شود.
style : برای اعمال استایل به کامپوننت Timeline استفاده می شود.
descriptionStyle : برای استایل دهی به متن description استفاده می شود.
1 2 3 4 5 6 7 8 9 10 |
<Timeline data={this.data} //separator={true} circleSize={20} circleColor='#0091EA' lineColor='grey' timeStyle={{textAlign: 'center', backgroundColor:'#ff9797', color:'white', padding:5, borderRadius:15}} style={styles.listStyle} descriptionStyle={{color:'gray'}} /> |
8.ایجاد استایل
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', }, listStyle: { flex: 1, marginTop: 20, marginLeft: 20 }, text:{ textAlign: 'center', fontSize: 24, marginTop: 20 } }); |
9. کد کامل برنامه در فایل App.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 |
import React, {Component} from 'react'; import {StyleSheet, View, Text} from 'react-native'; import Timeline from 'react-native-timeline-flatlist' export default class App extends Component { constructor(){ super() this.data = [ {time: '09:00', title: 'Event 1', description: 'Event 1 Description', }, {time: '10:45', title: 'Event 2', description: 'Event 2 Description'}, {time: '12:00', title: 'Event 3', description: 'Event 3 Description'}, {time: '14:00', title: 'Event 4', description: 'Event 4 Description'}, {time: '16:30', title: 'Event 5', description: 'Event 5 Description'} ] } render() { return ( <View style={styles.MainContainer}> <Text style={styles.text}>React Native Timeline ListView Component</Text> <Timeline data={this.data} //separator={true} circleSize={20} circleColor='#0091EA' lineColor='grey' timeStyle={{textAlign: 'center', backgroundColor:'#ff9797', color:'white', padding:5, borderRadius:15}} style={styles.listStyle} descriptionStyle={{color:'gray'}} /> </View> ); } } const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', }, listStyle: { flex: 1, marginTop: 20, marginLeft: 20 }, text:{ textAlign: 'center', fontSize: 24, marginTop: 20 } }); |
اگر می خواهید React Native (ری اکت نیتیو) را به صورت کامل و در قالب پروژه های مختلف یاد بگیرید پیشنهاد می کنیم در دوره آموزش جامع و پروژه محور React native شرکت کنید.
اسکرین شات :
مطالب زیر را حتما مطالعه کنید
چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟
تفاوت توسعه برنامه های android و ios
آموزش آرایه در جاوا اسکریپت ( JavaScript)
استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)
نمایش PDF در react native
استفاده از Mapbox در react native (ری اکت نیتیو)
2 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
مقالاتتون بسیار عالی و درجه یک هست
ممنون بابت انرژی مثبتتون