1import React, {useState} from 'react'; 2import {StyleSheet, Text} from 'react-native'; 3import rpx from '@/utils/rpx'; 4import {SceneMap, TabBar, TabView} from 'react-native-tab-view'; 5import {fontWeightConst} from '@/constants/uiConst'; 6import ResultList from './resultList'; 7import {useAtomValue} from 'jotai'; 8import {queryResultAtom} from '../store/atoms'; 9import content from './content'; 10 11const sceneMap: Record<string, React.FC> = { 12 album: BodyContentWrapper, 13 music: BodyContentWrapper, 14}; 15 16const routes = [ 17 { 18 key: 'music', 19 title: '单曲', 20 }, 21 { 22 key: 'album', 23 title: '专辑', 24 }, 25]; 26 27export default function Body() { 28 const [index, setIndex] = useState(0); 29 30 return ( 31 <TabView 32 lazy 33 style={style.wrapper} 34 navigationState={{ 35 index, 36 routes, 37 }} 38 renderTabBar={props => ( 39 <TabBar 40 {...props} 41 style={style.transparentColor} 42 tabStyle={{ 43 width: rpx(200), 44 }} 45 renderIndicator={() => null} 46 pressColor="transparent" 47 renderLabel={({route, focused, color}) => ( 48 <Text 49 numberOfLines={1} 50 style={{ 51 fontWeight: focused 52 ? fontWeightConst.bolder 53 : fontWeightConst.bold, 54 color, 55 }}> 56 {route.title} 57 </Text> 58 )} 59 /> 60 )} 61 renderScene={SceneMap(sceneMap)} 62 onIndexChange={setIndex} 63 initialLayout={{width: rpx(750)}} 64 /> 65 ); 66} 67 68export function BodyContentWrapper(props: any) { 69 const tab: IArtist.ArtistMediaType = props.route.key; 70 const queryResult = useAtomValue(queryResultAtom); 71 72 const Component = content[tab]; 73 const renderItem = ({item, index}: any) => ( 74 <Component item={item} index={index} /> 75 ); 76 77 return ( 78 <ResultList tab={tab} data={queryResult[tab]} renderItem={renderItem} /> 79 ); 80} 81 82const style = StyleSheet.create({ 83 wrapper: { 84 zIndex: 100, 85 }, 86 transparentColor: { 87 backgroundColor: 'transparent', 88 shadowColor: 'transparent', 89 borderColor: 'transparent', 90 }, 91}); 92