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={{ 42 backgroundColor: 'transparent', 43 shadowColor: 'transparent', 44 borderColor: 'transparent', 45 }} 46 tabStyle={{ 47 width: rpx(200), 48 }} 49 renderIndicator={() => null} 50 pressColor="transparent" 51 renderLabel={({route, focused, color}) => ( 52 <Text 53 numberOfLines={1} 54 style={{ 55 fontWeight: focused 56 ? fontWeightConst.bolder 57 : fontWeightConst.bold, 58 color, 59 }}> 60 {route.title} 61 </Text> 62 )} 63 /> 64 )} 65 renderScene={SceneMap(sceneMap)} 66 onIndexChange={setIndex} 67 initialLayout={{width: rpx(750)}} 68 /> 69 ); 70} 71 72export function BodyContentWrapper(props: any) { 73 const tab: IArtist.ArtistMediaType = props.route.key; 74 const queryResult = useAtomValue(queryResultAtom); 75 76 const Component = content[tab]; 77 const renderItem = ({item, index}: any) => ( 78 <Component item={item} index={index} /> 79 ); 80 81 return ( 82 <ResultList tab={tab} data={queryResult[tab]} renderItem={renderItem} /> 83 ); 84} 85 86const style = StyleSheet.create({ 87 wrapper: { 88 zIndex: 100, 89 }, 90}); 91