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: 'transparent', 37 shadowColor: 'transparent', 38 borderColor: 'transparent', 39 }} 40 tabStyle={{ 41 width: 'auto', 42 }} 43 scrollEnabled 44 inactiveColor={colors.text} 45 activeColor={colors.primary} 46 renderLabel={({route, focused, color}) => ( 47 <Text 48 numberOfLines={1} 49 style={{ 50 width: rpx(160), 51 fontWeight: focused 52 ? fontWeightConst.bolder 53 : fontWeightConst.medium, 54 color, 55 textAlign: 'center', 56 }}> 57 {route.title} 58 </Text> 59 )} 60 indicatorStyle={{ 61 backgroundColor: colors.primary, 62 height: rpx(4), 63 }} 64 /> 65 )} 66 renderScene={renderScene} 67 onIndexChange={setIndex} 68 initialLayout={{width: rpx(750)}} 69 /> 70 ); 71} 72