1import React, {useEffect, useState} from 'react'; 2import {StyleSheet, Text, View} from 'react-native'; 3import rpx from '@/utils/rpx'; 4import {SceneMap, TabBar, TabView} from 'react-native-tab-view'; 5import {usePlugins} from '@/common/pluginManager'; 6import MusicResults from './results/musicResults'; 7import AlbumResults from './results/albumResults'; 8import DefaultResults from './results/defaultResults'; 9import {renderMap} from './results'; 10import ResultWrapper from './resultWrapper'; 11import { fontWeightConst } from '@/constants/uiConst'; 12 13interface IResultSubPanelProps { 14 tab: ICommon.SupportMediaType; 15} 16 17function useSubtabRoutes() { 18 const plugins = usePlugins(); 19 const [routes, setRoutes] = useState<Array<{key: string; title: string}>>([]); 20 21 useEffect(() => { 22 setRoutes( 23 [ 24 { 25 key: 'all', 26 title: '全部', 27 }, 28 ].concat( 29 plugins.map(_ => ({ 30 key: _.hash, 31 title: _.instance.platform, 32 })), 33 ), 34 ); 35 }, [plugins]); 36 return routes; 37} 38 39// 展示结果的视图 40function getResultComponent(tab: ICommon.SupportMediaType, subTab: string) { 41 return tab in renderMap 42 ? () => { 43 return <ResultWrapper tab={tab} platform={subTab}></ResultWrapper>; 44 } 45 : () => <DefaultResults></DefaultResults>; 46} 47 48/** 结果scene */ 49function getSubRouterScene( 50 tab: ICommon.SupportMediaType, 51 routes: Array<{key: string; title: string}>, 52) { 53 const scene: Record<string, () => JSX.Element> = {}; 54 routes.forEach(r => { 55 scene[r.key] = getResultComponent(tab, r.key); 56 }); 57 return SceneMap(scene); 58} 59 60export default function ResultSubPanel(props: IResultSubPanelProps) { 61 const [index, setIndex] = useState(0); 62 const routes = useSubtabRoutes(); 63 return ( 64 <TabView 65 navigationState={{ 66 index, 67 routes, 68 }} 69 renderTabBar={props => ( 70 <TabBar 71 {...props} 72 style={{ 73 backgroundColor: 'transparent', 74 shadowColor: 'transparent', 75 borderColor: 'transparent', 76 }} 77 tabStyle={{ 78 width: rpx(128), 79 }} 80 renderIndicator={() => null} 81 pressColor="transparent" 82 renderLabel={({route, focused, color}) => ( 83 <Text 84 style={{ 85 fontWeight: focused ? fontWeightConst.bolder : fontWeightConst.bold, 86 color, 87 }}> 88 {route.title ?? '(未命名)'} 89 </Text> 90 )}></TabBar> 91 )} 92 renderScene={getSubRouterScene(props.tab, routes)} 93 onIndexChange={setIndex} 94 initialLayout={{width: rpx(750)}}></TabView> 95 ); 96} 97