Просмотр исходного кода

修复tab背景重叠-福利房分类标签UI

zbb 3 месяцев назад
Родитель
Сommit
b48c459ce5
3 измененных файлов с 29 добавлено и 5 удалено
  1. 23 1
      app/weal/room.tsx
  2. 4 4
      components/CustomTabBar.tsx
  3. 2 0
      constants/images.ts

+ 23 - 1
app/weal/room.tsx

@@ -183,6 +183,12 @@ export default function RoomScreen() {
                   onPress={() => handleTypeChange(item, index)}
                 >
                   <Text style={[styles.typeText, typeIndex === index && styles.typeTextActive]}>{item.name}</Text>
+                  {typeIndex === index && (
+                      <>
+                        <Image source={{ uri: Images.mine.typeSelectIconT }} style={styles.typeSelectIconT} />
+                        <Image source={{ uri: Images.mine.typeSelectIconB }} style={styles.typeSelectIconB} />
+                      </>
+                  )}
                 </TouchableOpacity>
               ))}
             </ScrollView>
@@ -290,7 +296,7 @@ const styles = StyleSheet.create({
   // 类型切换
   typeContainer: { paddingHorizontal: 15, marginBottom: 40 },
   typeSection: {},
-  typeItem: { marginRight: 20, paddingVertical: 8 },
+  typeItem: { marginRight: 15, width: 55, height: 38, justifyContent: 'center', alignItems: 'center', position: 'relative' },
   typeText: { fontSize: 12, color: '#DFDFDF' },
   typeTextActive: {
     color: '#e79018',
@@ -300,6 +306,22 @@ const styles = StyleSheet.create({
     textShadowOffset: { width: 1, height: 1 },
     textShadowRadius: 1
   },
+  typeSelectIconT: {
+    position: 'absolute',
+    right: -5,
+    top: 5,
+    zIndex: 2,
+    width: 28,
+    height: 10,
+  },
+  typeSelectIconB: {
+      position: 'absolute',
+      left: 0,
+      bottom: 0,
+      zIndex: 2,
+      width: 24,
+      height: 14,
+  },
 
   // 房间列表
   roomList: { paddingHorizontal: 0, alignItems: 'center' },

+ 4 - 4
components/CustomTabBar.tsx

@@ -44,13 +44,13 @@ export function CustomTabBar() {
     // Check Box
     if (segments[1] === 'box' || pathname?.startsWith('/box')) return 1;
     // Check Welfare
-    if (segments[1] === 'welfare' || pathname?.startsWith('/welfare')) return 2;
+    if ((segments[1] as string) === 'weal' || pathname?.startsWith('/weal')) return 2;
     // Check Mine
     if (segments[1] === 'mine' || pathname?.startsWith('/mine')) return 3;
     
     // Check Home (Explicit)
     // Home is usually index. or path /
-    if (segments[1] === 'index' || pathname === '/' || pathname === '/index') return 0;
+    if ((segments[1] as string) === 'index' || pathname === '/' || pathname === '/index') return 0;
 
     // No valid tab match (e.g. navigating to detail page)
     return -1;
@@ -81,9 +81,9 @@ export function CustomTabBar() {
   return (
     <View style={styles.wrapper}>
       <ImageBackground
-        source={{ uri: Images.common.kaixinTabbarBg }}
+        source={{ uri: Images.common.tabsBg }}
         style={styles.container}
-        resizeMode="stretch"
+        resizeMode="cover"
       >
         <View style={styles.center}>
           {tabList.map((item, index) => (

+ 2 - 0
constants/images.ts

@@ -229,6 +229,8 @@ export const Images = {
     avatarBorderBg: `${CDN_BASE}/common/noavatar.png`,  // 头像边框背景
     shopOrder: `${CDN_BASE}/mine/shopOrder.png`,  // 商城订单入口图标
     boxOrder: `${CDN_BASE}/mine/boxOrder.png`,  // 奖池订单入口图标
+    typeSelectIconT: `${CDN_BASE}/mine/typeSelectIconT.png`,
+    typeSelectIconB: `${CDN_BASE}/mine/typeSelectIconB.png`,
   },
   // 地址相关
   address: {