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 {showPanel, hidePanel} 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 horizontal> 38 <TypeTag 39 title={firstTag.title} 40 selected={selectedTag.id === firstTag.id} 41 onPress={() => { 42 // 拉起浮层 43 showPanel('SheetTags', { 44 tags: tags?.data ?? [], 45 onTagPressed(tag) { 46 setSelectedTag(tag); 47 setFirstTag(tag); 48 hidePanel(); 49 }, 50 }); 51 }} 52 /> 53 {(tags?.pinned ?? []).map(_ => ( 54 <TypeTag 55 key={`pinned-${_.id}`} 56 title={_.title} 57 selected={selectedTag.id === _.id} 58 onPress={() => { 59 setSelectedTag(_); 60 }} 61 /> 62 ))} 63 </ScrollView> 64 <SheetList tag={selectedTag} pluginHash={hash} /> 65 </View> 66 ); 67} 68 69export default memo(SheetBody, (prev, curr) => prev.hash === curr.hash); 70 71const style = StyleSheet.create({ 72 headerWrapper: { 73 height: rpx(100), 74 flexGrow: 0, 75 }, 76 header: { 77 height: rpx(100), 78 alignItems: 'center', 79 }, 80}); 81