ایجاد 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 باز می کنیم و دستور زیر را اجرا می کنیم:

npm i react-native-timeline-flatlist --save

1	npm i react-native-timeline-flatlist --save

2. در فایل App.js کامپوننت های StyleSheet, View and Text رو ایمپورت کنید.

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

import React, {Component} from 'react';

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

3. کامپوننت Timeline را از کتابخانه react-native-timeline-flatlist ایمپورت کنید.

import Timeline from 'react-native-timeline-flatlist'

1	import Timeline from 'react-native-timeline-flatlist'

4. یک کلاس به نام App ایجاد کنید.

export default class App extends Component {
 
 
}

export default class App extends Component {

}

5.()constructor را تعریف کنید و درون آن یک متغیر به نام data ایجاد کنید.با استفاده از این متغیر ما چندین نوع data مانند time stamp, title و description مشخص می کنیم.

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

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.

  render() {
    return (
 
      <View style={styles.MainContainer}>
 
        <Text style={styles.text}>React Native Timeline ListView Component</Text>
 
       
      </View>
    
    );
  }

render() {

return (

<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 استفاده می شود.

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

<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.ایجاد استایل

Scale کردن اپلیکیشن های React Native برای Tablet

const styles = StyleSheet.create({
 
  MainContainer: {
    flex: 1,
    justifyContent: 'center',
  },
 
  listStyle: {
    flex: 1,
    marginTop: 20,
    marginLeft: 20
  },
 
  text:{
    textAlign: 'center',
    fontSize: 24,
    marginTop: 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

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

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 (

<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 شرکت کنید.

اسکرین شات :