diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx index a3c88bf..7572c26 100644 --- a/app/(tabs)/_layout.tsx +++ b/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 }) => , + tabBarIcon: ({ focused }) => ( + + ), }} /> , + tabBarIcon: ({ focused }) => ( + + ), }} /> , + tabBarIcon: ({ focused }) => ( + + ), }} /> , + tabBarIcon: ({ focused }) => ( + + ), }} /> ); } + +const styles = StyleSheet.create({ + tabIcon: { + width: 22, + height: 22, + }, +}); diff --git a/assets/images/tab/icon_tab1_s.png b/assets/images/tab/icon_tab1_s.png new file mode 100644 index 0000000..4a97d63 Binary files /dev/null and b/assets/images/tab/icon_tab1_s.png differ diff --git a/assets/images/tab/icon_tab1_s.svg b/assets/images/tab/icon_tab1_s.svg new file mode 100644 index 0000000..c2c30a8 --- /dev/null +++ b/assets/images/tab/icon_tab1_s.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/images/tab/icon_tab1_u.png b/assets/images/tab/icon_tab1_u.png new file mode 100644 index 0000000..275f0b2 Binary files /dev/null and b/assets/images/tab/icon_tab1_u.png differ diff --git a/assets/images/tab/icon_tab1_u.svg b/assets/images/tab/icon_tab1_u.svg new file mode 100644 index 0000000..c996d4c --- /dev/null +++ b/assets/images/tab/icon_tab1_u.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/images/tab/icon_tab2_s.png b/assets/images/tab/icon_tab2_s.png new file mode 100644 index 0000000..81d2af3 Binary files /dev/null and b/assets/images/tab/icon_tab2_s.png differ diff --git a/assets/images/tab/icon_tab2_u.png b/assets/images/tab/icon_tab2_u.png new file mode 100644 index 0000000..6125ee7 Binary files /dev/null and b/assets/images/tab/icon_tab2_u.png differ diff --git a/assets/images/tab/icon_tab3_s.png b/assets/images/tab/icon_tab3_s.png new file mode 100644 index 0000000..129a1db Binary files /dev/null and b/assets/images/tab/icon_tab3_s.png differ diff --git a/assets/images/tab/icon_tab3_u.png b/assets/images/tab/icon_tab3_u.png new file mode 100644 index 0000000..035b7b5 Binary files /dev/null and b/assets/images/tab/icon_tab3_u.png differ diff --git a/assets/images/tab/icon_tab4_s.png b/assets/images/tab/icon_tab4_s.png new file mode 100644 index 0000000..0e53647 Binary files /dev/null and b/assets/images/tab/icon_tab4_s.png differ diff --git a/assets/images/tab/icon_tab4_u.png b/assets/images/tab/icon_tab4_u.png new file mode 100644 index 0000000..98fcf58 Binary files /dev/null and b/assets/images/tab/icon_tab4_u.png differ diff --git a/constants/Colors.ts b/constants/Colors.ts index 14e6784..af06cb1 100644 --- a/constants/Colors.ts +++ b/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 = { diff --git a/custom.d.ts b/custom.d.ts new file mode 100644 index 0000000..1c59232 --- /dev/null +++ b/custom.d.ts @@ -0,0 +1,4 @@ +declare module '*.png' { + const value: string; + export default value; +} diff --git a/tsconfig.json b/tsconfig.json index 909e901..7e76a03 100644 --- a/tsconfig.json +++ b/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"] }