xref: /MusicFree/src/pages/musicDetail/components/content/index.tsx (revision 6704747af84cebd842b258efac7143542722fac5)
1import React, {useState} from 'react';
2import {StyleSheet, View} from 'react-native';
3import rpx from '@/utils/rpx';
4import AlbumCover from './albumCover';
5import Lyric from './lyric';
6import {TapGestureHandler} from 'react-native-gesture-handler';
7
8interface IContentProps {}
9export default function Content(props: IContentProps) {
10  const [tab, selectTab] = useState<'album' | 'lyric'>('album');
11
12  const onPress = (evt: any) => {
13    if (tab === 'album') {
14      selectTab('lyric');
15    } else {
16      selectTab('album');
17    }
18  };
19
20  return (
21    <TapGestureHandler onActivated={onPress}>
22      <View style={style.wrapper}>
23        {tab === 'album' ? <AlbumCover></AlbumCover> : <Lyric></Lyric>}
24      </View>
25    </TapGestureHandler>
26  );
27}
28
29const style = StyleSheet.create({
30  wrapper: {
31    width: rpx(750),
32    flex: 1,
33    justifyContent: 'center',
34    alignItems: 'center',
35  },
36});
37