u

code/app/base-app/src/app/(tabs)/_layout.tsx

@@ -1,23 +1,70 @@
-import FontAwesome from '@expo/vector-icons/FontAwesome'
 import { Tabs } from 'expo-router'
+import { CircleDollarSign, CircleUserRound, Heart, Layers, MessageSquare } from 'lucide-react-native'
+import React, { useRef } from 'react'
+import { Animated, Pressable, View } from 'react-native'
+
+const tabItems = [
+  { name: 'finance', icon: <CircleDollarSign strokeWidth={1.5} size={24} /> },
+  { name: 'dating', icon: <Heart strokeWidth={1.5} size={24} /> },
+  { name: 'app-center', icon: <Layers strokeWidth={1.5} size={24} /> },
+  { name: 'chat', icon: <MessageSquare strokeWidth={1.5} size={24} /> },
+  { name: 'profile', icon: <CircleUserRound strokeWidth={1.5} size={24} /> },
+]
+
+// 自定义 TabBar
+function CustomTabBar({ state, descriptors, navigation }: any) {
+  const scales = useRef(tabItems.map(() => new Animated.Value(1))).current
+
+  return (
+    <View className="flex-row justify-around bg-white border-t border-gray-200 py-2">
+      {state.routes.map((route: any, index: number) => {
+        const item = tabItems.find(i => i.name === route.name)
+        if (!item)
+          return null
+
+        const isFocused = state.index === index
+        const color = isFocused ? '#333333' : '#9ca3af'
+
+        const onPressIn = () =>
+          Animated.spring(scales[index], { toValue: 0.8, useNativeDriver: true }).start()
+        const onPressOut = () =>
+          Animated.spring(scales[index], { toValue: 1, useNativeDriver: true }).start()
+
+        const onPress = () => {
+          const event = navigation.emit({
+            type: 'tabPress',
+            target: route.key,
+            canPreventDefault: true,
+          })
+          if (!isFocused && !event.defaultPrevented) {
+            navigation.navigate(route.name)
+          }
+        }
+
+        return (
+          <Pressable
+            key={route.key}
+            onPress={onPress}
+            onPressIn={onPressIn}
+            onPressOut={onPressOut}
+            className="flex-1 items-center justify-center"
+          >
+            <Animated.View style={{ transform: [{ scale: scales[index] }] }} className="items-center p-2">
+              {React.cloneElement(item.icon, { color })}
+            </Animated.View>
+          </Pressable>
+        )
+      })}
+    </View>
+  )
+}
 
 export default function TabLayout() {
   return (
-    <Tabs screenOptions={{ tabBarActiveTintColor: 'blue', tabBarShowLabel: false }}>
-      <Tabs.Screen
-        name="index"
-        options={{
-          headerShown: false,
-          tabBarIcon: ({ color }) => <FontAwesome size={28} name="home" color={color} />,
-        }}
-      />
-      <Tabs.Screen
-        name="settings"
-        options={{
-          headerShown: false,
-          tabBarIcon: ({ color }) => <FontAwesome size={28} name="cog" color={color} />,
-        }}
-      />
+    <Tabs screenOptions={{ headerShown: false, tabBarShowLabel: false }} tabBar={props => <CustomTabBar {...props} />}>
+      {tabItems.map(item => (
+        <Tabs.Screen key={item.name} name={item.name} options={{ tabBarIcon: () => null }} />
+      ))}
     </Tabs>
   )
 }

code/app/base-app/src/app/(tabs)/chat.tsx

@@ -0,0 +1,17 @@
+import { StyleSheet, Text, View } from 'react-native'
+
+export default function Tab() {
+  return (
+    <View style={styles.container}>
+      <Text>Chat [Settings]</Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})

code/app/base-app/src/app/(tabs)/dating.tsx

@@ -0,0 +1,17 @@
+import { StyleSheet, Text, View } from 'react-native'
+
+export default function Tab() {
+  return (
+    <View style={styles.container}>
+      <Text>heart [Settings]</Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})

code/app/base-app/src/app/(tabs)/finance.tsx

@@ -0,0 +1,17 @@
+import { StyleSheet, Text, View } from 'react-native'
+
+export default function Tab() {
+  return (
+    <View style={styles.container}>
+      <Text>Tab [Credit]</Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})

code/app/base-app/src/app/_layout.tsx

@@ -5,9 +5,7 @@ import * as SplashScreen from 'expo-splash-screen'
 import { StatusBar } from 'expo-status-bar'
 import { RefreshCw } from 'lucide-react-native'
 import { useEffect } from 'react'
-import { Image, ScrollView, Text, View } from 'react-native'
 import { EmptyState } from '@/components/empty-status'
-import { Button, ButtonIcon, ButtonText } from '@/components/ui/button'
 import { GluestackUIProvider } from '@/components/ui/gluestack-ui-provider'
 import '@/styles/global.css'