1import React from 'react'; 2import {StyleSheet} from 'react-native'; 3import rpx from '@/utils/rpx'; 4import NavBar from './components/navBar'; 5import MusicBar from '@/components/musicBar'; 6import SheetMusicList from './components/sheetMusicList'; 7import StatusBar from '@/components/base/statusBar'; 8import {SafeAreaView} from 'react-native-safe-area-context'; 9 10interface IMusicSheetPageProps { 11 navTitle: string; 12 sheetInfo: ICommon.WithMusicList<IMusic.IMusicSheetItemBase> | null; 13 musicList?: IMusic.IMusicItem[] | null; 14 onEndReached?: () => void; 15 loadMore?: 'loading' | 'done' | 'none'; 16} 17 18export default function MusicSheetPage(props: IMusicSheetPageProps) { 19 const {navTitle, sheetInfo, musicList, onEndReached, loadMore} = props; 20 21 return ( 22 <SafeAreaView style={style.wrapper}> 23 <StatusBar /> 24 <NavBar 25 musicList={musicList ?? sheetInfo?.musicList ?? []} 26 navTitle={navTitle} 27 /> 28 <SheetMusicList 29 sheetInfo={sheetInfo} 30 musicList={musicList ?? sheetInfo?.musicList} 31 onEndReached={() => { 32 onEndReached?.(); 33 }} 34 loadMore={loadMore} 35 /> 36 <MusicBar /> 37 </SafeAreaView> 38 ); 39} 40 41const style = StyleSheet.create({ 42 wrapper: { 43 width: rpx(750), 44 flex: 1, 45 }, 46}); 47