1import React, {memo, useState} from 'react'; 2import {StyleSheet, View} from 'react-native'; 3import rpx from '@/utils/rpx'; 4import globalStyle from '@/constants/globalStyle'; 5import {ScrollView} from 'react-native-gesture-handler'; 6import TypeTag from '../../../../components/base/typeTag'; 7 8import useRecommendList from '../../hooks/useRecommendListTags'; 9import SheetList from './sheetList'; 10import {hidePanel, showPanel} from '@/components/panels/usePanel'; 11 12interface IProps { 13 hash: string; 14} 15 16const defaultTag: ICommon.IUnique = { 17 title: '默认', 18 id: '', 19}; 20function SheetBody(props: IProps) { 21 const {hash} = props; 22 23 // 选中的tag 24 const [selectedTag, setSelectedTag] = useState<ICommon.IUnique>(defaultTag); 25 26 // 第一个tag 27 const [firstTag, setFirstTag] = useState<ICommon.IUnique>(defaultTag); 28 29 // 所有tag 30 const tags = useRecommendList(hash); 31 32 return ( 33 <View style={globalStyle.fwflex1}> 34 <ScrollView 35 style={style.headerWrapper} 36 contentContainerStyle={style.header} 37 showsHorizontalScrollIndicator={false} 38 horizontal> 39 <TypeTag 40 title={firstTag.title} 41 selected={selectedTag.id === firstTag.id} 42 onPress={() => { 43 // 拉起浮层 44 showPanel('SheetTags', { 45 tags: tags?.data ?? [], 46 onTagPressed(tag) { 47 setSelectedTag(tag); 48 setFirstTag(tag); 49 hidePanel(); 50 }, 51 }); 52 }} 53 /> 54 {(tags?.pinned ?? []).map(_ => ( 55 <TypeTag 56 key={`pinned-${_.id}`} 57 title={_?.title ?? ''} 58 selected={selectedTag.id === _.id} 59 onPress={() => { 60 setSelectedTag(_); 61 }} 62 /> 63 ))} 64 </ScrollView> 65 <SheetList tag={selectedTag} pluginHash={hash} /> 66 </View> 67 ); 68} 69 70export default memo(SheetBody, (prev, curr) => prev.hash === curr.hash); 71 72const style = StyleSheet.create({ 73 headerWrapper: { 74 height: rpx(100), 75 flexGrow: 0, 76 }, 77 header: { 78 height: rpx(100), 79 alignItems: 'center', 80 }, 81}); 82