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