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