React Navigation 5 Tutorials

📌 튜토리얼을 따라한 프로젝트입니다!

파일 분리하기

시작하기 전

Details와 Home 파일 나누기

• screens 폴더 생성하기
• HomeScreen.js 파일 생성하기
• DetailsScreen.js 파일 생성하기

HomeScreen.js

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


const HomeScreen = ({navigation}) => {
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>Home Screen</Text>
            <Button
                title="Go to Details screen" 
                onPress={() => navigation.navigate("Details")} />
        </View>
    );
};

export default HomeScreen;

DetailsScreen.js

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

    const DetailsScreen = ({navigation}) => {
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>Details Screen</Text>
            <Button
                title="Go to Details screen Again" 
                onPress={() => navigation.navigate("Details")}/>

            <Button
                title="Go to Home screen" 
                onPress={() => navigation.navigate("Home")}/>

            <Button
                title="Go back" 
                onPress={() => navigation.goBack()}/>

            <Button
                title="Go to the first screen" 
                onPress={() => navigation.popToTop()}/>
        </View>
    );
};

export default DetailsScreen;

app.js에 가져오기

import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';