React Native Navigation - Stack Navigation을 활용한 페이지 이동

이번에 React Native에서 화면 Navigation을 이용한 화면 이동을 예제를 알아보려고 한다.

 

react-native에서는 화면간의 이동을 navigation이라고 한다.

 

화면간의 이동 방식에는 여러 방식들이 존재하지만 이번에 내가 해볼것은 StackNavigation 방식이다.

 

일단 react-native-navigation을 사용하려면 npm install부터 해야한다.

 

npm install @react-navigation/native
npm install @react-navigation/stack --legacy-peer-deps

 

이걸 먼저 install 해줘야지만 react-native에서 해당 기능을 사용할수가 있다.

 

자 이제 설치가 완료되었으니 App.js에서 소스를 작성해보자.

 

일단 우리가 제일 먼저 해야할것은 NavigationContainer와 createStackNavigation을 import 해와야 한다.

 

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

 

위 두줄의 소스를 설명하자면

 

NavigationContainer는 Navigation기능을 하는 component 들을 담아주는 컨테이너 element이다.

View와 비슷하다고 보면된다.

 

그리고 createStackNavigator이라는 것은 뭐냐면 우리가 이제 Stack Navigator 함수를 사용할텐데

이를 생성하기 위한 함수를 불러오기 위한 것이다.

 

위 두개를 import 했다면 이제 각각 다른 화면을 가진 Home.js 파일과 User.js 파일을 만들자.

 

Home.js

import 'react-native-gesture-handler';
import React,{Component} from 'react';
import {View,Text, Button} from 'react-native';


class HomeScreen extends Component{


  render(){

    return(
        <View>
            <Text>Home Screen</Text>
        </View>
    )
  }
}

export default HomeScreen;

 

User.js

import 'react-native-gesture-handler';
import React,{Component} from 'react';
import {View,Text,Button} from 'react-native';


class UserScreen extends Component{

  render(){
    return(
        <View>
            <Text>User Screen</Text>
        </View>
    )
  }
}

export default UserScreen;

 

위 두개의 파일을 마쳤으면 이제 다시 App.js로 가서

해당 파일들을 import 해와야 한다.

 

import HomeScreen from './src/home'
import UserScreen from './src/user'

 

위 두개의 파일들을 설명하자면 <Text> 태그 안에 있는것들을 출력하는 화면이다.

 

 

두 파일을 App.js에서 import 했다면 이제 App.js 안의 소스들을 아래와 같이 수정해보자.

 

 import 'react-native-gesture-handler';
import React,{Component} from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import HomeScreen from './src/home'
import UserScreen from './src/user'


const Stack = createStackNavigator();

class App extends Component{


  render(){
    return(
      <NavigationContainer>
        <Stack.Navigator>
          
          <Stack.Screen 
            name='Home' 
            component={HomeScreen}
          />

          <Stack.Screen 
            name='User' 
            component={UserScreen}
            />

        </Stack.Navigator>
      </NavigationContainer>
    )
  }
}

export default App;

 

위 소스를 설명하자면 App.js에서는 Stack이라는 변수명에 createStackNavigator() 함수를 사용해서

해당 변수에서 Stack Navigator를 사용하게 했고

 

<NavigationContainer>안에 위에서 만든 Stack 변수를 통해서 <Stack.Navigator> 를 만들었고

그 안에 Stack형식의 화면을 <Stack.Screen> 태그로 두개 만들었다.

 

그리고 <Stack.Screen>의 component를 우리가 위에서 import 해온 HomeScreen과 UserScreen으로 설정해서

해당 화면을 등록 시켰고 해당 화면으로 이동시킬때 필요한 name 값을 Home과 User로 설정했다.

 

이제 위처럼 하고 저장해서 실행시키면 아래와 같이 위에 Home이라는 Header가 있는 화면이 만들어진다.

 

 

Home이 먼저 나온 이유는 <Stack.Navigator> 안에서 Home이 위에 있었기 때문이다.

하지만 이건 <Stack.Navigator>안에서 속성 하나면 추가하면 된다.

 

하지만 속성을 추가하기전에 route에 대한 개념에 대해서 알려주겠다.

 

route란

 

react-native-naivigation에선 하나의 화면을(Screen)을 route라고 말한다.

그래서 위의 App.js파일에서는 Stack.Screen이 두개 있으므로 route는 2개가 있는것이고

Home route와 User route 이렇게 두개가 존재한다.

 

그럼 이제 제일 처음으로 나타날 화면을 지정하는 속성은 initialRouteName이라는 속성이다.

해당 속성안에 들어갈 값은 Stack.Screen에서 name값을 지정해주면 된다.

그리고 해당 속성을 <Stack.Navigator>안에 넣어주면 된다.

 

ex)

<Stack.Navigator initialRouteName='Home'>

 

자 그럼 이제 우리가 StackNavigator이라는것을 만들었으니 각각의 화면에서 화면을 이동하게 해줄 버튼을 만들어서

화면 이동을 시켜보자.

 

Home.js

import 'react-native-gesture-handler';
import React,{Component} from 'react';
import {View,Text, Button} from 'react-native';


class HomeScreen extends Component{


  render(){

    return(
        <View>
            <Text>Home Screen</Text>
            <Button
              title="Go to User Screen"
              onPress={() => {
                this.props.navigation.navigate('User')
              }}
            />
        </View>
    )
  }
}

export default HomeScreen;

 

User.js

import 'react-native-gesture-handler';
import React,{Component} from 'react';
import {View,Text,Button} from 'react-native';


class UserScreen extends Component{

  render(){
    return(
        <View>
            <Text>User Screen</Text>
            <Button
              title="Go to Home Screen"
              onPress={() =>{
                this.props.navigation.navigate('Home')
              }}
            />
        </View>
    )
  }
}

export default UserScreen;

 

우리가 위 소스에 대해서 설명을 하자면

<Button>이 onPress될때 name이 Home인곳으로 navigate 된다 즉 이동한다는것이다.

 

this.props.navigation.navigate('Home')에 대해서 자세히 설명을 하자면

 

우리가 prop으로 navigation을 넘기지도 않았는데 navigation안의 navigate 함수를 사용할수 있었던 이유는 

 

App.js에서 Stack이라는 변수에 createStackNavigator(); 를 하게 되면 navigation 을 가지게 되는데

해당 Stack이라는 변수로 Screen을 만들게 되서 저절로 navigation이라는 props를 넘기게 된것이다.

 

그래서 우리가 props로 넘기지 않아도 navigate() 함수를 사용할수 있게 된것이다.

그리고 우리가 navigate() 함수에 Screen name을 넣었던 이유는 해당 함수는 함수인자로 Screen name만 받을수 있기 때문이다.

 

 

 

글을 읽다가 props는 무었이며 =>는 무엇인지 궁금하신 분들은 제가 추후에 ES6(javascript)에 대한 기초를 블로그에

올릴테니 해당 글을 확인해보면 될것 같다.