[RN] React Navigation Docs(1) - navigate

React Navigation Docs시리즈에서는 React Navigation 공식 홈페이지(https://reactnavigation.org)에 있는 내용을 정리해 보고자 합니다. 자세한 내용은 링크를 참고해주세요.

[RN] React Navigation Docs(2) - params

[RN] React Navigation Docs(3) - navigationOptions

[RN] React Navigation Docs(4) - App containers

[RN] React Navigation Docs(5) - Switch Navigator

[RN] React Navigation Docs(6) - Drawer Navigator

[RN] React Navigation Docs(7) - Tab Navigator

react-navigation 설치

1. 전역변수로 react-native 설치

    npm install -g react-native-cli

2. react-native 설치

    npm install --save react-navigation

    npm install --save react-native-gesture-handler

3. 타입스크립트일 경우는 추가로

    npm install --save-dev @types/react-navigation (타입스크립트일 경우에만)

4. react-native-gesture-handler 라이브러리를 react-native 프로젝트에 연결

    react-native link react-native-gesture-handler

혹시 이 이후에 실행시켰을 때, react를 resolve할 수 없다고 하면 npm install react 를 한 번 더 해주면 된다.

Creating a stack navigator

createStackNavigator 는 React 구성요소를 반환하는 메소드이며, React Component 를 반환하므로 App.js에서 export 해서 앱의 root component 로 사용할 수 있습니다.

Screen 들이 Stack 에 쌓이고 Stack 의 Top에 위치하는 새로운 Screen들 사이에서 앱이 이동을 할 수 있는 방식을 제공합니다.

import React from "react";
import { View, Text } from "react-native";
import { createStackNavigator, createAppContainer } from "react-navigation";
 
class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}
 
const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen
  },
  {
    initialRouteName: "Home"
  }
});
 
export default createAppContainer(AppNavigator);

Navigating to a new screen

this.props.navigation: navigation prop 은 stack navigator의 모든 screen component 에 전달됩니다.

navigate('Details'): 이 메소드를 호출하여, 'Details' 스크린으로 이동할 수 있습니다.

import React from 'react';
import { Button, View, Text } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
 
class HomeScreen extends React.Component {
  render() {
    const { navigate } = this.props.navigation;
 
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => navigate('Details')}
        />
      </View>
    );
  }
}

this.props.navigation에 있는 navigate() 메소드는 return문 밖에서 따로 만들고 onPress 에서 간결하게 사용할 수 있습니다.

Going Back

stack navigator에 의해 제공된 screen의 header에는 뒤로 돌아갈 수 있는 버튼이 자동으로 포함됩니다. 하지만, 그 외에도 this.props.navigation.goBack() 메소드를 사용하여 뒤로 돌아갈 수 있습니다.

import React from 'react';
import { Button, View, Text } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
 
class HomeScreen extends React.Component {
  render() {
    const { navigate, goBack } = this.props.navigation;
 
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => navigate('Details')}
        />
        <Button
          title="Go back"
          onPress={() => goBack()}
        />
      </View>
    );
  }
}

그리고 이번에도 역시, this.props.navigation에 있는 goBack() 메소드는 return문 밖에서 따로 만들고 onPress 에서 간결하게 사용할 수 있습니다.

[RN] React Navigation Docs(2) - params

[RN] React Navigation Docs(3) - navigationOptions

[RN] React Navigation Docs(4) - App containers

[RN] React Navigation Docs(5) - Switch Navigator

[RN] React Navigation Docs(6) - Drawer Navigator

[RN] React Navigation Docs(7) - Tab Navigator