Main

App.js

@@ -1,20 +0,0 @@
-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
-
-export default function App() {
-  return (
-    <View style={styles.container}>
-      <Text>Open up App.js to start working on your app!</Text>
-      <StatusBar style="auto" />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

app.json

@@ -1,22 +1,38 @@
 {
   "expo": {
+<<<<<<< HEAD
+    "name": "movie-rn-lecture-practical",
+    "slug": "movie-rn-lecture-practical",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+=======
     "name": "rn-lecture-practical",
     "slug": "rn-lecture-practical",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
-    "userInterfaceStyle": "light",
+    "userInterfaceStyle": "automatic",
+>>>>>>> 25c96514defe8f4b0554682b82f275e84459901b
     "splash": {
       "image": "./assets/splash.png",
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
     "updates": {
-      "fallbackToCacheTimeout": 0
+<<<<<<< HEAD
+      "fallbackToCacheTimeout": 0,
+      "url": "https://u.expo.dev/701e7a89-679e-4429-9df4-541c95bafac2"
     },
     "assetBundlePatterns": [
       "**/*"
     ],
+=======
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": ["**/*"],
+>>>>>>> 25c96514defe8f4b0554682b82f275e84459901b
     "ios": {
       "supportsTablet": true
     },
@@ -28,6 +44,17 @@
     },
     "web": {
       "favicon": "./assets/favicon.png"
+<<<<<<< HEAD
+    },
+    "extra": {
+      "eas": {
+        "projectId": "701e7a89-679e-4429-9df4-541c95bafac2"
+      }
+    },
+    "runtimeVersion": {
+      "policy": "sdkVersion"
+=======
+>>>>>>> 25c96514defe8f4b0554682b82f275e84459901b
     }
   }
 }

colors.js

@@ -0,0 +1,4 @@
+export const YELLOW_COLOR = "#fbc531";
+export const GREEN_COLOR = "#4cd137";
+export const DARK_COLOR = "#485460";
+export const GREY_COLOR = "#f1f2f6";

navigation/Root.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import { Text, TouchableOpacity } from "react-native";
+import Stacks from "./Stacks";
+import Tabs from "./Tabs";
+
+const Stack = createNativeStackNavigator();
+
+export default function Root() {
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        headerShown: false,
+      }}
+    >
+      <Stack.Screen name="Tabs" component={Tabs} />
+      <Stack.Screen name="Stacks" component={Stacks} />
+    </Stack.Navigator>
+  );
+}

navigation/Stacks.js

@@ -0,0 +1,72 @@
+import React from "react";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import { Text, TouchableOpacity } from "react-native";
+
+const Stack = createNativeStackNavigator();
+
+const One = ({ route: { params }, navigation: { navigate } }) => {
+  return (
+    <TouchableOpacity onPress={() => navigate("two")}>
+      <Text>One</Text>
+    </TouchableOpacity>
+  );
+};
+
+const Two = ({ navigation: { navigate, setOptions } }) => {
+  return (
+    <>
+      <TouchableOpacity onPress={() => navigate("three")}>
+        <Text>Two</Text>
+      </TouchableOpacity>
+      <TouchableOpacity
+        onPress={() =>
+          setOptions({
+            title: "변경된 제목!",
+          })
+        }
+      >
+        <Text>Set Options</Text>
+      </TouchableOpacity>
+    </>
+  );
+};
+
+const Three = ({ navigation: { goBack, reset } }) => {
+  return (
+    <>
+      <TouchableOpacity onPress={() => goBack()}>
+        <Text>Three</Text>
+      </TouchableOpacity>
+      <TouchableOpacity
+        onPress={() =>
+          reset({
+            index: 1,
+            routes: [{ name: "three" }, { name: "two" }],
+          })
+        }
+      >
+        <Text>Reset Navigation</Text>
+      </TouchableOpacity>
+    </>
+  );
+};
+
+export default function Stacks() {
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        headerTintColor: "red",
+      }}
+    >
+      <Stack.Screen name="one" component={One} />
+      <Stack.Screen name="two" component={Two} />
+      <Stack.Screen
+        options={{
+          presentation: "modal",
+        }}
+        name="three"
+        component={Three}
+      />
+    </Stack.Navigator>
+  );
+}

navigation/Tabs.js

@@ -0,0 +1,51 @@
+import React from "react";
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import Movies from "../screen/Movies";
+import My from "../screen/My";
+import { MaterialIcons } from "@expo/vector-icons";
+import { Foundation } from "@expo/vector-icons";
+import { useColorScheme } from "react-native";
+import { DARK_COLOR, GREEN_COLOR, GREY_COLOR, YELLOW_COLOR } from "../colors";
+
+const Tab = createBottomTabNavigator();
+
+export default function Tabs() {
+  const isDark = useColorScheme() === "dark";
+
+  return (
+    <Tab.Navigator
+      screenOptions={{
+        tabBarLabelPosition: "beside-icon",
+        tabBarActiveTintColor: isDark ? YELLOW_COLOR : GREEN_COLOR,
+        headerTintColor: isDark ? YELLOW_COLOR : GREEN_COLOR,
+      }}
+      sceneContainerStyle={{
+        backgroundColor: isDark ? DARK_COLOR : GREY_COLOR,
+      }}
+    >
+      <Tab.Screen
+        options={{
+          title: "영화",
+          headerTitleAlign: "center",
+          tabBarLabel: "Movies",
+          tabBarIcon: ({ color, size }) => (
+            <MaterialIcons name="local-movies" size={size} color={color} />
+          ),
+        }}
+        name="Movies"
+        component={Movies}
+      />
+      <Tab.Screen
+        options={{
+          title: "내가 작성한 댓글",
+          tabBarLabel: "My",
+          tabBarIcon: ({ color, size }) => (
+            <Foundation name="social-myspace" size={size} color={color} />
+          ),
+        }}
+        name="My"
+        component={My}
+      />
+    </Tab.Navigator>
+  );
+}