diff --git a/package.json b/package.json index 22d10be..5d3f029 100644 --- a/package.json +++ b/package.json @@ -17,12 +17,14 @@ "axios": "^1.6.3", "react": "18.2.0", "react-native": "0.73.2", + "react-native-collapsible-tab-view": "^6.2.1", "react-native-dotenv": "^3.4.9", "react-native-gesture-handler": "^2.14.0", "react-native-keychain": "^8.1.2", "react-native-pager-view": "^6.2.3", "react-native-reanimated": "^3.6.2", "react-native-safe-area-context": "^4.8.2", + "react-native-safearea-height": "^1.0.6", "react-native-screens": "^3.29.0", "react-native-snap-carousel": "git+https://github.com/SJ-Kwak/react-native-snap-carousel.git", "react-native-svg": "^14.1.0", diff --git a/src/assets/common/Arrow.svg b/src/assets/common/Arrow.svg index aa938a0..b9bd8b7 100644 --- a/src/assets/common/Arrow.svg +++ b/src/assets/common/Arrow.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/src/components/Home/Market/DetailPage.tsx b/src/components/Home/Market/DetailPage.tsx index 18c1bc5..24af30b 100644 --- a/src/components/Home/Market/DetailPage.tsx +++ b/src/components/Home/Market/DetailPage.tsx @@ -57,7 +57,7 @@ const DetailPageMainScreen = ({ navigation }: StackScreenProps { navigation.goBack(); }}> - + { ] return ( - { return ( @@ -23,7 +24,8 @@ const InfoPage = () => { {item.data} ) - } } + }} + keyExtractor={(item, index) => index.toString()} /> ) } diff --git a/src/components/Home/Market/MarketTabView.tsx b/src/components/Home/Market/MarketTabView.tsx index f09aa51..4f1d022 100644 --- a/src/components/Home/Market/MarketTabView.tsx +++ b/src/components/Home/Market/MarketTabView.tsx @@ -1,7 +1,8 @@ -import { useState } from 'react'; -import { SafeAreaView, ScrollView, View, FlatList, Text, TouchableOpacity, useWindowDimensions } from 'react-native'; +import React, { useState } from 'react'; +import { SafeAreaView, ScrollView, View, FlatList, Text, TouchableOpacity, Image, ImageBackground } from 'react-native'; import styled from 'styled-components/native'; -import { TabView, TabBar, SceneMap } from "react-native-tab-view"; +import { Tabs, MaterialTabBar } from 'react-native-collapsible-tab-view'; +import { getStatusBarHeight } from 'react-native-safearea-height'; import { Title20B, Body14R, Caption11M } from '../../../styles/GlobalText.tsx'; import { StackScreenProps } from '@react-navigation/stack'; @@ -14,11 +15,23 @@ import Footer from '../../../common/Footer.tsx'; import Arrow from '../../../assets/common/Arrow.svg'; import Hashtag from '../../../common/Hashtag.tsx'; -const ProfileSection = () => { +const ProfileSection = ({ navigation }: {navigation: any}) => { const filter = ['스포티', '영캐주얼', '깔끔'] return ( - + navigation.goBack()}> + + + + + + 이하늘의 마켓 안녕하세요 리폼러 이하늘입니다! @@ -48,44 +61,27 @@ const ReviewPage = () => { ) } +const statusBarHeight = getStatusBarHeight(true); + const MarketTabView = ({ navigation, route } : StackScreenProps) => { - const layout = useWindowDimensions(); - const [index, setIndex] = useState(0); const [routes] = useState([ { key: 'info', title: '정보'}, { key: 'product', title: '상품' }, { key: 'review', title: '리뷰' } ]); - const renderScene = ({ route }: any) => { - switch (route.key) { - case 'info': - return ; - case 'product': - return ; - case 'review': - return ; - } - } - return ( - - navigation.goBack()}> - - - - + } + headerContainerStyle={{ + shadowOpacity: 0, + borderBottomWidth: 1, + borderColor: '#D9D9D9' + }} renderTabBar={props => ( - )} - /> + > + {routes.map(route => + ( + {route.key === 'info' && } + {route.key === 'product' && } + {route.key === 'review' && } + ) + )} +