1/** 2 * 搜索结果面板 一级页 3 */ 4import React, {memo, useState} from 'react'; 5import {StyleSheet, Text, View} 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 14interface IResultPanelProps {} 15 16const routes = results; 17 18const getRouterScene = ( 19 routes: Array<{key: ICommon.SupportMediaType; title: string}>, 20) => { 21 const scene: Record<string, () => JSX.Element> = {}; 22 routes.forEach(r => { 23 scene[r.key] = () => <ResultSubPanel tab={r.key}></ResultSubPanel>; 24 }); 25 return SceneMap(scene); 26}; 27 28const renderScene = getRouterScene(routes); 29 30function ResultPanel(props: IResultPanelProps) { 31 const [index, setIndex] = useState(0); 32 const {colors} = useTheme(); 33 34 return ( 35 <TabView 36 lazy 37 navigationState={{ 38 index, 39 routes, 40 }} 41 renderTabBar={props => ( 42 <TabBar 43 {...props} 44 style={{ 45 backgroundColor: Color(colors.primary).alpha(0.7).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 }}></TabBar> 67 )} 68 style={{ 69 backgroundColor: colors.background, 70 }} 71 renderScene={renderScene} 72 onIndexChange={setIndex} 73 initialLayout={{width: rpx(750)}}></TabView> 74 ); 75} 76 77export default memo(ResultPanel); 78