u

code/allapp/allapp-rn/src/app/(tabs)/_layout.tsx

@@ -1,43 +1,40 @@
-import type { icons } from 'lucide-react-native'
 import type { SortableGridRenderItem } from 'react-native-sortables'
+import type { NavItem } from '@/store/navigation'
 import { Slot, usePathname, useRouter } from 'expo-router'
 import { useCallback, useEffect, useState } from 'react'
-import { Pressable, Text, TouchableOpacity, Vibration, View } from 'react-native'
+import { Text, TouchableOpacity, View } from 'react-native'
 import Animated, { useAnimatedRef } from 'react-native-reanimated'
 import Sortable from 'react-native-sortables'
 import { ADrawer, LucideIcon } from '@/components/common/ao'
-
-interface NavItem {
-  label: string
-  path: string
-  icon: keyof typeof icons
-}
-
-const NAV_MENUS: NavItem[] = [
-  { label: '记账', path: '/money', icon: 'CircleDollarSign' },
-  { label: '恋爱记', path: '/love', icon: 'Heart' },
-  { label: '聊天', path: '/chat', icon: 'MessageCircle' },
-  { label: '个人中心', path: '/user', icon: 'CircleUserRound' },
-]
+import { useNavStore } from '@/store/navigation'
 
 export default function TabsLayout() {
   const scrollableRef = useAnimatedRef<Animated.ScrollView>()
 
   const router = useRouter()
   const pathname = usePathname()
+  const navStore = useNavStore()
+
   const [showNavDrawer, setShowNavDrawer] = useState(false)
-  const [draggingId, setDraggingId] = useState<string>('')
+
   const [currentNav, setCurrentNav] = useState<NavItem>({
-    label: '',
-    path: '',
-    icon: 'AArrowDown',
+    label: 'Welcome',
+    path: '/',
+    icon: 'Sparkles',
   })
 
   useEffect(() => {
-    const current = NAV_MENUS.find(item => item.path === pathname)
+    const current = navStore.navMenus.find(item => item.path === pathname)
     if (current) {
       setCurrentNav(current)
     }
+    else {
+      setCurrentNav({
+        label: 'Welcome',
+        path: '/',
+        icon: 'Sparkles',
+      })
+    }
   }, [pathname])
 
   const refreshPage = () => {
@@ -46,15 +43,14 @@ export default function TabsLayout() {
 
   const renderNavItem = useCallback<SortableGridRenderItem<NavItem>>(
     ({ item }) => (
-      <Pressable
+      <TouchableOpacity
         className="
           flex
           flex-col
           items-center
           justify-center
-          bg-[white]
+          bg-[#f9f9f9]
           rounded-md
-          shadow-md
           p-3
         "
         onPress={() => {
@@ -66,7 +62,7 @@ export default function TabsLayout() {
         <Text className="text-sm mt-2">
           {item.label}
         </Text>
-      </Pressable>
+      </TouchableOpacity>
     ),
     [],
   )
@@ -86,6 +82,7 @@ export default function TabsLayout() {
           px-2
           gap-4
         "
+        style={{ zIndex: 0 }}
       >
         <View className="bg-white rounded-md shadow-lg h-12 w-12">
           <TouchableOpacity className="w-full h-full items-center justify-center">
@@ -128,11 +125,15 @@ export default function TabsLayout() {
             columnGap={16}
             rowGap={16}
             columns={3}
-            data={NAV_MENUS}
+            data={navStore.navMenus}
             keyExtractor={item => item.path}
             renderItem={renderNavItem}
             scrollableRef={scrollableRef}
             autoScrollActivationOffset={200}
+            showDropIndicator
+            onDragEnd={(dragData) => {
+              navStore.setNavMenus(dragData.data)
+            }}
           />
         </Animated.ScrollView>
       </ADrawer>