拆分主题设置

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "lx-music-mobile",
-  "version": "1.0.0-beta.15",
+  "version": "1.0.0-beta.16",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "lx-music-mobile",
-      "version": "1.0.0-beta.15",
+      "version": "1.0.0-beta.16",
       "license": "Apache-2.0",
       "dependencies": {
         "@craftzdog/react-native-buffer": "^6.0.5",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lx-music-mobile",
-  "version": "1.0.0-beta.15",
+  "version": "1.0.0-beta.16",
   "versionCode": 53,
   "private": true,
   "scripts": {

src/lang/en_us.json

@@ -272,6 +272,7 @@
   "setting_sync_port_tip": "Please enter the synchronization service port number",
   "setting_sync_status": "Status: {status}",
   "setting_sync_status_enabled": "Connected",
+  "setting_theme": "theme settings",
   "setting_version": "Software Update",
   "setting_version_show_ver_modal": "Open the update window 🚀",
   "share_card_title_music": "Share {name} to...",

src/lang/zh_cn.json

@@ -272,6 +272,7 @@
   "setting_sync_port_tip": "请输入同步服务端口号",
   "setting_sync_status": "状态：{status}",
   "setting_sync_status_enabled": "已连接",
+  "setting_theme": "主题设置",
   "setting_version": "软件更新",
   "setting_version_show_ver_modal": "打开更新窗口 🚀",
   "share_card_title_music": "将 {name} 分享到...",

src/screens/Home/Views/Setting/Main.tsx

@@ -2,6 +2,7 @@ import React, { forwardRef, useImperativeHandle, useMemo, useState } from 'react
 import { InteractionManager } from 'react-native'
 
 import Basic from './settings/Basic'
+import Theme from './settings/Theme'
 import Player from './settings/Player'
 import LyricDesktop from './settings/LyricDesktop'
 import Search from './settings/Search'
@@ -14,6 +15,7 @@ import About from './settings/About'
 
 export const SETTING_SCREENS = [
   'basic',
+  'theme',
   'player',
   'lyric_desktop',
   'search',
@@ -49,6 +51,7 @@ const Main = forwardRef<MainType, {}>((props, ref) => {
 
   const component = useMemo(() => {
     switch (id) {
+      case 'theme': return <Theme />
       case 'player': return <Player />
       case 'lyric_desktop': return <LyricDesktop />
       case 'search': return <Search />

src/screens/Home/Views/Setting/Vertical/NavList.tsx

@@ -0,0 +1,35 @@
+import React, { forwardRef, useImperativeHandle, useState } from 'react'
+import type { SettingScreenIds } from '../Main'
+
+import NavList from '../NavList'
+
+export interface NavListTypeProps {
+  onChangeId: (id: SettingScreenIds) => void
+}
+export interface NavListTypeType {
+  show: () => void
+}
+
+
+export default forwardRef<NavListTypeType, NavListTypeProps>(({ onChangeId }, ref) => {
+  const [visible, setVisible] = useState(false)
+
+  useImperativeHandle(ref, () => {
+    let isInited = false
+    return {
+      show() {
+        if (isInited) return
+        requestAnimationFrame(() => {
+          setVisible(true)
+        })
+        isInited = true
+      },
+    }
+  })
+
+  return (
+    visible
+      ? <NavList onChangeId={onChangeId} />
+      : null
+  )
+})

src/screens/Home/Views/Setting/Vertical/index.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useRef } from 'react'
 import { ScrollView, View, type DrawerLayoutAndroid } from 'react-native'
 // import { getWindowSise, onDimensionChange } from '@/utils/tools'
-import NavList from '../NavList'
+import NavList, { type NavListTypeType } from './NavList'
 import Header, { type HeaderType } from './Header'
 import Main, { type SettingScreenIds, type MainType } from '../Main'
 import { useSettingValue } from '@/store/setting/hook'
@@ -15,11 +15,17 @@ const MAX_WIDTH = scaleSizeW(300)
 
 const Content = () => {
   const drawer = useRef<DrawerLayoutAndroid>(null)
+  const navListRef = useRef<NavListTypeType>(null)
   const headerRef = useRef<HeaderType>(null)
   const mainRef = useRef<MainType>(null)
   const drawerLayoutPosition = useSettingValue('common.drawerLayoutPosition')
   const theme = useTheme()
 
+  const handleShowDrawer = useCallback(() => {
+    drawer.current?.openDrawer()
+    navListRef.current?.show()
+  }, [])
+
   const handleChangeId = useCallback((id: SettingScreenIds) => {
     drawer.current?.closeDrawer()
     mainRef.current?.setActiveId(id)
@@ -28,7 +34,7 @@ const Content = () => {
 
   const navigationView = () => (
     <View style={styles.nav}>
-      <NavList onChangeId={handleChangeId} />
+      <NavList ref={navListRef} onChangeId={handleChangeId} />
     </View>
   )
   // console.log('render drawer content')
@@ -45,7 +51,7 @@ const Content = () => {
       drawerBackgroundColor={theme['c-content-background']}
       style={{ elevation: 1 }}
     >
-      <Header ref={headerRef} onShowNavBar={() => drawer.current?.openDrawer()} />
+      <Header ref={headerRef} onShowNavBar={handleShowDrawer} />
       <ScrollView contentContainerStyle={styles.main} keyboardShouldPersistTaps={'always'}>
         <Main ref={mainRef} />
       </ScrollView>

src/screens/Home/Views/Setting/settings/Basic/index.tsx

@@ -1,13 +1,11 @@
 import React, { memo } from 'react'
 
 import Section from '../../components/Section'
-import Theme from './Theme'
 import Source from './Source'
 import SourceName from './SourceName'
 import Language from './Language'
 import FontSize from './FontSize'
 import ShareType from './ShareType'
-import IsAutoTheme from './IsAutoTheme'
 import IsStartupAutoPlay from './IsStartupAutoPlay'
 import IsAutoHidePlayBar from './IsAutoHidePlayBar'
 import IsShowBackBtn from './IsShowBackBtn'
@@ -20,8 +18,6 @@ export default memo(() => {
 
   return (
     <Section title={t('setting_basic')}>
-      <Theme />
-      <IsAutoTheme />
       <IsStartupAutoPlay />
       <IsShowBackBtn />
       <IsAutoHidePlayBar />

src/screens/Home/Views/Setting/settings/Theme/index.tsx

@@ -0,0 +1,17 @@
+import React, { memo } from 'react'
+
+import Section from '../../components/Section'
+import Theme from './Theme'
+import IsAutoTheme from './IsAutoTheme'
+import { useI18n } from '@/lang/i18n'
+
+export default memo(() => {
+  const t = useI18n()
+
+  return (
+    <Section title={t('setting_theme')}>
+      <Theme />
+      <IsAutoTheme />
+    </Section>
+  )
+})