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'; 9 10export default function TopListBody() { 11 const routes = PluginManager.getSortedTopListsablePlugins().map(_ => ({ 12 key: _.hash, 13 title: _.name, 14 })); 15 const [index, setIndex] = useState(0); 16 const colors = useColors(); 17 18 const renderScene = useCallback( 19 (props: {route: {key: string}}) => ( 20 <BoardPanelWrapper hash={props?.route?.key} /> 21 ), 22 [], 23 ); 24 25 return ( 26 <TabView 27 lazy 28 navigationState={{ 29 index, 30 routes, 31 }} 32 renderTabBar={props => ( 33 <TabBar 34 {...props} 35 style={{ 36 backgroundColor: colors.backdrop, 37 shadowColor: 'transparent', 38 borderColor: 'transparent', 39 }} 40 tabStyle={{ 41 width: rpx(200), 42 }} 43 scrollEnabled 44 inactiveColor={colors.text} 45 activeColor={colors.primary} 46 renderLabel={({route, focused, color}) => ( 47 <Text 48 numberOfLines={1} 49 style={{ 50 fontWeight: focused 51 ? fontWeightConst.bolder 52 : fontWeightConst.medium, 53 color, 54 }}> 55 {route.title} 56 </Text> 57 )} 58 indicatorStyle={{ 59 backgroundColor: colors.primary, 60 height: rpx(4), 61 }} 62 /> 63 )} 64 style={{ 65 backgroundColor: colors.background, 66 }} 67 renderScene={renderScene} 68 onIndexChange={setIndex} 69 initialLayout={{width: rpx(750)}} 70 /> 71 ); 72} 73