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