1import React, {useCallback, useState} from 'react'; 2import {StyleSheet, 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={styles.tabBarStyle} 40 tabStyle={styles.tabStyle} 41 scrollEnabled 42 inactiveColor={colors.text} 43 activeColor={colors.primary} 44 renderLabel={({route, focused, color}) => ( 45 <Text 46 numberOfLines={1} 47 style={{ 48 width: rpx(160), 49 fontWeight: focused 50 ? fontWeightConst.bolder 51 : fontWeightConst.medium, 52 color, 53 textAlign: 'center', 54 }}> 55 {route.title} 56 </Text> 57 )} 58 indicatorStyle={{ 59 backgroundColor: colors.primary, 60 height: rpx(4), 61 }} 62 /> 63 )} 64 renderScene={renderScene} 65 onIndexChange={setIndex} 66 initialLayout={{width: rpx(750)}} 67 /> 68 ); 69} 70 71const styles = StyleSheet.create({ 72 tabBarStyle: { 73 backgroundColor: 'transparent', 74 shadowColor: 'transparent', 75 borderColor: 'transparent', 76 }, 77 tabStyle: { 78 width: 'auto', 79 }, 80}); 81