react navigation 배우기 2부 - 페이지 이동

https://reactnavigation.org/docs/navigating

https://reactnavigation.org/docs/navigating/

1. 페이지 이동하는법

StackNavigator안에 있는 모든 스크린 컴포넌트들은 navigation이라는 prop을 받게 된다. 이를 이용하여 페이지를 navigating 할 수 있다.

아래 예제는 1부에서 보았던 예제를 이용하여 home에서 detail 페이지로 넘어가는 예제이다.

테스트하기

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

 

 

 

2. 똑같은 페이지로 넘어간다면?

자 위 예제에서 우리는 detail 페이지로 이동하였다. 그런데 만약 detail 페이지에서 아래와 같이 detail 페이지로 이동하면 어떻게 될까?

정답은 아무일도 일어나지 않는다

 

테스트하기

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Button
        title="Go to Details... again"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

 

 

 

 

3. 똑같은 페이지를 stack에 쌓는 법

하지만 우리는 아래와 같은 needs가 종종 있다. 그리고 매우 흔한 케이스이다.

똑같은 페이지지만 특별한 값을 넘겨서 새로 페이지 stack에 쌓아 올리고 싶은데 어떻게 하나요?

 

정답은 navigate가 아닌 push를 이용하는 것 이다.

푸시를 이용하면 stack에다가 페이지를 쌓을 수 있고 이 때 따로 특별한 param들을 넘겨줄 수 있다.

 

테스트하기

<Button
  title="Go to Details... again"
  onPress={() => navigation.push('Details')}
/>

출저: reactnavigation.org

 

 

 

4. 뒤로가기

뒤로가기는 기본적으로 이 라이브러리가 header에 버튼을 제공하기도 하고, 백버튼을 이용해서 할 수 있다.

허나 간혹하가다 프로그래밍적으로 뒤로가기를 구현하고 싶을 때가 있는데 이는 아래와 같이 goBack() 메소드를 사용하면 된다.

 

테스트하기

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Button
        title="Go to Details... again"
        onPress={() => navigation.push('Details')}
      />
      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

 

 

또다른 니즈로는 우리가 보통 stack에 있는 모든 스크린을 pop시키고 첫번째 페이지로 가는 것 이다. 이는 popToTop() 메소드를 이용하여 구현할 수 있다.

 

테스트하기

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Button
        title="Go to Details... again"
        onPress={() => navigation.push('Details')}
      />
      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
      <Button title="Go back" onPress={() => navigation.goBack()} />
      <Button
        title="Go back to first screen in stack"
        onPress={() => navigation.popToTop()}
      />
    </View>
  );
}

 

 

 

3부에서는 페이지를 이동할 때 param을 넘겨주는 법에 대해 배워보겠습니다.