feat: navbar图标

This commit is contained in:
jinyaqiu 2025-07-16 16:30:25 +08:00
parent 1c02968071
commit b8d00ef850
3 changed files with 13 additions and 3 deletions

View File

@ -0,0 +1,4 @@
<svg width="30" height="27" viewBox="0 0 30 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.2222 7.25H27.4444C28.3036 7.25 29 7.94955 29 8.8125V26L23.8153 21.6734C23.536 21.4403 23.1834 21.3125 22.8203 21.3125H10.3333C9.47422 21.3125 8.77778 20.6129 8.77778 19.75V15.0625H7.17969C6.8166 15.0625 6.46396 15.1901 6.18468 15.4231L1 19.7505V2.5625C1 1.69956 1.69645 1 2.55556 1H19.6667C20.5258 1 21.2222 1.69956 21.2222 2.5625V7.25Z" fill="#4C320C"/>
<path d="M21.2222 7.25H27.4444C28.3036 7.25 29 7.94956 29 8.8125V26L23.8153 21.6734C23.536 21.4403 23.1834 21.3125 22.8203 21.3125H10.3333C9.47422 21.3125 8.77778 20.6129 8.77778 19.75V15.0625M21.2222 7.25V2.5625C21.2222 1.69956 20.5258 1 19.6667 1H2.55556C1.69645 1 1 1.69956 1 2.5625V19.7505L6.18468 15.4231C6.46397 15.1901 6.8166 15.0625 7.17969 15.0625H8.77778M21.2222 7.25V13.5C21.2222 14.3629 20.5258 15.0625 19.6667 15.0625H8.77778" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 992 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M24 20a7 7 0 1 0 0-14a7 7 0 0 0 0 14M6 40.8V42h36v-1.2c0-4.48 0-6.72-.872-8.432a8 8 0 0 0-3.496-3.496C35.92 28 33.68 28 29.2 28H18.8c-4.48 0-6.72 0-8.432.872a8 8 0 0 0-3.496 3.496C6 34.08 6 36.32 6 40.8"/></svg>

After

Width:  |  Height:  |  Size: 409 B

View File

@ -1,6 +1,8 @@
import ChatInSvg from "@/assets/icons/svg/chatIn.svg";
import NavbarSvg from "@/assets/icons/svg/navbar.svg";
import PersonInSvg from "@/assets/icons/svg/personIn.svg";
import { Ionicons } from "@expo/vector-icons";
import { router } from "expo-router";
import { router, usePathname } from "expo-router";
import React from 'react';
import { Dimensions, Platform, TouchableOpacity, View } from 'react-native';
import { Circle, Ellipse, G, Mask, Path, Rect, Svg } from 'react-native-svg';
@ -8,6 +10,9 @@ import { Circle, Ellipse, G, Mask, Path, Rect, Svg } from 'react-native-svg';
const AskNavbar = () => {
// 获取设备尺寸
const { width } = Dimensions.get('window');
// 获取路由
const pathname = usePathname();
console.log(pathname);
return (
<View className="absolute bottom-0 left-0 right-0 bg-white" style={{
@ -20,7 +25,7 @@ const AskNavbar = () => {
<NavbarSvg className="w-full h-full" />
<View className="absolute bottom-0 top-0 left-0 right-0 flex flex-row justify-between items-center px-[2rem]">
<TouchableOpacity onPress={() => router.push('/memo-list')} >
<Ionicons name="chatbubbles-outline" size={24} color="#4C320C" />
{pathname === "/memo-list" ? <ChatInSvg /> : <Ionicons name="chatbubbles-outline" size={24} color="#4C320C" />}
</TouchableOpacity>
<TouchableOpacity
@ -72,7 +77,7 @@ const AskNavbar = () => {
</TouchableOpacity>
<TouchableOpacity onPress={() => router.push('/owner')}>
<View>
<Ionicons name="person-outline" size={24} color="#4C320C" />
{pathname === "/owner" ? <PersonInSvg width={24} height={24} /> : <Ionicons name="person-outline" size={24} color="#4C320C" />}
{/* <View className="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full" /> */}
</View>
</TouchableOpacity>