日常开发

App.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
+import { Image } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+
+// 页面组件
 import LoginScreen from './src/pages/Login';
 import TeamScreen from './src/pages/Team';
 import DataScreen from './src/pages/Data';
@@ -8,66 +12,114 @@ import PlayScreen from './src/pages/Play';
 import MatchScreen from './src/pages/Match';
 import MeScreen from './src/pages/Me';
 
+// 导入自定义图片（请替换为你的实际图片路径）
+import TeamIcon from './src/static/images/common/team.png';
+import TeamIconActive from './src/static/images/common/team_active.png';
+import DataIcon from './src/static/images/common/data.png';
+import DataIconActive from './src/static/images/common/data_active.png';
+import PlayIcon from './src/static/images/common/play.png';
+import PlayIconActive from './src/static/images/common/play_active.png';
+import MatchIcon from './src/static/images/common/match.png';
+import MatchIconActive from './src/static/images/common/match_active.png';
+import MeIcon from './src/static/images/common/me.png';
+import MeIconActive from './src/static/images/common/me_active.png';
+
 const Stack = createNativeStackNavigator();
+const Tab = createBottomTabNavigator();
+
+// 定义底部Tab导航
+function TabNavigator() {
+  return (
+    <Tab.Navigator
+      initialRouteName="Team"  // 设置默认显示Team页签
+      screenOptions={({ route }) => ({
+        tabBarIcon: ({ focused }) => {
+          if (route.name === 'Team') {
+            return (
+              <Image
+                source={focused ? TeamIconActive : TeamIcon}
+                style={{ width: 24, height: 24 }}
+                resizeMode="contain"
+              />
+            );
+          } else if (route.name === 'Data') {
+            return (
+              <Image
+                source={focused ? DataIconActive : DataIcon}
+                style={{ width: 24, height: 24 }}
+                resizeMode="contain"
+              />
+            );
+          } else if (route.name === 'Play') {
+            return (
+              <Image
+                source={focused ? PlayIconActive : PlayIcon}
+                style={{ width: 24, height: 24 }}
+                resizeMode="contain"
+              />
+            );
+          } else if (route.name === 'Match') {
+            return (
+              <Image
+                source={focused ? MatchIconActive : MatchIcon}
+                style={{ width: 24, height: 24 }}
+                resizeMode="contain"
+              />
+            );
+          } else if (route.name === 'Me') {
+            return (
+              <Image
+                source={focused ? MeIconActive : MeIcon}
+                style={{ width: 24, height: 24 }}
+                resizeMode="contain"
+              />
+            );
+          }
+          return null;
+        },
+        tabBarActiveTintColor: '#007AFF',
+        tabBarInactiveTintColor: '#999',
+        headerShown: false,
+        tabBarStyle: {
+          height: 58,
+          paddingBottom: 8,
+          paddingTop: 8,
+          backgroundColor: '#fff',
+          borderTopWidth: 0,
+          elevation: 5,
+          shadowColor: '#000',
+          shadowOffset: { width: 0, height: -2 },
+          shadowOpacity: 0.05,
+          shadowRadius: 5,
+        },
+      })}
+    >
+      <Tab.Screen name="Team" component={TeamScreen} options={{ title: '球队' }} />
+      <Tab.Screen name="Data" component={DataScreen} options={{ title: '数据' }} />
+      <Tab.Screen name="Play" component={PlayScreen} options={{ title: 'PLAY' }} />
+      <Tab.Screen name="Match" component={MatchScreen} options={{ title: '赛事' }} />
+      <Tab.Screen name="Me" component={MeScreen} options={{ title: '我的' }} />
+    </Tab.Navigator>
+  );
+}
 
 function App(): React.JSX.Element {
   return (
     <NavigationContainer>
-      <Stack.Navigator initialRouteName="Team">
+      <Stack.Navigator initialRouteName="MainTabs">
         <Stack.Screen
           name="Login"
           component={LoginScreen}
           options={{
-            title: '登录',
-            headerBackVisible: false,
-            headerShown: false,
-          }}
-        />
-        <Stack.Screen
-          name="Team"
-          component={TeamScreen}
-          options={{
-            title: '球队',
-            headerBackVisible: false,
-            headerShown: false,
-          }}
-        />
-
-        <Stack.Screen
-          name="Data"
-          component={DataScreen}
-          options={{
-            title: '数据',
-            headerBackVisible: false,
-            headerShown: false,
-          }}
-        />
-
-        <Stack.Screen
-          name="Play"
-          component={PlayScreen}
-          options={{
-            title: 'PLAY',
             headerBackVisible: false,
             headerShown: false,
           }}
         />
-
-        <Stack.Screen
-          name="Match"
-          component={MatchScreen}
-          options={{
-            title: '赛事',
-            headerBackVisible: false,
-            headerShown: false,
-          }}
-        />
-
+        
         <Stack.Screen
-          name="Me"
-          component={MeScreen}
+          name="MainTabs"
+          component={TabNavigator}
           options={{
-            title: '我的',
             headerBackVisible: false,
             headerShown: false,
           }}
@@ -78,3 +130,4 @@ function App(): React.JSX.Element {
 }
 
 export default App;
+    

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.1",
       "dependencies": {
         "@react-native/new-app-screen": "0.81.0",
+        "@react-navigation/bottom-tabs": "^7.4.6",
         "@react-navigation/native": "^7.1.17",
         "@react-navigation/native-stack": "^7.3.25",
         "axios": "^1.11.0",
@@ -3217,6 +3218,23 @@
         }
       }
     },
+    "node_modules/@react-navigation/bottom-tabs": {
+      "version": "7.4.6",
+      "resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-7.4.6.tgz",
+      "integrity": "sha512-f4khxwcL70O5aKfZFbxyBo5RnzPFnBNSXmrrT7q9CRmvN4mHov9KFKGQ3H4xD5sLonsTBtyjvyvPfyEC4G7f+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-navigation/elements": "^2.6.3",
+        "color": "^4.2.3"
+      },
+      "peerDependencies": {
+        "@react-navigation/native": "^7.1.17",
+        "react": ">= 18.2.0",
+        "react-native": "*",
+        "react-native-safe-area-context": ">= 4.0.0",
+        "react-native-screens": ">= 4.0.0"
+      }
+    },
     "node_modules/@react-navigation/core": {
       "version": "7.12.4",
       "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-7.12.4.tgz",

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@react-native/new-app-screen": "0.81.0",
+    "@react-navigation/bottom-tabs": "^7.4.6",
     "@react-navigation/native": "^7.1.17",
     "@react-navigation/native-stack": "^7.3.25",
     "axios": "^1.11.0",

src/pages/Data/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import TabScreen from '../../components/Tab';
 
 const DataScreen = () => {
   const navigation = useNavigation();
@@ -10,10 +9,9 @@ const DataScreen = () => {
   };
   return (
     <View style={styles.main}>
-      <View>
+      <Text>
 数据
-      </View>
-      <TabScreen></TabScreen>
+      </Text>
     </View>
   );
 };

src/pages/Match/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import TabScreen from '../../components/Tab';
 
 const MatchScreen = () => {
   const navigation = useNavigation();
@@ -10,10 +9,9 @@ const MatchScreen = () => {
   };
   return (
     <View style={styles.main}>
-      <View>
+      <Text>
  赛事
-      </View>
-      <TabScreen></TabScreen>
+      </Text>
     </View>
   );
 };

src/pages/Me/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import TabScreen from '../../components/Tab';
 
 const MeScreen = () => {
   const navigation = useNavigation();
@@ -10,10 +9,9 @@ const MeScreen = () => {
   };
   return (
     <View style={styles.main}>
-      <View>
+      <Text>
 我的
-      </View>
-      <TabScreen></TabScreen>
+      </Text>
     </View>
   );
 };

src/pages/Play/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import TabScreen from '../../components/Tab';
 
 const PlayScreen = () => {
   const navigation = useNavigation();
@@ -10,10 +9,9 @@ const PlayScreen = () => {
   };
   return (
     <View style={styles.main}>
-      <View>
+      <Text>
 Play
-      </View>
-      <TabScreen></TabScreen>
+      </Text>
     </View>
   );
 };

src/pages/Team/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import TabScreen from '../../components/Tab';
 
 const TeamScreen = () => {
   const navigation = useNavigation();
@@ -10,10 +9,9 @@ const TeamScreen = () => {
   };
   return (
     <View style={styles.main}>
-      <View>
+      <Text>
 球队
-      </View>
-      <TabScreen></TabScreen>
+      </Text>
     </View>
   );
 };

src/utils/index.ts

@@ -1,5 +1,4 @@
 import dayjs from 'dayjs';
-import dataDictionary from './dataDictionary';
 
 let utils = {
   /**