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