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