修改竖屏设置菜单UI布局

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

@@ -7,7 +7,7 @@ import { useTheme } from '@/store/theme/hook'
 import { createStyle } from '@/utils/tools'
 import Text from '@/components/common/Text'
 import { scaleSizeH } from '@/utils/pixelRatio'
-import { SETTING_SCREENS, type SettingScreenIds } from './Main'
+import { SETTING_SCREENS, type SettingScreenIds } from '../Main'
 import { useI18n } from '@/lang'
 
 type FlatListType = FlatListProps<SettingScreenIds>

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

@@ -1,7 +1,7 @@
 import React, { useRef } from 'react'
 import { ScrollView, View } from 'react-native'
 import NavList from './NavList'
-import Main, { type MainType } from './Main'
+import Main, { type MainType } from '../Main'
 import { createStyle } from '@/utils/tools'
 import { BorderWidths } from '@/theme'
 import { useTheme } from '@/store/theme/hook'

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

@@ -1,35 +1,98 @@
-import React, { forwardRef, useImperativeHandle, useState } from 'react'
-import type { SettingScreenIds } from '../Main'
+import React, { memo, useCallback, useState } from 'react'
+import { View, TouchableOpacity, ScrollView } from 'react-native'
 
-import NavList from '../NavList'
-
-export interface NavListTypeProps {
-  onChangeId: (id: SettingScreenIds) => void
-}
-export interface NavListTypeType {
-  show: () => void
-}
+import { useTheme } from '@/store/theme/hook'
+import { createStyle } from '@/utils/tools'
+import Text from '@/components/common/Text'
+import { SETTING_SCREENS, type SettingScreenIds } from '../Main'
+import { useI18n } from '@/lang'
+import { BorderRadius, BorderWidths } from '@/theme'
 
 
-export default forwardRef<NavListTypeType, NavListTypeProps>(({ onChangeId }, ref) => {
-  const [visible, setVisible] = useState(false)
+const ListItem = memo(({ id, activeId, onPress }: {
+  onPress: (item: SettingScreenIds) => void
+  activeId: string
+  id: SettingScreenIds
+}) => {
+  const theme = useTheme()
+  const t = useI18n()
 
-  useImperativeHandle(ref, () => {
-    let isInited = false
-    return {
-      show() {
-        if (isInited) return
-        requestAnimationFrame(() => {
-          setVisible(true)
-        })
-        isInited = true
-      },
+  const active = activeId == id
+
+  const handlePress = () => {
+    onPress(id)
   }
-  })
 
   return (
-    visible
-      ? <NavList onChangeId={onChangeId} />
-      : null
+    <View style={{ ...styles.listItem, backgroundColor: active ? theme['c-primary-background-active'] : 'transparent' }}>
+      <TouchableOpacity style={styles.listName} onPress={handlePress}>
+        <Text numberOfLines={1} size={16} color={active ? theme['c-primary-font'] : theme['c-font']}>{t(`setting_${id}`)}</Text>
+      </TouchableOpacity>
+    </View>
+  )
+}, (prevProps, nextProps) => {
+  return !!(prevProps.id === nextProps.id &&
+    prevProps.activeId != nextProps.id &&
+    nextProps.activeId != nextProps.id
   )
 })
+
+
+export default ({ onChangeId }: {
+  onChangeId: (id: SettingScreenIds) => void
+}) => {
+  const [activeId, setActiveId] = useState(global.lx.settingActiveId)
+  const theme = useTheme()
+
+  const handleChangeId = useCallback((id: SettingScreenIds) => {
+    onChangeId(id)
+    setActiveId(id)
+    global.lx.settingActiveId = id
+  }, [])
+
+  return (
+    <ScrollView style={{ ...styles.container, borderBottomColor: theme['c-border-background'] }} contentContainerStyle={styles.contentContainer} keyboardShouldPersistTaps={'always'}>
+      {
+        SETTING_SCREENS.map(id => <ListItem id={id} activeId={activeId} onPress={handleChangeId} />)
+      }
+    </ScrollView>
+  )
+}
+
+
+const styles = createStyle({
+  container: {
+    height: '20%',
+    flexGrow: 0,
+    flexShrink: 0,
+    borderBottomWidth: BorderWidths.normal,
+  },
+  contentContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    paddingHorizontal: 5,
+    // backgroundColor: 'rgba(0, 0, 0, 0.1)',
+  },
+  // listContainer: {
+  //   // borderBottomWidth: BorderWidths.normal2,
+  // },
+
+  listItem: {
+    width: '33.33%',
+    height: 'auto',
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 5,
+    paddingVertical: 8,
+    borderRadius: BorderRadius.normal,
+    marginBottom: 5,
+  },
+  listName: {
+    // justifyContent: 'center',
+    alignItems: 'center',
+    flexGrow: 1,
+    flexShrink: 1,
+    // paddingLeft: 5,
+    // backgroundColor: 'rgba(0,0,0,0.1)',
+  },
+})

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

@@ -1,70 +1,37 @@
 import React, { useCallback, useRef } from 'react'
 import { ScrollView, View, type DrawerLayoutAndroid } from 'react-native'
 // import { getWindowSise, onDimensionChange } from '@/utils/tools'
-import NavList, { type NavListTypeType } from './NavList'
-import Header, { type HeaderType } from './Header'
+import NavList from './NavList'
 import Main, { type SettingScreenIds, type MainType } from '../Main'
-import { useSettingValue } from '@/store/setting/hook'
-import { COMPONENT_IDS } from '@/config/constant'
-import DrawerLayoutFixed from '@/components/common/DrawerLayoutFixed'
-import { scaleSizeW } from '@/utils/pixelRatio'
 import { createStyle } from '@/utils/tools'
-import { useTheme } from '@/store/theme/hook'
 
-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)
-    headerRef.current?.setActiveId(id)
   }, [])
 
-  const navigationView = () => (
-    <View style={styles.nav}>
-      <NavList ref={navListRef} onChangeId={handleChangeId} />
-    </View>
-  )
   // console.log('render drawer content')
 
   return (
-    <DrawerLayoutFixed
-      ref={drawer}
-      widthPercentage={0.6}
-      widthPercentageMax={MAX_WIDTH}
-      visibleNavNames={[COMPONENT_IDS.home]}
-      // drawerWidth={width}
-      drawerPosition={drawerLayoutPosition}
-      renderNavigationView={navigationView}
-      drawerBackgroundColor={theme['c-content-background']}
-      style={{ elevation: 1 }}
-    >
-      <Header ref={headerRef} onShowNavBar={handleShowDrawer} />
+    <View style={styles.container}>
+      <NavList onChangeId={handleChangeId} />
       <ScrollView contentContainerStyle={styles.main} keyboardShouldPersistTaps={'always'}>
         <Main ref={mainRef} />
       </ScrollView>
-      {/* <View style={styles.container}>
-      </View> */}
-    </DrawerLayoutFixed>
+    </View>
   )
 }
 
 const styles = createStyle({
-  nav: {
-    paddingTop: 10,
-    paddingBottom: 10,
+  container: {
+    flex: 1,
+    flexDirection: 'column',
   },
   main: {
     paddingLeft: 15,

src/utils/tools.ts

@@ -385,6 +385,7 @@ export const trasformeStyle = <T extends Style>(styles: T): T => {
       case 'marginBottom':
       case 'paddingTop':
       case 'paddingBottom':
+      case 'paddingVertical':
         newStyle[p] = scaleSizeH(v)
         break
       case 'width':
@@ -393,6 +394,7 @@ export const trasformeStyle = <T extends Style>(styles: T): T => {
       case 'marginRight':
       case 'paddingLeft':
       case 'paddingRight':
+      case 'paddingHorizontal':
         newStyle[p] = scaleSizeW(v)
         break
       case 'padding':