Merge pull request #31 from dypark26/feature/navigation

feat: 설정 탭 추가 및 헤더 삭제 #1 #6
dypark26 · Jan 12, 2023 · e01e686 · e01e686
2 parents 4261ac6 + 98a505d
commit e01e686
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 15,319 deletions.
diff --git a/src/Navigations/Stacks.js b/src/Navigations/Stacks.js
@@ -6,7 +6,10 @@ const Stack = createNativeStackNavigator();
 
 const Stacks = () => {
   return (
-    <Stack.Navigator initialRouteName="로그인">
+    <Stack.Navigator
+      screenOptions={{ headerShown: false }}
+      initialRouteName="로그인"
+    >
       <Stack.Screen name="회원가입" component={SignupPage} />
       <Stack.Screen name="로그인" component={LoginPage} />
       <Stack.Screen name="수정 페이지" component={EditPage} />

diff --git a/src/Navigations/Tabs.js b/src/Navigations/Tabs.js
@@ -1,17 +1,26 @@
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import { MyPage, MainPage } from '../screen/Index';
+import { SettingPage, MyPage, MainPage } from '../screen/Index';
 import { Entypo } from '@expo/vector-icons';
 import { FontAwesome } from '@expo/vector-icons';
+import { Ionicons } from '@expo/vector-icons';
+import { Text } from 'react-native';
 
 const Tab = createBottomTabNavigator();
 
 const Tabs = () => {
   return (
-    <Tab.Navigator>
+    <Tab.Navigator screenOptions={{ headerShown: false }}>
       <Tab.Screen
         options={{
           headerTitleAlign: 'center',
-          tabBarShowLabel: false,
+          tabBarLabel: ({ focused }) =>
+            focused ? (
+              <Text style={{ fontSize: 10, color: 'black' }}>메인 페이지</Text>
+            ) : (
+              <Text style={{ fontSize: 10, color: 'lightgrey' }}>
+                메인 페이지
+              </Text>
+            ),
           tabBarIcon: ({ focused }) =>
             focused ? (
               <Entypo name="home" size={25} color="black" />
@@ -26,17 +35,44 @@ const Tabs = () => {
       <Tab.Screen
         options={{
           headerTitleAlign: 'center',
-          tabBarShowLabel: false,
+          tabBarLabel: ({ focused }) =>
+            focused ? (
+              <Text style={{ fontSize: 10, color: 'black' }}>필 리스트</Text>
+            ) : (
+              <Text style={{ fontSize: 10, color: 'lightgrey' }}>
+                필 리스트
+              </Text>
+            ),
           tabBarIcon: ({ focused }) =>
             focused ? (
-              <FontAwesome name="list-ul" size={23} color="black" />
+              <FontAwesome name="list-ul" size={24} color="black" />
             ) : (
               <FontAwesome name="list-ul" size={23} color="lightgrey" />
             ),
         }}
-        name="마이 페이지"
+        name="필 리스트"
         component={MyPage}
       />
+
+      <Tab.Screen
+        options={{
+          headerTitleAlign: 'center',
+          tabBarLabel: ({ focused }) =>
+            focused ? (
+              <Text style={{ fontSize: 10, color: 'black' }}>설정</Text>
+            ) : (
+              <Text style={{ fontSize: 10, color: 'lightgrey' }}>설정</Text>
+            ),
+          tabBarIcon: ({ focused }) =>
+            focused ? (
+              <Ionicons name="settings-sharp" size={24} color="black" />
+            ) : (
+              <Ionicons name="settings-sharp" size={24} color="lightgrey" />
+            ),
+        }}
+        name="설정"
+        component={SettingPage}
+      />
     </Tab.Navigator>
   );
 };

diff --git a/src/screen/Index.js b/src/screen/Index.js
@@ -3,5 +3,6 @@ import MyPage from './MyPage';
 import MainPage from './MainPage';
 import LoginPage from './LoginPage';
 import EditPage from './EditPage';
+import SettingPage from './SettingPage';
 
-export { SignupPage, MyPage, MainPage, LoginPage, EditPage };
+export { SignupPage, MyPage, MainPage, LoginPage, EditPage, SettingPage };
diff --git a/src/screen/SettingPage.jsx b/src/screen/SettingPage.jsx
@@ -0,0 +1,13 @@
+import { TextButton } from '../components';
+import { View } from 'react-native';
+
+const SettingPage = () => {
+  return (
+    <View>
+      <TextButton buttonColor="aqua" buttonText="로그아웃" />
+      <TextButton buttonColor="aqua" buttonText="다크 모드" />
+    </View>
+  );
+};
+
+export default SettingPage;