1import StatusBar from '@/components/base/statusBar'; 2import globalStyle from '@/constants/globalStyle'; 3import useOrientation from '@/hooks/useOrientation'; 4import React from 'react'; 5import {StyleSheet, View} from 'react-native'; 6import {SafeAreaView} from 'react-native-safe-area-context'; 7import Background from './components/background'; 8import Bottom from './components/bottom'; 9import Content from './components/content'; 10import Lyric from './components/content/lyric'; 11import NavBar from './components/navBar'; 12 13export default function MusicDetail() { 14 const orientation = useOrientation(); 15 return ( 16 <> 17 <Background /> 18 <SafeAreaView style={globalStyle.fwflex1}> 19 <StatusBar backgroundColor={'transparent'} /> 20 <View style={style.bodyWrapper}> 21 <View style={globalStyle.flex1}> 22 <NavBar /> 23 <Content /> 24 <Bottom /> 25 </View> 26 {orientation === 'horizonal' ? <Lyric /> : null} 27 </View> 28 </SafeAreaView> 29 </> 30 ); 31} 32 33const style = StyleSheet.create({ 34 bodyWrapper: { 35 width: '100%', 36 flex: 1, 37 flexDirection: 'row', 38 }, 39}); 40