MessageNav

들어가기
DM(direct message)에 들어가기 전에 Message Nav를 만드는 POST
Message Nav는 LoggedInNav에 Stack Nav 로 넣어준다.
Message Nav는 방리스트를 보는 Rooms.js 스크린과 대화를 보는 Room.js 두개의
화면으로 구성된다.

1. loggedInNav.js

import { createStackNavigator } from '@react-navigation/stack'
import UploadForm from '../screens/UploadForm'
import TabsNav from './TabsNav'
import UploadNav from './UploadNav'
import { Ionicons } from '@expo/vector-icons'
import MessagesNav from './MessagesNav'



const Stack = createStackNavigator()

export default function LoggedInNav() {
  return (
    <Stack.Navigator presentation="modal">
      <Stack.Screen
        name="Tabs"
        options={{ headerShown: false }}
        component={TabsNav}
      />
      <Stack.Screen
        name="Upload"
        options={{ headerShown: false }}
        component={UploadNav}
      />
      <Stack.Screen
        name="UploadForm"
        options={{
          headerBackTitleVisible: false,
          headerBackImage: ({ tintColor }) => (
            <Ionicons name="close" color="white" size={28} />
          ),
          title: 'Upload',
          headerTintColor: 'white',
          headerStyle: {
            backgroundColor: 'black',
          },
        }}
        component={UploadForm}
      />
      ***********************************************************
      <Stack.Screen
        name="Messages"
        options={{ headerShown: false }}
        component={MessagesNav}
      />
    </Stack.Navigator>
    ******************************Stack으로 MessageNav 넣어줌.
  )
}

2. MessagesNav.js

앞서서 여러번 다뤘든 부분이기 때문에, 복습차원에서 한번 읽어보고 넘어간다.

import { createStackNavigator } from '@react-navigation/stack'
import React from 'react'
import Room from '../screens/Room'
import Rooms from '../screens/Rooms'
import { Ionicons } from '@expo/vector-icons'

const Stack = createStackNavigator()

export default function MessagesNav() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerTintColor: 'white',
        headerBackTitleVisible: false,
        headerStyle: {
          backgroundColor: 'black',
        },
        headerBackImage: ({ tintColor }) => (
          <Ionicons name="chevron-down" color="rgba(255,255,255,1)" size={28} />
        ),
      }}
    >
      <Stack.Screen name="Rooms" component={Rooms} />
      <Stack.Screen
        name="Room"
        options={{
          headerBackImage: ({ tintColor }) => (
            <Ionicons
              name="chevron-back"
              color="rgba(255,255,255,1)"
              size={28}
            />
          ),
        }}
        component={Room}
      />
    </Stack.Navigator>
  )
}

3. Feed.js

header의 오른쪽부분에 DM날리는 종이비행기를 Feed의 header 부분에 넣어준다.

export default function Feed({ navigation }) {
  const User = useUser()
  console.log(User)
  const { data, loading, refetch, fetchMore } = useQuery(FEED_QUERY, {
    variables: {
      offset: 0,
    },
  })
  console.log(data)
  const renderPhoto = ({ item: photo }) => {
    return <Photo {...photo} />
  }
  const refresh = async () => {
    setRefreshing(true)
    await refetch()
    setRefreshing(false)
  }
  const [refreshing, setRefreshing] = useState(false)
  
  ****************************************************************
  const MessagesButton = () => (
    <TouchableOpacity
      style={{ marginRight: 25 }}
      onPress={() => navigation.navigate('Messages')}
    >
      <Ionicons name="paper-plane" color="white" size={28} />
    </TouchableOpacity>
  )
  useEffect(() => {
    navigation.setOptions({
      headerRight: MessagesButton,
    })
  })
  *********navigatio, setOptions,navigate를 이용해서 만들어줌.!!
  
  return (
    <ScreenLayout loading={loading}>