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 Color from 'color'; 8import {useTheme} from 'react-native-paper'; 9import BoardPanelWrapper from './boardPanelWrapper'; 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} = useTheme(); 18 19 const renderScene = useCallback( 20 (props: {route: {key: string}}) => ( 21 <BoardPanelWrapper hash={props?.route?.key} /> 22 ), 23 [], 24 ); 25 26 return ( 27 <TabView 28 lazy 29 navigationState={{ 30 index, 31 routes, 32 }} 33 renderTabBar={props => ( 34 <TabBar 35 {...props} 36 style={{ 37 backgroundColor: Color(colors.primary) 38 .alpha(0.7) 39 .toString(), 40 shadowColor: 'transparent', 41 borderColor: 'transparent', 42 }} 43 tabStyle={{ 44 width: rpx(200), 45 }} 46 scrollEnabled 47 renderLabel={({route, focused, color}) => ( 48 <Text 49 style={{ 50 fontWeight: focused 51 ? fontWeightConst.bolder 52 : fontWeightConst.bold, 53 color, 54 }}> 55 {route.title} 56 </Text> 57 )} 58 indicatorStyle={{ 59 backgroundColor: colors.text, 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