TODO List 앱 만들기(3) - Navigation 기능 및 스타일 처리

[주인장]

App.js 

import { NavigationContainer } from "@react-navigation/native";

import { createNativeStackNavigator } from "@react-navigation/native-stack";

import DiaryScreen from "./screens/DiaryScreen";

import HomeScreen from "./screens/HomeScreen";

import TodoListScreen from "./screens/TodoListScreen";

import { StatusBar } from "expo-status-bar";

import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";

import { StyleSheet } from "react-native";

import THEME from "./constants/theme";

// 스택 네비게이터를 생성합니다.

const Stack = createNativeStackNavigator();

export default function App() {

    return (

        <SafeAreaProvider>            

            <StatusBar style="light" backgroundColor={THEME.headerBg} />

            <NavigationContainer>

                <Stack.Navigator

                    initialRouteName="Home"

                    screenOptions={{

                        headerStyle: {

                            backgroundColor: THEME.headerBg,

                            elevation: 0,

                            shadowOpacity: 0,                            

                        },

                        headerTintColor: THEME.textOnPrimary,

                        headerTitleStyle: {

                            fontSize: THEME.fontSize.md,

                            fontWeight: "600",

                        },

                        contentStyle: {

                            backgroundColor: THEME.screenBg,

                        },

                        headerStatusBarHeight: 0,

                        headerShadowVisible: false,

                    }}

                >

                    <Stack.Screen

                        name="Home"

                        component={HomeScreen}

                        options={{ title: "홈" }}

                    />

                    <Stack.Screen

                        name="TodoList"

                        component={TodoListScreen}

                        options={{ title: "할 일 목록" }}

                    />

                    <Stack.Screen

                        name="Diary"

                        component={DiaryScreen}

                        options={{ title: "일기" }}

                    />

                </Stack.Navigator>

            </NavigationContainer>

        </SafeAreaProvider>

    );

}

const styles = StyleSheet.create({

    container: {

        flex: 1,

    },

});

HomeScreen.js

import PropTypes from "prop-types";

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

import { SafeAreaView } from "react-native-safe-area-context";

import THEME from "../constants/theme";

const HomeScreen = ({ navigation }) => {

    return (

        <SafeAreaView style={styles.container}>

            <Text style={styles.title}>My App</Text>

            <View style={styles.menuContainer}>

                <TouchableOpacity

                    style={[styles.button, styles.buttonPrimary]}

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

                    activeOpacity={0.8}

                >

                    <Text style={styles.buttonText}>📝 TodoList</Text>

                </TouchableOpacity>

                <TouchableOpacity

                    style={[styles.button, styles.buttonSecondary]}

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

                    activeOpacity={0.8}

                >

                    <Text style={styles.buttonText}>📔 Diary</Text>

                </TouchableOpacity>

            </View>

        </SafeAreaView>

    );

};

const styles = StyleSheet.create({

    container: {

        flex: 1,

        backgroundColor: THEME.screenBg,

        alignItems: "center",

        justifyContent: "center",

        paddingHorizontal: THEME.spacing.lg,

    },

    title: {

        fontSize: THEME.fontSize.xxl,

        fontWeight: "bold",

        color: THEME.textPrimary,

        marginBottom: THEME.spacing.xl,

        letterSpacing: 0.5,

    },

    menuContainer: {

        width: "100%",

        maxWidth: 400,

        alignItems: "center",

        gap: THEME.spacing.md,

    },

    button: {

        paddingVertical: THEME.spacing.xl,

        paddingHorizontal: THEME.spacing.lg,

        borderRadius: THEME.borderRadius.lg,

        width: "100%",

        alignItems: "center",

        shadowColor: THEME.shadowColor,

        shadowOffset: {

            width: 0,

            height: 4,

        },

        shadowOpacity: 0.15,

        shadowRadius: 8,

        elevation: 4,

    },

    buttonPrimary: {

        backgroundColor: THEME.buttonPrimary,

    },

    buttonSecondary: {

        backgroundColor: THEME.buttonSecondary,

    },

    buttonText: {

        color: THEME.textOnPrimary,

        fontSize: THEME.fontSize.lg,

        fontWeight: "600",

        letterSpacing: 0.3,

    },

});

HomeScreen.propTypes = {

    navigation: PropTypes.object.isRequired,

};

export default HomeScreen;

TodoListScreen.js

import PropTypes from "prop-types";

import { StyleSheet, Text, TouchableOpacity } from "react-native";

import { SafeAreaView } from "react-native-safe-area-context";

import THEME from "../constants/theme";

const TodoListScreen = ({ navigation }) => {

    return (

        <SafeAreaView style={styles.container}>

            <Text style={styles.text}>Todo List 화면입니다.</Text>

            <TouchableOpacity

                style={styles.button}

                onPress={() => navigation.goBack()}

                activeOpacity={0.8}

            >

                <Text style={styles.buttonText}>홈으로 돌아가기</Text>

            </TouchableOpacity>

        </SafeAreaView>

    );

};

TodoListScreen.propTypes = {

    navigation: PropTypes.shape({

        goBack: PropTypes.func.isRequired,

        navigate: PropTypes.func,

    }).isRequired,

};

const styles = StyleSheet.create({

    container: {

        flex: 1,

        backgroundColor: THEME.screenBg,

        alignItems: "center",

        justifyContent: "center",

        padding: THEME.spacing.lg,

    },

    text: {

        fontSize: THEME.fontSize.xl,

        color: THEME.textPrimary,

        fontWeight: "600",

        marginBottom: THEME.spacing.xl,

    },

    button: {

        backgroundColor: THEME.buttonPrimary,

        paddingVertical: THEME.spacing.md,

        paddingHorizontal: THEME.spacing.xl,

        borderRadius: THEME.borderRadius.md,

        shadowColor: THEME.shadowColor,

        shadowOffset: {

            width: 0,

            height: 2,

        },

        shadowOpacity: 0.1,

        shadowRadius: 4,

        elevation: 3,

    },

    buttonText: {

        color: THEME.textOnPrimary,

        fontSize: THEME.fontSize.md,

        fontWeight: "600",

    },

});

export default TodoListScreen;