1import React from 'react'; 2import {StyleSheet} from 'react-native'; 3import rpx from '@/utils/rpx'; 4import ActionButton from './ActionButton'; 5import {ROUTE_PATH, useNavigate} from '@/entry/router'; 6import {ScrollView} from 'react-native-gesture-handler'; 7 8interface IOperationsProps { 9 orientation?: 'horizonal' | 'vertical'; 10} 11 12export default function Operations(props: IOperationsProps) { 13 const navigate = useNavigate(); 14 const {orientation} = props; 15 16 const actionButtons = [ 17 { 18 iconName: 'heart', 19 iconColor: 'red', 20 title: '我喜欢', 21 action() { 22 navigate(ROUTE_PATH.SHEET_DETAIL, { 23 id: 'favorite', 24 }); 25 }, 26 }, 27 { 28 iconName: 'folder-music-outline', 29 title: '本地音乐', 30 action() { 31 navigate(ROUTE_PATH.LOCAL); 32 }, 33 }, 34 { 35 iconName: 'download', 36 title: '下载列表', 37 action() { 38 navigate(ROUTE_PATH.DOWNLOADING); 39 }, 40 }, 41 { 42 iconName: 'trophy-outline', 43 title: '榜单', 44 action() { 45 navigate(ROUTE_PATH.TOP_LIST); 46 }, 47 }, 48 ]; 49 50 return ( 51 <ScrollView 52 style={style.wrapper} 53 horizontal={orientation === 'vertical'} 54 contentContainerStyle={ 55 orientation === 'vertical' 56 ? style.contentWrapper 57 : style.horizonalContentWrapper 58 }> 59 {actionButtons.map(action => ( 60 <ActionButton key={action.title} {...action} /> 61 ))} 62 </ScrollView> 63 ); 64} 65 66const style = StyleSheet.create({ 67 wrapper: { 68 marginTop: rpx(20), 69 marginBottom: rpx(20), 70 flexGrow: 0, 71 flexShrink: 0, 72 }, 73 contentWrapper: { 74 flexDirection: 'row', 75 height: rpx(144), 76 paddingHorizontal: rpx(24), 77 }, 78 horizonalContentWrapper: { 79 width: rpx(170), 80 flexDirection: 'column', 81 paddingVertical: rpx(24), 82 }, 83}); 84