优化使用体验

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.

publish/changeLog.md

@@ -1,3 +1,8 @@
-### 修复
+### 优化
 
-- 修复在线列表翻页问题
+- 竖屏下的首页允许滑动切换页面（恢复v0.x.x的切页操作）
+- 优化更新语言、主题设置时的流畅度
+
+### 其他
+
+- 启用新架构

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<ListType, ListProps>(({
   onPlayList,
   progressViewOffset,
   ListHeaderComponent,
+  checkHomePagerIdle,
 }, ref) => {
   // const t = useI18n()
   const theme = useTheme()
@@ -139,16 +141,19 @@ const List = forwardRef<ListType, ListProps>(({
   }
 
   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) => {

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<OnlineListType, OnlineListProps>(({
   onPlayList,
   progressViewOffset,
   ListHeaderComponent,
+  checkHomePagerIdle = false,
 }, ref) => {
   const listRef = useRef<ListType>(null)
   const multipleModeBarRef = useRef<MultipleModeBarType>(null)
@@ -86,6 +88,7 @@ export default forwardRef<OnlineListType, OnlineListProps>(({
           onPlayList={onPlayList}
           progressViewOffset={progressViewOffset}
           ListHeaderComponent={ListHeaderComponent}
+          checkHomePagerIdle={checkHomePagerIdle}
         />
         <MultipleModeBar
           ref={multipleModeBarRef}

src/components/common/DrawerLayoutFixed.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback, useRef, useState } from 'react'
+import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react'
 import { DrawerLayoutAndroid, type DrawerLayoutAndroidProps, View, type LayoutChangeEvent } from 'react-native'
 // import { getWindowSise } from '@/utils/tools'
 import { usePageVisible } from '@/store/common/hook'
@@ -10,18 +10,43 @@ interface Props extends DrawerLayoutAndroidProps {
   widthPercentageMax?: number
 }
 
-const DrawerLayoutFixed = forwardRef<DrawerLayoutAndroid, Props>(({ visibleNavNames, widthPercentage, widthPercentageMax, children, ...props }, ref) => {
+export interface DrawerLayoutFixedType {
+  openDrawer: () => void
+  closeDrawer: () => void
+  fixWidth: () => void
+}
+
+const DrawerLayoutFixed = forwardRef<DrawerLayoutFixedType, Props>(({ visibleNavNames, widthPercentage, widthPercentageMax, children, ...props }, ref) => {
+  const drawerLayoutRef = useRef<DrawerLayoutAndroid>(null)
   const [w, setW] = useState<number | string>('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<DrawerLayoutAndroid, Props>(({ visibleNavNa
       style={{ width: w, flex: 1 }}
     >
       <DrawerLayoutAndroid
-        ref={ref}
+        ref={drawerLayoutRef}
         keyboardDismissMode="on-drag"
         drawerWidth={drawerWidth}
         {...props}

src/config/globalData.ts

@@ -55,6 +55,8 @@ global.lx = {
 
   settingActiveId: 'basic',
 
+  homePagerIdle: true,
+
   // syncKeyInfo: initValue as LX.Sync.KeyInfo,
 
   // windowInfo: {

src/core/common.ts

@@ -40,7 +40,10 @@ export const updateSetting = (setting: Partial<LX.AppSetting>) => {
 
 export const setLanguage = (locale: Parameters<typeof applyLanguage>[0]) => {
   updateSetting({ 'common.langId': locale })
-  applyLanguage(locale)
+  global.state_event.languageChanged(locale)
+  requestAnimationFrame(() => {
+    applyLanguage(locale)
+  })
 }
 
 

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

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)
   }

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) => {

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({

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<DrawerLayoutAndroid>(null)
+  const drawer = useRef<DrawerLayoutFixedType>(null)
   const drawerLayoutPosition = useSettingValue('common.drawerLayoutPosition')
 
   useEffect(() => {