|
1 | 1 | import { Tabs, usePathname } from "expo-router"; |
2 | | -import { Platform, Text } from "react-native"; |
| 2 | +import { Platform, Text, View } from "react-native"; |
3 | 3 | import { SafeAreaView } from "react-native-safe-area-context"; |
4 | 4 |
|
5 | 5 | import { HapticTab } from "@/components/HapticTab"; |
@@ -29,88 +29,108 @@ export default function TabLayout() { |
29 | 29 | } |
30 | 30 | }; |
31 | 31 |
|
| 32 | + const isHomePage = pathname === ROUTES.HOME; |
| 33 | + const isDetailPage = pathname?.startsWith("/detail/"); |
| 34 | + const isSearchResultsPage = pathname?.startsWith("/search-results"); |
| 35 | + const isSurveyPage = pathname?.startsWith("/survey"); |
| 36 | + |
32 | 37 | return ( |
33 | | - <SafeAreaView className="flex-1 bg-white" edges={["bottom"]}> |
34 | | - <Tabs |
35 | | - screenOptions={{ |
36 | | - headerShown: false, |
37 | | - tabBarButton: HapticTab, |
38 | | - tabBarStyle: { |
39 | | - paddingBottom: 10, |
40 | | - paddingTop: 5, |
41 | | - height: Platform.OS === "ios" ? 60 : 70, |
42 | | - backgroundColor: "white", |
43 | | - borderTopWidth: 0, // 기존 border 제거 |
44 | | - shadowColor: "#575757", |
45 | | - shadowOffset: { width: 0, height: -2 }, |
46 | | - shadowOpacity: 0.05, |
47 | | - shadowRadius: 4, |
48 | | - elevation: 0, // Android에서 그림자 제거 |
49 | | - }, |
50 | | - tabBarIconStyle: { |
51 | | - marginBottom: 3, |
52 | | - }, |
53 | | - tabBarLabelStyle: { |
54 | | - fontSize: 11, |
55 | | - }, |
56 | | - tabBarActiveTintColor: TabColors.active, |
57 | | - tabBarInactiveTintColor: TabColors.inactive, |
| 38 | + <> |
| 39 | + <SafeAreaView |
| 40 | + className="flex-1" |
| 41 | + style={{ |
| 42 | + backgroundColor: |
| 43 | + isHomePage || isDetailPage || isSearchResultsPage || isSurveyPage |
| 44 | + ? "#816BFF" |
| 45 | + : "#FFFFFF", |
58 | 46 | }} |
| 47 | + edges={["top"]} |
59 | 48 | > |
60 | | - {TAB_SCREENS.map((screen) => { |
61 | | - // 일반 탭 처리 |
62 | | - return ( |
63 | | - <Tabs.Screen |
64 | | - key={screen.name} |
65 | | - name={screen.name} |
66 | | - options={{ |
67 | | - title: screen.title, |
68 | | - tabBarIcon: ({ size }) => { |
69 | | - const isActive = isTabActive(screen); |
70 | | - const color = isActive |
71 | | - ? TabColors.active |
72 | | - : TabColors.inactive; |
73 | | - const iconSize = 28; // 아이콘 크기를 28로 고정 |
| 49 | + <View className="flex-1"> |
| 50 | + <Tabs |
| 51 | + screenOptions={{ |
| 52 | + headerShown: false, |
| 53 | + tabBarButton: HapticTab, |
| 54 | + tabBarStyle: { |
| 55 | + paddingBottom: 10, |
| 56 | + paddingTop: 5, |
| 57 | + height: Platform.OS === "ios" ? 60 : 70, |
| 58 | + backgroundColor: "white", |
| 59 | + borderTopWidth: 0, // 기존 border 제거 |
| 60 | + shadowColor: "#575757", |
| 61 | + shadowOffset: { width: 0, height: -2 }, |
| 62 | + shadowOpacity: 0.05, |
| 63 | + shadowRadius: 4, |
| 64 | + elevation: 0, // Android에서 그림자 제거 |
| 65 | + }, |
| 66 | + tabBarIconStyle: { |
| 67 | + marginBottom: 3, |
| 68 | + }, |
| 69 | + tabBarLabelStyle: { |
| 70 | + fontSize: 11, |
| 71 | + }, |
| 72 | + tabBarActiveTintColor: TabColors.active, |
| 73 | + tabBarInactiveTintColor: TabColors.inactive, |
| 74 | + }} |
| 75 | + > |
| 76 | + {TAB_SCREENS.map((screen) => { |
| 77 | + // 일반 탭 처리 |
| 78 | + return ( |
| 79 | + <Tabs.Screen |
| 80 | + key={screen.name} |
| 81 | + name={screen.name} |
| 82 | + options={{ |
| 83 | + title: screen.title, |
| 84 | + tabBarIcon: ({ size }) => { |
| 85 | + const isActive = isTabActive(screen); |
| 86 | + const color = isActive |
| 87 | + ? TabColors.active |
| 88 | + : TabColors.inactive; |
| 89 | + const iconSize = 28; // 아이콘 크기를 28로 고정 |
74 | 90 |
|
75 | | - // 홈, 일정, 마이페이지 아이콘의 경우 isActive prop 추가 |
76 | | - if ( |
77 | | - screen.name === "index" || |
78 | | - screen.name === "schedule" || |
79 | | - screen.name === "mypage" |
80 | | - ) { |
81 | | - return ( |
82 | | - <screen.Icon |
83 | | - color={color} |
84 | | - size={iconSize} |
85 | | - isActive={isActive} |
86 | | - /> |
87 | | - ); |
88 | | - } |
| 91 | + // 홈, 검색, 일정, 마이페이지 아이콘의 경우 isActive prop 추가 |
| 92 | + if ( |
| 93 | + screen.name === "index" || |
| 94 | + screen.name === "search_tab" || |
| 95 | + screen.name === "schedule" || |
| 96 | + screen.name === "mypage" |
| 97 | + ) { |
| 98 | + return ( |
| 99 | + <screen.Icon |
| 100 | + color={color} |
| 101 | + size={iconSize} |
| 102 | + isActive={isActive} |
| 103 | + /> |
| 104 | + ); |
| 105 | + } |
89 | 106 |
|
90 | | - return <screen.Icon color={color} size={iconSize} />; |
91 | | - }, |
92 | | - tabBarLabel: ({ focused }) => { |
93 | | - const isActive = isTabActive(screen); |
94 | | - const color = isActive |
95 | | - ? TabColors.active |
96 | | - : TabColors.inactiveText; |
97 | | - return ( |
98 | | - <Text |
99 | | - style={{ |
100 | | - fontSize: 11, |
101 | | - color: color, |
102 | | - lineHeight: 11, // 웹 렌더링 호환성을 위한 설정 |
103 | | - }} |
104 | | - > |
105 | | - {screen.title} |
106 | | - </Text> |
107 | | - ); |
108 | | - }, |
109 | | - }} |
110 | | - /> |
111 | | - ); |
112 | | - })} |
113 | | - </Tabs> |
114 | | - </SafeAreaView> |
| 107 | + return <screen.Icon color={color} size={iconSize} />; |
| 108 | + }, |
| 109 | + tabBarLabel: ({ focused }) => { |
| 110 | + const isActive = isTabActive(screen); |
| 111 | + const color = isActive |
| 112 | + ? TabColors.active |
| 113 | + : TabColors.inactiveText; |
| 114 | + return ( |
| 115 | + <Text |
| 116 | + style={{ |
| 117 | + fontSize: 11, |
| 118 | + color: color, |
| 119 | + lineHeight: 11, // 웹 렌더링 호환성을 위한 설정 |
| 120 | + }} |
| 121 | + > |
| 122 | + {screen.title} |
| 123 | + </Text> |
| 124 | + ); |
| 125 | + }, |
| 126 | + }} |
| 127 | + /> |
| 128 | + ); |
| 129 | + })} |
| 130 | + </Tabs> |
| 131 | + </View> |
| 132 | + </SafeAreaView> |
| 133 | + <SafeAreaView className="bg-white" edges={["bottom"]} /> |
| 134 | + </> |
115 | 135 | ); |
116 | 136 | } |
0 commit comments