screeens/Photo.js

들어가기
search에서 keyword로 사진을 검색했을떄, 사진 click 시, feed에 나오는
사진처럼, 사진을 보여주는 screen,
search screen에서 클릭시 photoId 를 route로 보내줌.

1. screens/Photo.js

import { gql, useQuery } from '@apollo/client'
import React, { useState } from 'react'
import { RefreshControl, ScrollView, Text, View } from 'react-native'
import Photo from '../components/Photo'
import ScreenLayout from '../components/ScreenLayout'

const SEE_PHOTO = gql`  ///seePhoto query로 사진에 대한 모든 정보를 받아옴,
  query seePhoto($id: Int!) {
    seePhoto(id: $id) {
      id
      user {
        id
        username
        avatar
      }
      file
      caption
      likes
      commentNumber
      createdAt
      isMine
      isLiked
      comments {
        id
        user {
          username
          avatar
        }
        payload
        isMine
        createdAt
      }
    }
  }
`

export default function PhotoScreen({ route }) {
  const { data, loading, refetch } = useQuery(SEE_PHOTO, {
    variables: {
      id: route?.params?.photoId,   ///route에서 보내준 photoId로 사진찾음.
    },
  })
  const [refreshing, setRefreshing] = useState()  ///pull to refresh설정.
  const onRefresh = async () => {
    setRefreshing(true)
    await refetch()
    setRefreshing(false)
  }
  return (
    <ScreenLayout loading={loading}>
      <ScrollView   ///FlatList를 주로 사용하지만, 여기서 공부삼아 scrollView사용함.
                    ///문법이 거의 비슷하니, scrollView 참고할 것!
        refreshControl={
          <RefreshControl onRefresh={onRefresh} refreshing={refreshing} />
        }
        style={{ backgroundColor: 'black' }}
        contentContainerStyle={{
          backgroundColor: 'black',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <Photo {...data?.seePhoto} /> ///components/Photo.js 를 import해서
                                      ///props들을 넘겨줌
      </ScrollView>
    </ScreenLayout>
  )
}