[React-Native] react-navigation V5 (네비게이션) / Route 분기하기

네비게이션이란?

 웹에서는 React-router로 컴포넌트를 구분했지만, React Native(반응형 앱)에서는 별도의 URL이 존재하지 않기 때문에 React-Navigation을 이용하여 구분합니다.

 

React-Navigation V5를 사용하여 앱에서 각각의 버튼이나 이벤트가 발생될 때,

어느 공간으로 이동할 것인지 먼저 따라해봅시다.

 

https://reactnavigation.org/

React Navigation | React Navigation

가장 먼저 해야할 것은, React-Navigation 설치겠죠?

 

1. React-Navigation Install

위의 두 명령어를 입력하여 설치합니다.

npm install react-navigation

 

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

 

2. 프로젝트 구성

프로젝트의 구조는 아래와 같이 구성합니다.

src  ├─ HomeScreen.js  ├─ LoginScreen.js  └─ index.js App.js

 

 

3. 코드 변경

아래와 같이 변경합니다.

•  

<App.js>

import React from 'react';
import RootStack from './src/navigation/index';
import { NavigationContainer } from '@react-navigation/native';

class App extends React.Component {

  render() {
    return (
      <NavigationContainer>
        <RootStack />
      </NavigationContainer>
    );
  }

}

export default App;

 

<src/index.js>

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import LoginScreen from './LoginScreen';
import HomeScreen from './HomeScreen';

const Stack = createStackNavigator();

function RootStack() {
  return (
    <Stack.Navigator
      initialRouteName="Home"
      screenOptions={{ gestureEnabled: false }}
    >
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ title: 'RunWithMe' }}
      />
      <Stack.Screen
        name="Profile"
        component={LoginScreen}
        initialParams={{ user: 'me' }}
      />
    </Stack.Navigator>
  );
}
export default RootStack;

 

<src/LoginScreen.js>

import React, { Component } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, StatusBar } from 'react-native';

class LoginScreen extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <View style={styles.container}>
                <StatusBar barStyle="dark-content" />
                <View>
                    <Text style={{fontSize:25}}>Login Screen</Text>
                </View>
                <TouchableOpacity
                        style={{
                            justifyContent: 'flex-end',
                            backgroundColor: 'rgb(87,174,198)',
                            padding: 20,
                            marginTop: 20,
                            borderRadius: 30
                        }}>
                        <Text style={{fontSize: 20, textAlign: 'center', color: 'white'}}>다음</Text>
             </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
        justifyContent: 'center',
    }
})

export default LoginScreen;  

 

<src/HomeScreen.js>

import React, {Component} from 'react';
import { View, Text, StyleSheet, StatusBar } from 'react-native';

class HomeScreen extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <View style={styles.container}>
                <StatusBar barStyle="dark-content" />
                <View>
                    <Text style={{fontSize:25}}>Home Screen22</Text>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
        justifyContent: 'center',
    }
})

export default HomeScreen;