feat: stack 과 bottom tab 이용하여 페이지 이동 구현 #1 #6

App.js

@@ -1,23 +1,15 @@
-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
 import { QueryClientProvider, QueryClient } from 'react-query';
+import { NavigationContainer } from '@react-navigation/native';
+import Root from './src/Navigations/Root';
 
 const queryClient = new QueryClient();
 
 export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
-      {/* <Router>
-      </Router> */}
+      <NavigationContainer>
+        <Root />
+      </NavigationContainer>
     </QueryClientProvider>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

src/Navigations/Root.js

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

src/Navigations/Stacks.js

@@ -0,0 +1,17 @@
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+import { SignupPage, LoginPage, EditPage } from '../screen/Index';
+
+const Stack = createNativeStackNavigator();
+
+const Stacks = () => {
+  return (
+    <Stack.Navigator initialRouteName="로그인">
+      <Stack.Screen name="회원가입" component={SignupPage} />
+      <Stack.Screen name="로그인" component={LoginPage} />
+      <Stack.Screen name="수정 페이지" component={EditPage} />
+    </Stack.Navigator>
+  );
+};
+
+export default Stacks;

src/Navigations/Tabs.js

@@ -0,0 +1,44 @@
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { MyPage, MainPage } from '../screen/Index';
+import { Entypo } from '@expo/vector-icons';
+import { FontAwesome } from '@expo/vector-icons';
+
+const Tab = createBottomTabNavigator();
+
+const Tabs = () => {
+  return (
+    <Tab.Navigator>
+      <Tab.Screen
+        options={{
+          headerTitleAlign: 'center',
+          tabBarShowLabel: false,
+          tabBarIcon: ({ focused }) =>
+            focused ? (
+              <Entypo name="home" size={25} color="black" />
+            ) : (
+              <Entypo name="home" size={25} color="lightgrey" />
+            ),
+        }}
+        name="메인 페이지"
+        component={MainPage}
+      />
+
+      <Tab.Screen
+        options={{
+          headerTitleAlign: 'center',
+          tabBarShowLabel: false,
+          tabBarIcon: ({ focused }) =>
+            focused ? (
+              <FontAwesome name="list-ul" size={23} color="black" />
+            ) : (
+              <FontAwesome name="list-ul" size={23} color="lightgrey" />
+            ),
+        }}
+        name="마이 페이지"
+        component={MyPage}
+      />
+    </Tab.Navigator>
+  );
+};
+
+export default Tabs;

src/screen/EditPage.jsx

@@ -0,0 +1,15 @@
+import { View, Text, TouchableOpacity } from 'react-native';
+
+const EditPage = ({ navigation: { navigate } }) => {
+  return (
+    <View>
+      <TouchableOpacity
+        onPress={() => navigate('Tabs', { screen: '마이 페이지' })}
+      >
+        <Text>마이 페이지로</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default EditPage;

src/screen/Index.js

@@ -0,0 +1,7 @@
+import SignupPage from './SignupPage';
+import MyPage from './MyPage';
+import MainPage from './MainPage';
+import LoginPage from './LoginPage';
+import EditPage from './EditPage';
+
+export { SignupPage, MyPage, MainPage, LoginPage, EditPage };

src/screen/LoginPage.jsx

@@ -0,0 +1,18 @@
+import { TouchableOpacity, View, Text } from 'react-native';
+
+const LoginPage = ({ navigation: { navigate } }) => {
+  return (
+    <View>
+      <TouchableOpacity
+        onPress={() => navigate('Tabs', { screen: '메인 페이지' })}
+      >
+        <Text>로그인</Text>
+      </TouchableOpacity>
+      <TouchableOpacity onPress={() => navigate('회원가입')}>
+        <Text>회원가입</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default LoginPage;

src/screen/MainPage.jsx

@@ -0,0 +1,15 @@
+import { View, Text, TouchableOpacity } from 'react-native';
+
+const MainPage = ({ navigation: { navigate } }) => {
+  return (
+    <View>
+      <TouchableOpacity
+        onPress={() => navigate('Stacks', { screen: '로그인' })}
+      >
+        <Text>로그아웃</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default MainPage;

src/screen/MyPage.jsx

@@ -0,0 +1,21 @@
+import { View, Text, TouchableOpacity } from 'react-native';
+
+const MyPage = ({ navigation: { navigate } }) => {
+  return (
+    <View>
+      <TouchableOpacity
+        onPress={() => navigate('Stacks', { screen: '수정 페이지' })}
+      >
+        <Text>수정 페이지로</Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity
+        onPress={() => navigate('Stacks', { screen: '로그인' })}
+      >
+        <Text>로그아웃</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default MyPage;

src/screen/SignupPage.jsx

@@ -0,0 +1,18 @@
+import { View, Text, TouchableOpacity } from 'react-native';
+
+const SignupPage = ({ navigation: { navigate } }) => {
+  return (
+    <View>
+      <TouchableOpacity
+        onPress={() => navigate('Tabs', { screen: '메인 페이지' })}
+      >
+        <Text>회원가입</Text>
+      </TouchableOpacity>
+      <TouchableOpacity onPress={() => navigate('로그인')}>
+        <Text>로그인 페이지로</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default SignupPage;