더북(TheBook)

7.1.1 FeedListItem 수정하기

방법은 간단합니다. 우선 FeedListItem 컴포넌트에서 PressableonPress Props를 설정해 컴포넌트를 눌렀을 때 현재 Props로 받아온 log 객체를 WriteScreen의 파라미터로 넣어서 화면을 열면 됩니다.

components/FeedListItem.js

import React from 'react';
import {Platform, Pressable, StyleSheet, Text} from 'react-native';
import {formatDistanceToNow, format} from 'date-fns';
import {ko} from 'date-fns/locale';
import {useNavigation} from '@react-navigation/native';

(...)

function FeedListItem({log}) {
  const {title, body, date} = log; // 사용하기 편하게 객체 구조 분해 할당
  const navigation = useNavigation();
  const onPress = () => {
    navigation.navigate('Write', {
      log,
    });
  };

  return (
    <Pressable
      style={({pressed}) => [
          styles.block,
          Platform.OS === 'ios' && pressed && {backgroundColor: '#efefef'},
      ]}
      android_ripple={{color: '#ededed'}}
      onPress={onPress}>

(...)

코드를 작성했나요? FeedListItem을 눌렀을 때 WriteScreen이 나타나는지 확인해보세요.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.