From 31a8b5c67e11c7f5825044f2941b3ad1d88e2bf0 Mon Sep 17 00:00:00 2001 From: lyswhut Date: Sun, 26 Mar 2023 18:33:40 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BD=BF=E7=94=A8=E4=BD=93?= =?UTF-8?q?=E9=AA=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- android/gradle.properties | 2 +- publish/changeLog.md | 9 +- src/components/OnlineList/List.tsx | 21 +- src/components/OnlineList/index.tsx | 3 + src/components/common/DrawerLayoutFixed.tsx | 39 ++- src/config/globalData.ts | 2 + src/core/common.ts | 5 +- src/event/appEvent.ts | 6 +- src/event/stateEvent.ts | 5 + src/lang/i18n.ts | 2 +- .../Home/{components => Horizontal}/Main.tsx | 0 src/screens/Home/Horizontal/index.tsx | 2 +- src/screens/Home/Vertical/Content.tsx | 7 +- src/screens/Home/Vertical/Main.tsx | 262 ++++++++++++++++++ .../Home/Views/Leaderboard/MusicList.tsx | 1 + .../Home/Views/Mylist/MusicList/List.tsx | 15 +- src/screens/Home/Views/Mylist/index.tsx | 14 +- src/screens/Home/Views/Search/MusicList.tsx | 1 + src/screens/Home/Views/SongList/index.tsx | 11 +- src/store/Provider/ThemeProvider.tsx | 9 +- src/types/app.d.ts | 5 + 21 files changed, 381 insertions(+), 40 deletions(-) rename src/screens/Home/{components => Horizontal}/Main.tsx (100%) create mode 100644 src/screens/Home/Vertical/Main.tsx diff --git a/android/gradle.properties b/android/gradle.properties index e74ec0057..8144cddf9 100644 --- a/android/gradle.properties +++ b/android/gradle.properties @@ -37,7 +37,7 @@ reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64 # your application. You should enable this flag either if you want # to write custom TurboModules/Fabric components OR use libraries that # are providing them. -newArchEnabled=false +newArchEnabled=true # Use this property to enable or disable the Hermes JS engine. # If set to false, you will be using JSC instead. diff --git a/publish/changeLog.md b/publish/changeLog.md index 5a4536156..d5842b74d 100644 --- a/publish/changeLog.md +++ b/publish/changeLog.md @@ -1,3 +1,8 @@ -### 修复 +### 优化 -- 修复在线列表翻页问题 +- 竖屏下的首页允许滑动切换页面（恢复v0.x.x的切页操作） +- 优化更新语言、主题设置时的流畅度 + +### 其他 + +- 启用新架构 diff --git a/src/components/OnlineList/List.tsx b/src/components/OnlineList/List.tsx index 9d11b293e..c96c4c833 100644 --- a/src/components/OnlineList/List.tsx +++ b/src/components/OnlineList/List.tsx @@ -24,6 +24,7 @@ export interface ListProps { onPlayList?: (index: number) => void progressViewOffset?: number ListHeaderComponent?: FlatListType['ListEmptyComponent'] + checkHomePagerIdle: boolean } export interface ListType { setList: (list: LX.Music.MusicInfoOnline[], showSource?: boolean) => void @@ -46,6 +47,7 @@ const List = forwardRef(({ onPlayList, progressViewOffset, ListHeaderComponent, + checkHomePagerIdle, }, ref) => { // const t = useI18n() const theme = useTheme() @@ -139,16 +141,19 @@ const List = forwardRef(({ } const handlePress = (item: LX.Music.MusicInfoOnline, index: number) => { - if (isMultiSelectModeRef.current) { - handleSelect(item, index) - } else { - if (settingState.setting['list.isClickPlayList'] && onPlayList != null) { - onPlayList(index) + requestAnimationFrame(() => { + if (checkHomePagerIdle && !global.lx.homePagerIdle) return + if (isMultiSelectModeRef.current) { + handleSelect(item, index) } else { - // console.log(currentList[index]) - handlePlay(currentList[index]) + if (settingState.setting['list.isClickPlayList'] && onPlayList != null) { + onPlayList(index) + } else { + // console.log(currentList[index]) + handlePlay(currentList[index]) + } } - } + }) } const handleLongPress = (item: LX.Music.MusicInfoOnline, index: number) => { diff --git a/src/components/OnlineList/index.tsx b/src/components/OnlineList/index.tsx index 8f9df7071..4d77ff1fb 100644 --- a/src/components/OnlineList/index.tsx +++ b/src/components/OnlineList/index.tsx @@ -15,6 +15,7 @@ export interface OnlineListProps { onPlayList?: ListProps['onPlayList'] progressViewOffset?: ListProps['progressViewOffset'] ListHeaderComponent?: ListProps['ListHeaderComponent'] + checkHomePagerIdle?: boolean } export interface OnlineListType { setList: (list: LX.Music.MusicInfoOnline[], showSource?: boolean) => void @@ -27,6 +28,7 @@ export default forwardRef(({ onPlayList, progressViewOffset, ListHeaderComponent, + checkHomePagerIdle = false, }, ref) => { const listRef = useRef(null) const multipleModeBarRef = useRef(null) @@ -86,6 +88,7 @@ export default forwardRef(({ onPlayList={onPlayList} progressViewOffset={progressViewOffset} ListHeaderComponent={ListHeaderComponent} + checkHomePagerIdle={checkHomePagerIdle} /> (({ visibleNavNames, widthPercentage, widthPercentageMax, children, ...props }, ref) => { +export interface DrawerLayoutFixedType { + openDrawer: () => void + closeDrawer: () => void + fixWidth: () => void +} + +const DrawerLayoutFixed = forwardRef(({ visibleNavNames, widthPercentage, widthPercentageMax, children, ...props }, ref) => { + const drawerLayoutRef = useRef(null) const [w, setW] = useState('100%') const [drawerWidth, setDrawerWidth] = useState(0) const changedRef = useRef({ width: 0, changed: false }) - // 修复 DrawerLayoutAndroid 在导航到其他屏幕再返回后无法打开的问题 - usePageVisible(visibleNavNames, useCallback((visible) => { - if (!visible || !changedRef.current.width) return + const fixDrawerWidth = useCallback(() => { + if (!changedRef.current.width) return changedRef.current.changed = true // console.log('usePageVisible', visible, changedRef.current.width) setW(changedRef.current.width - 1) - }, [])) + }, []) + + // 修复 DrawerLayoutAndroid 在导航到其他屏幕再返回后无法打开的问题 + usePageVisible(visibleNavNames, useCallback((visible) => { + if (!visible || !changedRef.current.width) return + fixDrawerWidth() + }, [fixDrawerWidth])) + + useImperativeHandle(ref, () => ({ + openDrawer() { + drawerLayoutRef.current?.openDrawer() + }, + closeDrawer() { + drawerLayoutRef.current?.closeDrawer() + }, + fixWidth() { + fixDrawerWidth() + }, + }), [fixDrawerWidth]) + const handleLayout = useCallback((e: LayoutChangeEvent) => { // console.log('handleLayout', e.nativeEvent.layout.width, changedRef.current.width) @@ -51,7 +76,7 @@ const DrawerLayoutFixed = forwardRef(({ visibleNavNa style={{ width: w, flex: 1 }} > ) => { export const setLanguage = (locale: Parameters[0]) => { updateSetting({ 'common.langId': locale }) - applyLanguage(locale) + global.state_event.languageChanged(locale) + requestAnimationFrame(() => { + applyLanguage(locale) + }) } diff --git a/src/event/appEvent.ts b/src/event/appEvent.ts index cfd1b92ce..ecf5103bf 100644 --- a/src/event/appEvent.ts +++ b/src/event/appEvent.ts @@ -1,6 +1,6 @@ import { setNavActiveId } from '@/core/common' import Event from './Event' -import commonState from '@/store/common/state' +import commonState, { type InitState as CommonState } from '@/store/common/state' import { type Source as SonglistSource } from '@/store/songlist/state' import { type SearchType } from '@/store/search/state' @@ -162,6 +162,10 @@ export class AppEvent extends Event { this.emit('changeMenuVisible', visible) } + homeNavPagerChanged(id: CommonState['navActiveId']) { + this.emit('homeNavPagerChanged', id) + } + /** * 搜索类型改变事件 * @param type diff --git a/src/event/stateEvent.ts b/src/event/stateEvent.ts index 8721c7d17..692034552 100644 --- a/src/event/stateEvent.ts +++ b/src/event/stateEvent.ts @@ -3,6 +3,7 @@ import type { InitState as CommonState } from '@/store/common/state' import type { InitState as ListState } from '@/store/list/state' import type { InitState as PlayerState } from '@/store/player/state' import type { InitState as VersionState } from '@/store/version/state' +import { type I18n } from '@/lang' // { @@ -19,6 +20,10 @@ export class StateEvent extends Event { this.emit('configUpdated', keys, setting) } + languageChanged(locale: I18n['locale']) { + this.emit('languageChanged', locale) + } + fontSizeUpdated(size: number) { this.emit('fontSizeUpdated', size) } diff --git a/src/lang/i18n.ts b/src/lang/i18n.ts index 47eb8e14b..9050d7f59 100644 --- a/src/lang/i18n.ts +++ b/src/lang/i18n.ts @@ -40,7 +40,7 @@ const hookTools = { } const useI18n = () => { - const [locale, updateLocale] = useState(i18n.locale) + const [locale, updateLocale] = useState(i18n?.locale ?? 'en_us') // console.log('hook run') useEffect(() => { const hook: Hook = (locale) => { diff --git a/src/screens/Home/components/Main.tsx b/src/screens/Home/Horizontal/Main.tsx similarity index 100% rename from src/screens/Home/components/Main.tsx rename to src/screens/Home/Horizontal/Main.tsx diff --git a/src/screens/Home/Horizontal/index.tsx b/src/screens/Home/Horizontal/index.tsx index b430362df..e1c17728d 100644 --- a/src/screens/Home/Horizontal/index.tsx +++ b/src/screens/Home/Horizontal/index.tsx @@ -4,7 +4,7 @@ import Aside from './Aside' import PlayerBar from '../components/PlayerBar' import StatusBar from '@/components/common/StatusBar' import Header from './Header' -import Main from '../components/Main' +import Main from './Main' import { createStyle } from '@/utils/tools' const styles = createStyle({ diff --git a/src/screens/Home/Vertical/Content.tsx b/src/screens/Home/Vertical/Content.tsx index 0936c67da..d3db4b17c 100644 --- a/src/screens/Home/Vertical/Content.tsx +++ b/src/screens/Home/Vertical/Content.tsx @@ -1,18 +1,17 @@ import React, { useEffect, useRef } from 'react' -import { type DrawerLayoutAndroid } from 'react-native' // import { getWindowSise, onDimensionChange } from '@/utils/tools' import DrawerNav from './DrawerNav' import Header from './Header' -import Main from '../components/Main' +import Main from './Main' import { useSettingValue } from '@/store/setting/hook' import { COMPONENT_IDS } from '@/config/constant' -import DrawerLayoutFixed from '@/components/common/DrawerLayoutFixed' +import DrawerLayoutFixed, { type DrawerLayoutFixedType } from '@/components/common/DrawerLayoutFixed' import { scaleSizeW } from '@/utils/pixelRatio' const MAX_WIDTH = scaleSizeW(300) const Content = () => { - const drawer = useRef(null) + const drawer = useRef(null) const drawerLayoutPosition = useSettingValue('common.drawerLayoutPosition') useEffect(() => { diff --git a/src/screens/Home/Vertical/Main.tsx b/src/screens/Home/Vertical/Main.tsx new file mode 100644 index 000000000..8236bd590 --- /dev/null +++ b/src/screens/Home/Vertical/Main.tsx @@ -0,0 +1,262 @@ +import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react' +import { View } from 'react-native' +import Search from '../Views/Search' +import SongList from '../Views/SongList' +import Mylist from '../Views/Mylist' +import Leaderboard from '../Views/Leaderboard' +import Setting from '../Views/Setting' +import commonState, { type InitState as CommonState } from '@/store/common/state' +import { createStyle } from '@/utils/tools' +import PagerView, { type PageScrollStateChangedNativeEvent, type PagerViewOnPageSelectedEvent } from 'react-native-pager-view' +import { setNavActiveId } from '@/core/common' + + +const SearchPage = () => { + const [visible, setVisible] = useState(commonState.navActiveId == 'nav_search') + const component = useMemo(() => , []) + useEffect(() => { + const handleNavIdUpdate = (id: CommonState['navActiveId']) => { + if (id == 'nav_search') setVisible(true) + } + const handleHide = () => { + setVisible(false) + } + global.state_event.on('navActiveIdUpdated', handleNavIdUpdate) + global.state_event.on('themeUpdated', handleHide) + global.state_event.on('languageChanged', handleHide) + + return () => { + global.state_event.off('navActiveIdUpdated', handleNavIdUpdate) + global.state_event.off('themeUpdated', handleHide) + global.state_event.off('languageChanged', handleHide) + } + }, []) + + return visible ? component : null +} +const SongListPage = () => { + const [visible, setVisible] = useState(commonState.navActiveId == 'nav_songlist') + const component = useMemo(() => , []) + useEffect(() => { + const handleNavIdUpdate = (id: CommonState['navActiveId']) => { + if (id == 'nav_songlist') setVisible(true) + } + const handleHide = () => { + setVisible(false) + } + global.state_event.on('navActiveIdUpdated', handleNavIdUpdate) + global.state_event.on('themeUpdated', handleHide) + global.state_event.on('languageChanged', handleHide) + + return () => { + global.state_event.off('navActiveIdUpdated', handleNavIdUpdate) + global.state_event.off('themeUpdated', handleHide) + global.state_event.off('languageChanged', handleHide) + } + }, []) + + return visible ? component : null + // return activeId == 1 || activeId == 0 ? SongList : null +} +const LeaderboardPage = () => { + const [visible, setVisible] = useState(commonState.navActiveId == 'nav_top') + const component = useMemo(() => , []) + useEffect(() => { + const handleNavIdUpdate = (id: CommonState['navActiveId']) => { + if (id == 'nav_top') setVisible(true) + } + const handleHide = () => { + setVisible(false) + } + global.state_event.on('navActiveIdUpdated', handleNavIdUpdate) + global.state_event.on('themeUpdated', handleHide) + global.state_event.on('languageChanged', handleHide) + + return () => { + global.state_event.off('navActiveIdUpdated', handleNavIdUpdate) + global.state_event.off('themeUpdated', handleHide) + global.state_event.off('languageChanged', handleHide) + } + }, []) + + return visible ? component : null +} +const MylistPage = () => { + const [visible, setVisible] = useState(commonState.navActiveId == 'nav_love') + const component = useMemo(() => , []) + useEffect(() => { + const handleNavIdUpdate = (id: CommonState['navActiveId']) => { + if (id == 'nav_love') setVisible(true) + } + const handleHide = () => { + setVisible(false) + } + global.state_event.on('navActiveIdUpdated', handleNavIdUpdate) + global.state_event.on('themeUpdated', handleHide) + global.state_event.on('languageChanged', handleHide) + + return () => { + global.state_event.off('navActiveIdUpdated', handleNavIdUpdate) + global.state_event.off('themeUpdated', handleHide) + global.state_event.off('languageChanged', handleHide) + } + }, []) + + return visible ? component : null +} +const SettingPage = () => { + const [visible, setVisible] = useState(commonState.navActiveId == 'nav_setting') + const component = useMemo(() => , []) + useEffect(() => { + const handleNavIdUpdate = (id: CommonState['navActiveId']) => { + if (id == 'nav_setting') setVisible(true) + } + global.state_event.on('navActiveIdUpdated', handleNavIdUpdate) + + return () => { + global.state_event.off('navActiveIdUpdated', handleNavIdUpdate) + } + }, []) + return visible ? component : null +} + +const viewMap = { + nav_search: 0, + nav_songlist: 1, + nav_top: 2, + nav_love: 3, + nav_setting: 4, +} +const indexMap = [ + 'nav_search', + 'nav_songlist', + 'nav_top', + 'nav_love', + 'nav_setting', +] as const + +const Main = () => { + const pagerViewRef = useRef(null) + let activeIndexRef = useRef(viewMap[commonState.navActiveId]) + // const isScrollingRef = useRef(false) + // const scrollPositionRef = useRef(-1) + + // const handlePageScroll = useCallback(({ nativeEvent }) => { + // console.log(nativeEvent.offset, activeIndexRef.current) + // // if (activeIndexRef.current == -1) return + // // if (nativeEvent.offset == 0) { + // // isScrollingRef.current = false + + // // const index = nativeEvent.position + // // if (activeIndexRef.current == index) return + // // activeIndexRef.current = index + // // setNavActiveIndex(index) + // // } else if (!isScrollingRef.current) { + // // isScrollingRef.current = true + // // } + // }, [setNavActiveIndex]) + + const onPageSelected = useCallback(({ nativeEvent }: PagerViewOnPageSelectedEvent) => { + // console.log(nativeEvent) + activeIndexRef.current = nativeEvent.position + if (activeIndexRef.current != viewMap[commonState.navActiveId]) { + setNavActiveId(indexMap[activeIndexRef.current]) + } + global.app_event.homeNavPagerChanged(indexMap[activeIndexRef.current]) + }, []) + + const onPageScrollStateChanged = useCallback(({ nativeEvent }: PageScrollStateChangedNativeEvent) => { + // console.log(nativeEvent) + const idle = nativeEvent.pageScrollState == 'idle' + if (global.lx.homePagerIdle != idle) global.lx.homePagerIdle = idle + // if (nativeEvent.pageScrollState != 'idle') return + // if (scrollPositionRef.current != commonState.navActiveIndex) { + // setNavActiveIndex(scrollPositionRef.current) + // } + // if (activeIndexRef.current == -1) return + // if (nativeEvent.offset == 0) { + // isScrollingRef.current = false + + // const index = nativeEvent.position + // if (activeIndexRef.current == index) return + // activeIndexRef.current = index + // setNavActiveIndex(index) + // } else if (!isScrollingRef.current) { + // isScrollingRef.current = true + // } + }, []) + + useEffect(() => { + const handleUpdate = (id: CommonState['navActiveId']) => { + const index = viewMap[id] + if (activeIndexRef.current == index) return + activeIndexRef.current = index + pagerViewRef.current?.setPageWithoutAnimation(index) + } + // window.requestAnimationFrame(() => pagerViewRef.current && pagerViewRef.current.setPage(activeIndexRef.current)) + global.state_event.on('navActiveIdUpdated', handleUpdate) + return () => { + global.state_event.off('navActiveIdUpdated', handleUpdate) + } + }, []) + + + const component = useMemo(() => ( + + + + + + + + + + + + + + + + + {/* + + + + + + + + + + + + + + */} + + ), [onPageScrollStateChanged, onPageSelected]) + + return component +} + +const styles = createStyle({ + pagerView: { + flex: 1, + overflow: 'hidden', + }, + pageStyle: { + // alignItems: 'center', + // padding: 20, + }, +}) + + +export default Main + diff --git a/src/screens/Home/Views/Leaderboard/MusicList.tsx b/src/screens/Home/Views/Leaderboard/MusicList.tsx index a8a4e67b6..3bb0b5f20 100644 --- a/src/screens/Home/Views/Leaderboard/MusicList.tsx +++ b/src/screens/Home/Views/Leaderboard/MusicList.tsx @@ -89,6 +89,7 @@ export default forwardRef((props, ref) => { onPlayList={handlePlayList} onRefresh={handleRefresh} onLoadMore={handleLoadMore} + checkHomePagerIdle /> }) diff --git a/src/screens/Home/Views/Mylist/MusicList/List.tsx b/src/screens/Home/Views/Mylist/MusicList/List.tsx index 07dcb7411..65f7291f1 100644 --- a/src/screens/Home/Views/Mylist/MusicList/List.tsx +++ b/src/screens/Home/Views/Mylist/MusicList/List.tsx @@ -212,11 +212,16 @@ const List = forwardRef(({ onShowMenu, onMuiltSelectMode, o } const handlePress = (item: LX.Music.MusicInfo, index: number) => { - if (isMultiSelectModeRef.current) { - handleSelect(item, index) - } else { - handlePlay(index) - } + // console.log(global.lx.homePagerIdle) + requestAnimationFrame(() => { + // console.log(global.lx.homePagerIdle) + if (!global.lx.homePagerIdle) return + if (isMultiSelectModeRef.current) { + handleSelect(item, index) + } else { + handlePlay(index) + } + }) } const handleLongPress = (item: LX.Music.MusicInfo, index: number) => { diff --git a/src/screens/Home/Views/Mylist/index.tsx b/src/screens/Home/Views/Mylist/index.tsx index 4d45d64f5..9c6c1e5c9 100644 --- a/src/screens/Home/Views/Mylist/index.tsx +++ b/src/screens/Home/Views/Mylist/index.tsx @@ -1,21 +1,24 @@ import React, { useEffect, useRef } from 'react' -import { type DrawerLayoutAndroid } from 'react-native' import settingState from '@/store/setting/state' import MusicList from './MusicList' import MyList from './MyList' import { useTheme } from '@/store/theme/hook' -import DrawerLayoutFixed from '@/components/common/DrawerLayoutFixed' +import DrawerLayoutFixed, { type DrawerLayoutFixedType } from '@/components/common/DrawerLayoutFixed' import { COMPONENT_IDS } from '@/config/constant' import { scaleSizeW } from '@/utils/pixelRatio' +import type { InitState as CommonState } from '@/store/common/state' const MAX_WIDTH = scaleSizeW(400) export default () => { - const drawer = useRef(null) + const drawer = useRef(null) const theme = useTheme() // const [width, setWidth] = useState(0) useEffect(() => { + const handleFixDrawer = (id: CommonState['navActiveId']) => { + if (id == 'nav_love') drawer.current?.fixWidth() + } const changeVisible = (visible: boolean) => { if (visible) { requestAnimationFrame(() => { @@ -25,8 +28,10 @@ export default () => { drawer.current?.closeDrawer() } } + // setWidth(getWindowSise().width * 0.82) + global.app_event.on('homeNavPagerChanged', handleFixDrawer) global.app_event.on('changeLoveListVisible', changeVisible) // 就放旋转屏幕后的宽度没有更新的问题 @@ -38,8 +43,9 @@ export default () => { // }) return () => { + global.app_event.off('homeNavPagerChanged', handleFixDrawer) global.app_event.off('changeLoveListVisible', changeVisible) - // changeEvent.remove() + // changeEvent.remove() } }, []) diff --git a/src/screens/Home/Views/Search/MusicList.tsx b/src/screens/Home/Views/Search/MusicList.tsx index 4671109ab..9f86f868d 100644 --- a/src/screens/Home/Views/Search/MusicList.tsx +++ b/src/screens/Home/Views/Search/MusicList.tsx @@ -82,6 +82,7 @@ export default forwardRef((props, ref) => { ref={listRef} onRefresh={handleRefresh} onLoadMore={handleLoadMore} + checkHomePagerIdle /> }) diff --git a/src/screens/Home/Views/SongList/index.tsx b/src/screens/Home/Views/SongList/index.tsx index 810b7d6dd..6a5f2a022 100644 --- a/src/screens/Home/Views/SongList/index.tsx +++ b/src/screens/Home/Views/SongList/index.tsx @@ -1,20 +1,23 @@ import React, { useEffect, useRef } from 'react' -import { type DrawerLayoutAndroid } from 'react-native' import settingState from '@/store/setting/state' import Content from './Content' import TagList from './TagList' import { useTheme } from '@/store/theme/hook' -import DrawerLayoutFixed from '@/components/common/DrawerLayoutFixed' +import DrawerLayoutFixed, { type DrawerLayoutFixedType } from '@/components/common/DrawerLayoutFixed' import { COMPONENT_IDS } from '@/config/constant' import { scaleSizeW } from '@/utils/pixelRatio' +import type { InitState as CommonState } from '@/store/common/state' const MAX_WIDTH = scaleSizeW(560) export default () => { - const drawer = useRef(null) + const drawer = useRef(null) const theme = useTheme() useEffect(() => { + const handleFixDrawer = (id: CommonState['navActiveId']) => { + if (id == 'nav_songlist') drawer.current?.fixWidth() + } const handleShow = () => { requestAnimationFrame(() => { drawer.current?.openDrawer() @@ -24,10 +27,12 @@ export default () => { drawer.current?.closeDrawer() } + global.app_event.on('homeNavPagerChanged', handleFixDrawer) global.app_event.on('showSonglistTagList', handleShow) global.app_event.on('hideSonglistTagList', handleHide) return () => { + global.app_event.off('homeNavPagerChanged', handleFixDrawer) global.app_event.off('showSonglistTagList', handleShow) global.app_event.off('hideSonglistTagList', handleHide) } diff --git a/src/store/Provider/ThemeProvider.tsx b/src/store/Provider/ThemeProvider.tsx index bb1e5939e..758831557 100644 --- a/src/store/Provider/ThemeProvider.tsx +++ b/src/store/Provider/ThemeProvider.tsx @@ -9,9 +9,14 @@ export default memo(({ children }: { const [theme, setTheme] = useState(themeState.theme) useEffect(() => { - global.state_event.on('themeUpdated', setTheme) + const handleUpdateTheme = (theme: LX.ActiveTheme) => { + requestAnimationFrame(() => { + setTheme(theme) + }) + } + global.state_event.on('themeUpdated', handleUpdateTheme) return () => { - global.state_event.off('themeUpdated', setTheme) + global.state_event.off('themeUpdated', handleUpdateTheme) } }, []) diff --git a/src/types/app.d.ts b/src/types/app.d.ts index e6a7c33cb..e65d52aaf 100644 --- a/src/types/app.d.ts +++ b/src/types/app.d.ts @@ -38,6 +38,11 @@ interface GlobalData { settingActiveId: SettingScreenIds + /** + * 首页是否正在滚动中，用于防止意外误触播放歌曲 + */ + homePagerIdle: boolean + // windowInfo: { // screenW: number // screenH: number