[React Native] react-native-timeline-flatlist API

React Native react-native-timeline-flatlist API

React Native API중 timeline을 손쉽게 만들어주는 API를 소개해드릴려고 합니다.

한국말로는 '연표'라고 하죠. 시간 순서대로 사건을 나열하는 것인데요.

 

다음의 이미지와 같은 timeline을 만들어 보겠습니다.

 

우선 API를 설치부터 하겠습니다.

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

 

그 다음 API를 import해주겠습니다.

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

 

사용법은 매우 간단합니다.

다음과 같이 기본 형태의 예제를 제공해주는데요

import Timeline from 'react-native-timeline-flatlist'
 
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(
        <Timeline
          data={this.data}
        />
    )
}

저는 이것을 hooks functional component화 하고 ,수정하여 위의 이미지와 같이 만들었습니다.

import React, { useState } from 'react';
import { Text } from 'react-native';
import Timeline from 'react-native-timeline-flatlist'

const TimelineAPI = ({

}) => {

    const [list, setList] = useState([
        {
            time: <Text> 07am </Text>,
            title: <Text> Today </Text>,
            description: <Text> 기상 </Text>
        },
        {
            time: <Text> 09am </Text>,
            title: <Text> Today </Text>,
            description: <Text> 출근 </Text>
        },
        {
            time: <Text> 07pm </Text>,
            title: <Text> Today </Text>,
            description: <Text> 퇴근 </Text>
        },
    ]);

    return (
        <Timeline
            data={list}
            circleSize={20}
            circleColor='rgb(45,156,219)'
            lineColor='rgb(45,156,219)'
            timeContainerStyle={{ minWidth: 52, marginTop: -5 }}
            timeStyle={{ textAlign: 'center', backgroundColor: '#ff9797', color: 'white', padding: 5, borderRadius: 13 }}
            descriptionStyle={{ color: 'red' }}
            options={{
                style: { paddingTop: 5 }
            }}
        />
    )
}

export default TimelineAPI;

 

사이트에 가시면 더 많은 예제와 정보들을 확인하실 수 있습니다.

www.npmjs.com/package/react-native-timeline-flatlist

react-native-timeline-flatlist