[React Native] Stack navigation 사용하기 (2019년 기준)

React 목록

react-navigation 설치

$ npm install react-navigation
$ npm install react-native-gesture-handler
$ react-native link react-native-gesture-handler

 

xCode는 react-native-gesture-hanlder를 manual로 설정해줘야 합니다.

xCode에서 Libraries에서 마우스 오른쪽 클릭 > Add Files to <Project Name>

/node_modules/react-native-gesture-handler/ios/RNGestureHandler.xcodeproj 선택하고 Add합니다.

 

프로젝트를 선택하고 Build Phases > Link Binary With Libraries (+) 아이콘을 클릭합니다.

 

libRNGestureHandler.a를 선택하고 Add 버튼을 누릅니다.

 

 

화면 코딩

App.js

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
import { createAppContainer, createStackNavigator } from 'react-navigation'

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

class DetailsScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Details Screen</Text>
                <Button
                    title="Go to Details... again"
                    onPress={() => this.props.navigation.push('Details')}
                />
                <Button
                    title="Go to Home"
                    onPress={() => this.props.navigation.navigate('Home')}
                />
                <Button
                    title="Go back"
                    onPress={() => this.props.navigation.goBack()}
                />
            </View>
        );
    }
}

const RootStack = createStackNavigator(
    {
        Home: {
            screen: HomeScreen,
        },
        Details: {
            screen: DetailsScreen,
        },
    },
    {
        initialRouteName: 'Home',
    }
);

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {
    render() {
        return <AppContainer />;
    }
}

 

iOS App Build

$ react-native run-ios

 

Android App Build

$ react-native run-android

 

React 목록