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 8export default function Operations() { 9 const navigate = useNavigate(); 10 11 const actionButtons = [ 12 { 13 iconName: 'fire', 14 title: '推荐歌单', 15 action() { 16 navigate(ROUTE_PATH.RECOMMEND_SHEETS); 17 }, 18 }, 19 { 20 iconName: 'trophy', 21 title: '榜单', 22 action() { 23 navigate(ROUTE_PATH.TOP_LIST); 24 }, 25 }, 26 { 27 iconName: 'clock-outline', 28 title: '播放记录', 29 action() { 30 navigate(ROUTE_PATH.HISTORY); 31 }, 32 }, 33 { 34 iconName: 'folder-music-outline', 35 title: '本地音乐', 36 action() { 37 navigate(ROUTE_PATH.LOCAL); 38 }, 39 }, 40 ] as const; 41 42 return ( 43 <ScrollView style={styles.container}> 44 {actionButtons.map((action, index) => ( 45 <ActionButton 46 style={[ 47 styles.actionButtonStyle, 48 index % 4 ? styles.actionMarginLeft : null, 49 ]} 50 key={action.title} 51 {...action} 52 /> 53 ))} 54 </ScrollView> 55 ); 56} 57 58const styles = StyleSheet.create({ 59 container: { 60 width: rpx(200), 61 flexGrow: 0, 62 flexShrink: 0, 63 paddingHorizontal: rpx(24), 64 marginVertical: rpx(32), 65 flexDirection: 'row', 66 flexWrap: 'wrap', 67 }, 68 actionButtonStyle: { 69 width: rpx(157.5), 70 height: rpx(160), 71 borderRadius: rpx(18), 72 }, 73 actionMarginLeft: { 74 marginTop: rpx(24), 75 }, 76}); 77