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