React Native / navigation v5 1

https://reactnavigation.org/docs/getting-started

 

1. Install

npm install @react-navigation/native

 

expo install react-native-gesture-handler react-native-reanimated
# expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

react-native-gesture-handler : 뷰를 왼쪽, 오른쪽으로 스와이프 하면 새로운 뷰가 나타나도록 설정 가능

 

npm install @react-navigation/stack

 

 

2. route 폴더 및 stack 파일 생성

 : 최상위 폴더 안에 routes 폴더 생성 후, homeStack.js 파일 생성

 

homeStack.js

import React, { useState } from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import Home from '../screens/home'
import ReviewDetail from '../screens/reviewDetail'

const Stack = createStackNavigator();

export default function HomeStack() {
    return (
        <Stack.Navigator>
            <Stack.Screen name="Home" component={Home} />
            <Stack.Screen name="ReviewDetail" component={ReviewDetail} />
        </Stack.Navigator>
    );
}

createStackNavigator is a function that returns an object containing 2 properties: Screen and Navigator. Both of them are React components used for configuring the navigator. The Navigator should contain Screen elements as its children to define the configuration for routes.

 

 

 

App.js

import Navigator from './routes/homeStack'
import { NavigationContainer } from '@react-navigation/native';

export default function App() {

  return (
     <NavigationContainer>
       <Navigator />
     </NavigationContainer>
  );

NavigationContainer is a component which manages our navigation tree and contains the navigation state. This component must wrap all navigators structure. Usually, we'd render this component at the root of our app, which is usually the component exported from App.js.