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 {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 scrollEnabled 43 style={{ 44 backgroundColor: Color(colors.primary) 45 .alpha(0.7) 46 .toString(), 47 shadowColor: 'transparent', 48 borderColor: 'transparent', 49 }} 50 tabStyle={{ 51 width: rpx(200), 52 }} 53 renderLabel={({route, focused, color}) => ( 54 <Text 55 style={{ 56 fontWeight: focused 57 ? fontWeightConst.bolder 58 : fontWeightConst.bold, 59 color, 60 }}> 61 {route.title} 62 </Text> 63 )} 64 indicatorStyle={{ 65 backgroundColor: colors.text, 66 height: rpx(4), 67 }} 68 /> 69 )} 70 style={{ 71 backgroundColor: colors.background, 72 }} 73 renderScene={renderScene} 74 onIndexChange={setIndex} 75 initialLayout={{width: vw(100)}} 76 /> 77 ); 78} 79 80export default memo(ResultPanel); 81