이 컴포넌트에서는 제목, 작성자, 날짜를 보여줍니다. 추후 게시글을 눌렀을 때 게시글 상세 화면으로 이동하도록 구현하겠습니다.

컴포넌트를 다 작성했다면 이를 Articles 컴포넌트에서 사용하세요.

components/Articles.tsx

import React from 'react';
import {View, StyleSheet, FlatList} from 'react-native';
import {Article} from '../api/types';
import ArticleItem from './ArticleItem';

export interface ArticlesProps {
  articles: Article[];
}

function Articles({articles}: ArticlesProps) {
  return (
    <FlatList
      data={articles}
      renderItem={({item}) => (
        <ArticleItem
          id={item.id}
          title={item.title}
          publishedAt={item.published_at}
          username={item.user.username}
        />
      )}
      (...)
    />
  );
}

(...)

export default Articles;