xref: /MusicFree/src/pages/home/components/drawer/index.tsx (revision 08a8e62cefcd62ae360d77c4b4cb4cf69ede345b) 
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 ThemeText from '@/components/themeText';
18import PageBackground from '@/components/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    },
58  ] as const;
59
60  return (
61    <>
62      <PageBackground></PageBackground>
63      <DrawerContentScrollView {...props} style={style.scrollWrapper}>
64        <View style={style.header}>
65          <ThemeText fontSize='appbar' fontWeight='bold'>{DeviceInfo.getApplicationName()}</ThemeText>
66          <IconButton icon={'qrcode-scan'} size={rpx(36)}></IconButton>
67        </View>
68        <Card style={style.card}>
69          <Card.Title
70            title={
71              <ThemeText fontSize='description'>设置</ThemeText>
72            }></Card.Title>
73          <Card.Content>
74            {basicSetting.map(item => (
75              <ListItem
76                key={item.title}
77                itemPaddingHorizontal={0}
78                left={{
79                  icon: {
80                    name: item.icon,
81                    size: 'normal',
82                    fontColor: 'normal',
83                  },
84                  width: rpx(48),
85                }}
86                title={item.title}
87                onPress={item.onPress}></ListItem>
88            ))}
89          </Card.Content>
90        </Card>
91        <View style={style.bottom}>
92          <Button
93            onPress={() => {
94              MusicQueue.stop();
95              BackHandler.exitApp();
96            }}>
97            退出
98          </Button>
99        </View>
100      </DrawerContentScrollView>
101    </>
102  );
103}
104
105const style = StyleSheet.create({
106  wrapper: {
107    flex: 1,
108    backgroundColor: '#999999',
109  },
110  scrollWrapper: {
111    paddingHorizontal: rpx(24),
112    paddingTop: rpx(12),
113  },
114
115  header: {
116    height: rpx(100),
117    width: '100%',
118    flexDirection: 'row',
119    justifyContent: 'space-between',
120    alignItems: 'center',
121  },
122  card: {
123    backgroundColor: '#eeeeee22',
124  },
125  bottom: {
126    height: rpx(100),
127    flexDirection: 'row',
128    alignItems: 'center',
129    justifyContent: 'flex-end',
130  },
131});
132