1import React, {useState} from 'react'; 2import {Text} from 'react-native'; 3import rpx, {vw} from '@/utils/rpx'; 4import {TabBar, TabView} from 'react-native-tab-view'; 5import PluginManager from '@/core/pluginManager'; 6import {fontWeightConst} from '@/constants/uiConst'; 7import SheetBody from './sheetBody'; 8 9export default function Body() { 10 const [index, setIndex] = useState(0); 11 12 const routes = PluginManager.getSortedRecommendSheetablePlugins().map( 13 _ => ({ 14 key: _.hash, 15 title: _.name, 16 }), 17 ); 18 19 const renderTabBar = (_: any) => ( 20 <TabBar 21 {..._} 22 scrollEnabled 23 style={{ 24 backgroundColor: 'transparent', 25 shadowColor: 'transparent', 26 borderColor: 'transparent', 27 }} 28 tabStyle={{ 29 width: rpx(200), 30 }} 31 renderIndicator={() => null} 32 pressColor="transparent" 33 renderLabel={({route, focused, color}) => ( 34 <Text 35 numberOfLines={1} 36 style={{ 37 fontWeight: focused 38 ? fontWeightConst.bolder 39 : fontWeightConst.bold, 40 color, 41 }}> 42 {route.title ?? '(未命名)'} 43 </Text> 44 )} 45 /> 46 ); 47 48 return ( 49 <TabView 50 lazy 51 navigationState={{ 52 index, 53 routes, 54 }} 55 renderTabBar={renderTabBar} 56 renderScene={props => { 57 return <SheetBody hash={props.route.key} />; 58 }} 59 onIndexChange={setIndex} 60 initialLayout={{width: vw(100)}} 61 swipeEnabled={false} 62 /> 63 ); 64} 65