1import React from 'react'; 2import {StyleSheet, View} from 'react-native'; 3import rpx from '@/utils/rpx'; 4import VerticalSafeAreaView from '@/components/base/verticalSafeAreaView'; 5import globalStyle from '@/constants/globalStyle'; 6import StatusBar from '@/components/base/statusBar'; 7import musicHistory from '@/core/musicHistory'; 8import MusicList from '@/components/musicList'; 9import {musicHistorySheetId} from '@/constants/commonConst'; 10import MusicBar from '@/components/musicBar'; 11import Button from '@/components/base/button'; 12import AppBar from '@/components/base/appBar'; 13 14export default function History() { 15 const musicHistoryList = musicHistory.useMusicHistory(); 16 return ( 17 <VerticalSafeAreaView style={globalStyle.fwflex1}> 18 <StatusBar /> 19 <AppBar>播放记录</AppBar> 20 <View style={style.opeartions}> 21 <Button 22 onPress={() => { 23 if (musicHistoryList.length) { 24 musicHistory.clearMusic(); 25 } 26 }}> 27 清空 28 </Button> 29 </View> 30 <MusicList 31 musicList={musicHistoryList} 32 showIndex 33 musicSheet={{ 34 id: musicHistorySheetId, 35 title: '播放记录', 36 musicList: musicHistoryList, 37 }} 38 /> 39 <MusicBar /> 40 </VerticalSafeAreaView> 41 ); 42} 43 44const style = StyleSheet.create({ 45 opeartions: { 46 height: rpx(88), 47 flexDirection: 'row', 48 alignItems: 'center', 49 width: '100%', 50 paddingHorizontal: rpx(24), 51 }, 52}); 53