1/** 2 * 搜索结果面板 一级页 3 */ 4import React, {memo, useState} from 'react'; 5import {Text} from 'react-native'; 6import rpx, {vw} from '@/utils/rpx'; 7import {SceneMap, TabBar, TabView} from 'react-native-tab-view'; 8import ResultSubPanel from './resultSubPanel'; 9import results from './results'; 10import {fontWeightConst} from '@/constants/uiConst'; 11import useColors from '@/hooks/useColors'; 12 13const routes = results; 14 15const getRouterScene = ( 16 routes: Array<{key: ICommon.SupportMediaType; title: string}>, 17) => { 18 const scene: Record<string, () => JSX.Element> = {}; 19 routes.forEach(r => { 20 scene[r.key] = () => <ResultSubPanel tab={r.key} />; 21 }); 22 return SceneMap(scene); 23}; 24 25const renderScene = getRouterScene(routes); 26 27function ResultPanel() { 28 const [index, setIndex] = useState(0); 29 const colors = useColors(); 30 31 return ( 32 <TabView 33 lazy 34 navigationState={{ 35 index, 36 routes, 37 }} 38 renderTabBar={props => ( 39 <TabBar 40 {...props} 41 scrollEnabled 42 style={{ 43 backgroundColor: colors.tabBar, 44 shadowColor: 'transparent', 45 borderColor: 'transparent', 46 }} 47 inactiveColor={colors.text} 48 activeColor={colors.primary} 49 tabStyle={{ 50 width: 'auto', 51 }} 52 renderLabel={({route, focused, color}) => ( 53 <Text 54 numberOfLines={1} 55 style={{ 56 width: rpx(160), 57 fontWeight: focused 58 ? fontWeightConst.bolder 59 : fontWeightConst.medium, 60 color, 61 textAlign: 'center', 62 }}> 63 {route.title} 64 </Text> 65 )} 66 indicatorStyle={{ 67 backgroundColor: colors.primary, 68 height: rpx(4), 69 }} 70 /> 71 )} 72 renderScene={renderScene} 73 onIndexChange={setIndex} 74 initialLayout={{width: vw(100)}} 75 /> 76 ); 77} 78 79export default memo(ResultPanel); 80