xref: /MusicFree/src/pages/home/components/drawer/index.tsx (revision 65fc5a50efa14abe14c2160e94fda6c7c75cab48) 
1import React from 'react';
2import {
3  BackHandler,
4  ImageBackground,
5  StyleSheet,
6  Text,
7  View,
8} from 'react-native';
9import rpx from '@/utils/rpx';
10import {DrawerContentScrollView} from '@react-navigation/drawer';
11import {Button, Card, IconButton} from 'react-native-paper';
12import MusicQueue from '@/common/musicQueue';
13import ListItem from '@/components/listItem';
14import {useNavigation} from '@react-navigation/native';
15import {ROUTE_PATH} from '@/entry/router';
16import {fontSizeConst, fontWeightConst} from '@/constants/uiConst';
17import ThemeText from '@/components/themeText';
18import PageBackground from '@/components/pageBackground';
19
20interface IDrawerProps {}
21
22export default function HomeDrawer(props: IDrawerProps) {
23  const navigation = useNavigation<any>();
24  function navigateToSetting(settingType: string) {
25    navigation.navigate(ROUTE_PATH.SETTING, {
26      type: settingType,
27    });
28  }
29  return (
30    <>
31      <PageBackground></PageBackground>
32      <DrawerContentScrollView {...props} style={style.scrollWrapper}>
33        <View style={style.header}>
34          <ThemeText style={style.title}>Music Free</ThemeText>
35          <IconButton icon={'qrcode-scan'} size={rpx(36)}></IconButton>
36        </View>
37        <Card style={style.card}>
38          <Card.Title
39            title={
40              <ThemeText style={style.cardTitle}>设置</ThemeText>
41            }></Card.Title>
42          <Card.Content>
43            <ListItem
44              icon="cog-outline"
45              title="基本设置"
46              onPress={() => {
47                navigateToSetting('basic');
48              }}></ListItem>
49            <ListItem
50              icon="language-javascript"
51              title="插件设置"
52              onPress={() => {
53                navigateToSetting('plugin');
54              }}></ListItem>
55            <ListItem
56              icon="tshirt-v-outline"
57              title="主题设置"
58              onPress={() => {
59                navigateToSetting('theme');
60              }}></ListItem>
61            <ListItem icon="backup-restore" title="备份与恢复"></ListItem>
62          </Card.Content>
63        </Card>
64        <View style={style.bottom}>
65          <Button
66            onPress={() => {
67              MusicQueue.stop();
68              BackHandler.exitApp();
69            }}>
70            退出
71          </Button>
72        </View>
73      </DrawerContentScrollView>
74    </>
75  );
76}
77
78const style = StyleSheet.create({
79  wrapper: {
80    flex: 1,
81    backgroundColor: '#999999',
82  },
83  scrollWrapper: {
84    paddingHorizontal: rpx(24),
85    paddingTop: rpx(12),
86  },
87
88  header: {
89    height: rpx(100),
90    width: '100%',
91    flexDirection: 'row',
92    justifyContent: 'space-between',
93    alignItems: 'center',
94  },
95  title: {
96    fontSize: fontSizeConst.bigger,
97    includeFontPadding: false,
98    fontWeight: fontWeightConst.bold,
99  },
100  cardTitle: {
101    fontSize: fontSizeConst.small,
102  },
103  card: {
104    backgroundColor: '#eeeeee22',
105  },
106  bottom: {
107    height: rpx(100),
108    flexDirection: 'row',
109    alignItems: 'center',
110    justifyContent: 'flex-end',
111  },
112});
113