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