1import React, {useState} from 'react'; 2import {Text} from 'react-native'; 3import rpx, {vw} from '@/utils/rpx'; 4import {TabBar, TabView} from 'react-native-tab-view'; 5import PluginManager from '@/core/pluginManager'; 6import {fontWeightConst} from '@/constants/uiConst'; 7import SheetBody from './sheetBody'; 8import useColors from '@/hooks/useColors'; 9import NoPlugin from '@/components/base/noPlugin'; 10 11export default function Body() { 12 const [index, setIndex] = useState(0); 13 const colors = useColors(); 14 const routes = PluginManager.getSortedRecommendSheetablePlugins().map( 15 _ => ({ 16 key: _.hash, 17 title: _.name, 18 }), 19 ); 20 21 const renderTabBar = (_: any) => ( 22 <TabBar 23 {..._} 24 scrollEnabled 25 style={{ 26 backgroundColor: 'transparent', 27 shadowColor: 'transparent', 28 borderColor: 'transparent', 29 }} 30 tabStyle={{ 31 width: 'auto', 32 }} 33 pressColor="transparent" 34 inactiveColor={colors.text} 35 activeColor={colors.primary} 36 renderLabel={({route, focused, color}) => ( 37 <Text 38 numberOfLines={1} 39 style={{ 40 width: rpx(160), 41 fontWeight: focused 42 ? fontWeightConst.bolder 43 : fontWeightConst.medium, 44 color, 45 textAlign: 'center', 46 }}> 47 {route.title ?? '(未命名)'} 48 </Text> 49 )} 50 indicatorStyle={{ 51 backgroundColor: colors.primary, 52 height: rpx(4), 53 }} 54 /> 55 ); 56 57 if (!routes?.length) { 58 return <NoPlugin notSupportType="推荐歌单" />; 59 } 60 return ( 61 <TabView 62 lazy 63 navigationState={{ 64 index, 65 routes, 66 }} 67 renderTabBar={renderTabBar} 68 renderScene={props => { 69 return <SheetBody hash={props.route.key} />; 70 }} 71 onIndexChange={setIndex} 72 initialLayout={{width: vw(100)}} 73 swipeEnabled={false} 74 /> 75 ); 76} 77