xref: /MusicFree/src/pages/searchPage/components/navBar.tsx (revision bf6e62f27bf21a011995d7561e0093fae1a2d72e) 
1import React, {useEffect, useState} from 'react';
2import {
3  Keyboard,
4  StatusBar,
5  StyleSheet,
6  Text,
7  TextInput,
8  ToastAndroid,
9  View,
10} from 'react-native';
11import rpx from '@/utils/rpx';
12import {useNavigation, useTheme} from '@react-navigation/native';
13import {useAtom, useSetAtom} from 'jotai';
14import {pageStatusAtom, PageStatus, queryAtom} from '../store/atoms';
15import useSearch from '../hooks/useSearch';
16import {Appbar, Button, Searchbar} from 'react-native-paper';
17import getStatusBarHeight from '@/utils/getStatusBarHeight';
18import { addHistory } from '../common/historySearch';
19import { fontSizeConst } from '@/constants/uiConst';
20import useTextColor from '@/hooks/useTextColor';
21
22interface INavBarProps {}
23export default function NavBar(props: INavBarProps) {
24  const navigation = useNavigation();
25  const search = useSearch();
26  const [query, setQuery] = useAtom(queryAtom);
27  const setPageStatus = useSetAtom(pageStatusAtom);
28  const textColor = useTextColor();
29  const {colors} = useTheme();
30
31  const onSearchSubmit = async () => {
32    if (query === '') {
33      return;
34    }
35    setPageStatus(prev =>
36      prev === PageStatus.EDITING ? PageStatus.SEARCHING : prev,
37    );
38    await search(query, 'all');
39    await addHistory(query);
40  };
41
42  return (
43    <View style={[style.wrapper, {backgroundColor: colors.primary}]}>
44      <Appbar style={[style.appbar, {backgroundColor: colors.primary}]}>
45        <Appbar.BackAction
46          onPress={() => {
47            // !!这个组件有bug，输入法拉起的时候返回会默认打开panel
48            Keyboard.dismiss();
49            navigation.goBack();
50          }}></Appbar.BackAction>
51        <Searchbar
52          autoFocus
53          inputStyle={style.input}
54          style={style.searchBar}
55          onFocus={() => {
56            setPageStatus(PageStatus.EDITING);
57          }}
58          placeholder="输入要搜索的歌曲"
59          onSubmitEditing={onSearchSubmit}
60          onChangeText={_ => setQuery(_)}
61          value={query}></Searchbar>
62        <Button color={textColor} onPress={onSearchSubmit}>
63          搜索
64        </Button>
65      </Appbar>
66    </View>
67  );
68}
69
70const style = StyleSheet.create({
71  wrapper: {
72    paddingTop: getStatusBarHeight(),
73  },
74  appbar: {
75    shadowColor: 'transparent',
76  },
77  searchBar: {
78    minWidth: rpx(375),
79    flex: 1,
80    borderRadius: rpx(64),
81    height: rpx(64),
82    color: '#666666'
83  },
84  input: {
85    padding: 0,
86    color: '#666666',
87    height: rpx(64),
88    fontSize: fontSizeConst.small,
89    textAlignVertical: 'center',
90    includeFontPadding: false,
91  }
92});
93