[react-native] react-navigation사용하기

이번에는 react-native 에서 화면이동을 진행하려고한다.

react-native에서 화면 이동은 여러가지 모듈이 있지만, 이 글에서는 facebook에서 만든 navigation을 이용할것이다.

모듈에 대한 설명과 메소드들의 설명은 다음 링크들을 참고하면된다.

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

https://reactnavigation.org/docs/en/stack-navigator.html#stacknavigatorconfig

그럼 이제 본격적으로 navigation 모듈을 설치합니다.

 yarn add react-navigation

그 다음 App.js, First.js, Second.js 총 세개의 파일을 생성해줍니다. 

기본적으로 app.js 가 rootcomponent로 되어있기 때문에 추가적인 설정은 변경하지 않겟습니다.

App.js

import React, {Component} from 'react';

import {createStackNavigator, createAppContainer} from 'react-navigation';

import firstpage from './First';

import secondpage from './Second';

const App = createStackNavigator(

    {

        Home: {screen:firstpage},

        Second: {screen:secondpage}

    },

    {initialRouteName: 'Home', headerMode: 'none'}

);

export default createAppContainer(App);

First.js

import React, {Component} from 'react';

import {View, Text, TouchableOpacity} from 'react-native';

class First extends Component {

    render() {

        const {navigation} = this.props;

        return (

            <View style={{flex: 1, justifyContent: 'center'}}>

                <TouchableOpacity

                        onPress={()=> {navigation.navigate("Second")}}

                >

                    <Text>

                        This is First

                    </Text>

                </TouchableOpacity>

            </View>

        );

    }

}

export default First;

Second.js

import React, {Component} from 'react';

import {Text,View,TouchableOpacity} from 'react-native';

class Second extends Component {

    render() {

        const {navigation} = this.props;

        return (

            <View style={{flex:1,justifyContent: 'center'}} >

                <TouchableOpacity

                        onPress={()=>{

                            navigation.goBack()

                        }}

                >

                    <Text style={{alignItems: 'center'}}>Second Page</Text>

                </TouchableOpacity>

            </View>

        );

    }

}

export default Second;

 

createStackNavigator는 페이지를 Stack에 쌓아두어 이동하는 방법입니다. 

이것은 이전의 페이지를 그대로 유지할 수 있어 navigation의 goBack 메소드를 통해 쉽게 이전페이지로 이동할 수 있

는 장점이 있지만 페이지를 재로딩을 하지는 않습니다. stack에 남겨놓고 싶지 않다면 createSwitchNavigator을 사용

하면 됩니다.

다음은 코드 설명입니다.

App.js 에서

먼저 Home 이라는 이름을 가진 화면을 firstpage 로 정의하고

다음으로는 Second라는 이름을 가진 화면을 secondpage로 정의했습니다.

마지막으로 최초 화면 (initialRouteName) 을 Home 으로 지정했기 때문에 첫 화면에 first.js가 사용자에게 

보여질 수 있습니다.

처음 화면에서 "This is First" 문구를 볼 수 있고, 해당 문구를 누르면 navigator에 지정된 Second Page라는 화면으로 

이동하고, Second Page에서 goBack()을 함으로써 처음 화면으로 이동 하는 것을 볼 수 있습니다.