이제 ArticleItem에서 onPress 함수를 구현하여 Article 화면을 띄울 차례입니다.

components/ArticleItem.tsx

import {useNavigation} from '@react-navigation/core';
import React from 'react';
import {StyleSheet, Pressable, Text, View, Platform} from 'react-native';
import {MainTabNavigationProp} from '../screens/types';

export interface ArticleItemProps {
  id: number;
  title: string;
  publishedAt: string;
  username: string;
}

function ArticleItem({id, title, publishedAt, username}: ArticleItemProps) {
  const navigation = useNavigation<MainTabNavigationProp>();
  const onPress = () => {
    navigation.navigate('Article', {
      id,
    });
  };

  (...)

onPress 함수를 구현했다면 화면에서 게시글을 눌러보세요. ArticleScreen이 잘 나타나나요? 선택한 게시글의 id가 보이는지도 확인하세요.

▲ 그림 15-4 ArticleScreen에서 id 확인