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