react native에서 여러 navigator를 사용할 수 있는데 이러한 navigator를 정의하고 나면 navigation을 활용할 수 있게 됩니다.
navigation을 사용해 화면을 이동하는 방법과 서로 다른 navigator 간 이동하는 방법을 알아보려고 합니다.

navigation으로 이동하는 방법

• 따로 import 하지 않고 navigation을 바로 사용할 수 있습니다.
• 이동하는 방법 또한 여러가지인데, 그 중 navigate, push, reset에 대해 알아보겠습니다.

navigate vs. push

둘 모두 주로 stack navigator에서 화면을 전환할 때 사용합니다.

1. navigate

• 한 화면에서 다른 화면으로 이동 시 stack에 쌓이면서 이동합니다.
• 하지만 같은 화면에서의 이동은 stack에 쌓이지 않습니다.

  navigation.navigate('screen name')

import { Button } from 'react-native'

// 타입 정의
interface DiaryPageProp {
  navigation: {
    navigate: (arg0: string) => void;
  };
}

function DiaryPage({ navigation } : DiaryPageProp) {
  
  // 이동하는 함수 정의
  function navigateToMypage() {
    navigation.navigate('MyPage')
  }
  
  return (
    <Button
    	onPress={navigateToMypage}
		title="MyPage"
		color="gray"
    />
  )
}

2. push

• navigate와 동일하게 한 화면에서 다른 화면으로 이동 시 stack에 쌓이면서 이동합니다.
• navigate와 달리 중복되는 화면이 모두 쌓이게 됩니다.

  navigation.push('screen name')

import { Button } from 'react-native'

// 타입 정의
interface DiaryPageProp {
  navigation: {
    push: (arg0: string) => void;
  };
}

function DiaryPage({ navigation } : DiaryPageProp) {
  
  // 이동하는 함수 정의
  function navigateToMypage() {
    navigation.push('MyPage')
  }
  
  return (
    <Button
    	onPress={navigateToMypage}
		title="MyPage"
		color="gray"
    />
  )
}

3. params 전달하기

화면을 이동하면서 param을 함께 전달해주는 방법입니다.

navigation.push('screen name', { params name : params })

import { Button } from 'react-native'

// 타입 정의
interface DiaryPageProp {
  navigation: {
    push: (arg0: string, arg1?: { diaryId: Number }) => void;
  };
}

function DiaryPage({ navigation } : DiaryPageProp) {
  
  // 이동하는 함수 정의
  function navigateToMypage() {
    navigation.push('MyPage', { diaryId: 10 })
  }
  
  return (
    <Button
    	onPress={navigateToMypage}
		title="MyPage"
		color="gray"
    />
  )
}

전달한 params를 사용하는 방법입니다.

const { params name } = route.params

// 타입 정의
interface MyPageProp {
  route: {
    params: { diaryId: Number }
  };
}

function MyPage({ route } : MyPageProp) {
  const { diaryId } = route.params;
  
  return (
    <Text>{diaryId} 번 째 일기입니다.</Text>
  )
}

reset

• 위 방식으로 stack 화면을 계속 이동하다보면 stack이 계속 쌓이게 되는데 이렇게 쌓인 stack의 초기화가 필요할 때 사용합니다.

  navigation.reset({ routes: [{ name: 'screen name'}] })

interface DiaryPageProp {
  navigation: {
    reset: (arg0: { routes: { name: string }[] }) => void;
  };
}

function DiaryPage({ navigation } : DiaryPageProp) {
  
  // 이동하는 함수 정의
  function navigateToMypage() {
    navigation.reset({ routes: [{ name: 'MyPage' }] })
  }
  
  return (
    <Button
    	onPress={navigateToMypage}
		title="MyPage"
		color="gray"
    />
  )

서로 다른 navigator 간 이동하기

• navigation을 사용하다 보면 navigator 내에서 이동하는 경우가 대부분이지만 다른 navigator로 이동해야 하는 경우도 발생합니다.
• 이런 경우에는 앞에 navigator 이름을 명시해 주고 이동하면 됩니다.

  navigation.navigate('navigator name', { screen: 'screen name' })

import { Button } from 'react-native'

// 타입 정의
interface DiaryPageProp {
  navigation: {
    navigate: (arg0: string, arg1?: { screen: string }) => void;
  };
}

function DiaryPage({ navigation } : DiaryPageProp) {
  
  // 이동하는 함수 정의
  function navigateToHome() {
    navigation.navigate('MainStack', { screen: 'Home' })
  }
  
  return (
    <Button
    	onPress={navigateToHome}
		title="Home"
		color="gray"
    />
  )
}

다른 navigator로 이동할 때 params도 전달할 수 있습니다.

navigation.navigate('navigator name', { screen: 'screen name', params: { params name: params } })

import { Button } from 'react-native'

// 타입 정의
interface DiaryPageProp {
  navigation: {
    navigate: (arg0: string, arg1?: { screen: string, params: { userId : Number } }) => void;
  };
}

function DiaryPage({ navigation } : DiaryPageProp) {
  
  // 이동하는 함수 정의
  function navigateToHome() {
    navigation.navigate('MainStack', { screen : 'Home', params: { userId: 2 } })
  }
  
  return (
    <Button
    	onPress={navigateToHome}
		title="Home"
		color="gray"
    />
  )
}