1import StatusBar from '@/components/base/statusBar'; 2import globalStyle from '@/constants/globalStyle'; 3import useOrientation from '@/hooks/useOrientation'; 4import React, {useEffect} 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'; 12import Config from '@/core/config'; 13import { 14 activateKeepAwake, 15 deactivateKeepAwake, 16} from '@sayem314/react-native-keep-awake'; 17 18export default function MusicDetail() { 19 const orientation = useOrientation(); 20 21 useEffect(() => { 22 const needAwake = Config.get('setting.basic.musicDetailAwake'); 23 if (needAwake) { 24 activateKeepAwake(); 25 } 26 return () => { 27 if (needAwake) { 28 deactivateKeepAwake(); 29 } 30 }; 31 }, []); 32 33 return ( 34 <> 35 <Background /> 36 <SafeAreaView style={globalStyle.fwflex1}> 37 <StatusBar backgroundColor={'transparent'} /> 38 <View style={style.bodyWrapper}> 39 <View style={globalStyle.flex1}> 40 <NavBar /> 41 <Content /> 42 <Bottom /> 43 </View> 44 {orientation === 'horizonal' ? ( 45 <View style={globalStyle.flex1}> 46 <Lyric /> 47 </View> 48 ) : null} 49 </View> 50 </SafeAreaView> 51 </> 52 ); 53} 54 55const style = StyleSheet.create({ 56 bodyWrapper: { 57 width: '100%', 58 flex: 1, 59 flexDirection: 'row', 60 }, 61}); 62