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