更换Tab图标

app/(tabs)/_layout.tsx

@@ -1,6 +1,6 @@
 import { Tabs } from 'expo-router';
 import React from 'react';
-import { Platform } from 'react-native';
+import { Platform, View, Image, StyleSheet } from 'react-native';
 
 import { HapticTab } from '@/components/HapticTab';
 import { IconSymbol } from '@/components/ui/IconSymbol';
@@ -8,6 +8,15 @@ import TabBarBackground from '@/components/ui/TabBarBackground';
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
 
+const icon_tab1_s = require('@/assets/images/tab/icon_tab1_s.png');
+const icon_tab1_u = require('@/assets/images/tab/icon_tab1_u.png');
+const icon_tab2_s = require('@/assets/images/tab/icon_tab2_s.png');
+const icon_tab2_u = require('@/assets/images/tab/icon_tab2_u.png');
+const icon_tab3_s = require('@/assets/images/tab/icon_tab3_s.png');
+const icon_tab3_u = require('@/assets/images/tab/icon_tab3_u.png');
+const icon_tab4_s = require('@/assets/images/tab/icon_tab4_s.png');
+const icon_tab4_u = require('@/assets/images/tab/icon_tab4_u.png');
+
 export default function TabLayout() {
   const colorScheme = useColorScheme();
 
@@ -30,30 +39,45 @@ export default function TabLayout() {
         name="index"
         options={{
           title: '测量',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
+          tabBarIcon: ({ focused }) => (
+            <Image style={styles.tabIcon} source={focused ? icon_tab1_s : icon_tab1_u} />
+          ),
         }}
       />
       <Tabs.Screen
         name="explore"
         options={{
           title: '设置',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
+          tabBarIcon: ({ focused }) => (
+            <Image style={styles.tabIcon} source={focused ? icon_tab2_s : icon_tab2_u} />
+          ),
         }}
       />
       <Tabs.Screen
         name="ble"
         options={{
           title: '蓝牙',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
+          tabBarIcon: ({ focused }) => (
+            <Image style={styles.tabIcon} source={focused ? icon_tab3_s : icon_tab3_u} />
+          ),
         }}
       />
       <Tabs.Screen
         name="mine"
         options={{
           title: '我的',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
+          tabBarIcon: ({ focused }) => (
+            <Image style={styles.tabIcon} source={focused ? icon_tab4_s : icon_tab4_u} />
+          ),
         }}
       />
     </Tabs>
   );
 }
+
+const styles = StyleSheet.create({
+  tabIcon: {
+    width: 22,
+    height: 22,
+  },
+});

assets/images/tab/icon_tab1_s.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="22.000001907348633" height="22.000001907348633" viewBox="0 0 22.000001907348633 22.000001907348633"><g><path d="M0.932908,6.25781L2.61076,4.50742L3.65941,5.60141L1.98156,7.35181L3.03022,8.4458L4.70807,6.58601L5.75672,7.68001L4.07888,9.4304L4.39347,10.3056L9.95135,4.61682L6.17619,0.350231C5.54699,-0.196767,4.39347,-0.0873676,3.86914,0.56903L0.303714,4.06982C-0.220614,4.61682,-0.0108827,5.38261,0.513445,5.92961L0.932908,6.25781ZM0.513445,20.6986C0.40858,21.1362,0.723176,21.4644,1.14264,21.355L7.53944,19.2764L2.61076,14.244L0.513445,20.6986ZM21.3817,5.49201C21.906,4.94502,21.906,4.17922,21.3817,3.63222L18.3406,0.56903C17.8163,0.0220321,16.9773,0.0220321,16.453,0.56903L14.2508,2.75702L19.1795,7.68001L21.3817,5.49201ZM13.5168,3.52282L3.34482,13.5876L8.2735,18.5106L18.4455,8.3364L13.5168,3.52282ZM21.6963,15.6662L17.0822,11.1808L11.4195,16.7602L12.4681,17.8542L14.2508,16.1038L15.2995,17.1978L13.5168,18.9482L14.5654,20.0422L16.3481,18.2918L17.3968,19.3858L15.6141,21.1362L15.9287,21.4644C16.453,22.0114,17.2919,22.2302,17.9211,21.6832L21.4866,18.1824C22.0109,17.4166,22.2206,16.2132,21.6963,15.6662Z" fill="#3165D2" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></svg>

assets/images/tab/icon_tab1_u.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="22.000001907348633" height="22.000001907348633" viewBox="0 0 22.000001907348633 22.000001907348633"><g><path d="M0.932908,6.25781L2.61076,4.50742L3.65941,5.60141L1.98156,7.35181L3.03022,8.4458L4.70807,6.58601L5.75672,7.68001L4.07888,9.4304L4.39347,10.3056L9.95135,4.61682L6.17619,0.350231C5.54699,-0.196767,4.39347,-0.0873676,3.86914,0.56903L0.303714,4.06982C-0.220614,4.61682,-0.0108827,5.38261,0.513445,5.92961L0.932908,6.25781ZM0.513445,20.6986C0.40858,21.1362,0.723176,21.4644,1.14264,21.355L7.53944,19.2764L2.61076,14.244L0.513445,20.6986ZM21.3817,5.49201C21.906,4.94502,21.906,4.17922,21.3817,3.63222L18.3406,0.56903C17.8163,0.0220321,16.9773,0.0220321,16.453,0.56903L14.2508,2.75702L19.1795,7.68001L21.3817,5.49201ZM13.5168,3.52282L3.34482,13.5876L8.2735,18.5106L18.4455,8.3364L13.5168,3.52282ZM21.6963,15.6662L17.0822,11.1808L11.4195,16.7602L12.4681,17.8542L14.2508,16.1038L15.2995,17.1978L13.5168,18.9482L14.5654,20.0422L16.3481,18.2918L17.3968,19.3858L15.6141,21.1362L15.9287,21.4644C16.453,22.0114,17.2919,22.2302,17.9211,21.6832L21.4866,18.1824C22.0109,17.4166,22.2206,16.2132,21.6963,15.6662Z" fill="#666666" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></svg>

constants/Colors.ts

@@ -3,7 +3,7 @@
  * There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
  */
 
-const tintColorLight = '#0a7ea4';
+const tintColorLight = '#2b5acc';
 const tintColorDark = '#fff';
 
 export const Colors = {

custom.d.ts

@@ -0,0 +1,4 @@
+declare module '*.png' {
+  const value: string;
+  export default value;
+}

tsconfig.json

@@ -3,15 +3,8 @@
   "compilerOptions": {
     "strict": true,
     "paths": {
-      "@/*": [
-        "./*"
-      ]
+      "@/*": ["./*"]
     }
   },
-  "include": [
-    "**/*.ts",
-    "**/*.tsx",
-    ".expo/types/**/*.ts",
-    "expo-env.d.ts"
-  ]
+  "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts", "custom.d.ts"]
 }