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