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