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'; 7import usePanel from '@/components/panels/usePanel'; 8import useRecommendList from '../../hooks/useRecommendListTags'; 9import SheetList from './sheetList'; 10 11interface IProps { 12 hash: string; 13} 14 15const defaultTag: ICommon.IUnique = { 16 title: '默认', 17 id: '', 18}; 19function SheetBody(props: IProps) { 20 const {hash} = props; 21 22 // 选中的tag 23 const [selectedTag, setSelectedTag] = useState<ICommon.IUnique>(defaultTag); 24 25 // 第一个tag 26 const [firstTag, setFirstTag] = useState<ICommon.IUnique>(defaultTag); 27 28 // 所有tag 29 const tags = useRecommendList(hash); 30 31 const {showPanel, hidePanel} = usePanel(); 32 33 return ( 34 <View style={globalStyle.fwflex1}> 35 <ScrollView 36 style={style.headerWrapper} 37 contentContainerStyle={style.header} 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