Browse Source

调整福利板块样式

zbb 3 tháng trước cách đây
mục cha
commit
97cdf1bb4d
1 tập tin đã thay đổi với 12 bổ sung6 xóa
  1. 12 6
      app/(tabs)/welfare.tsx

+ 12 - 6
app/(tabs)/welfare.tsx

@@ -2,6 +2,7 @@ import { Image } from 'expo-image';
 import { useRouter } from 'expo-router';
 import React, { useCallback, useEffect, useState } from 'react';
 import {
+    Dimensions,
     ImageBackground,
     ScrollView,
     StatusBar,
@@ -85,7 +86,7 @@ export default function WelfareScreen() {
               <Image
                 source={{ uri: Images.welfare.indexItem1  }}
                 style={styles.roomImage}
-                contentFit="contain"
+                contentFit="fill"
               />
             </TouchableOpacity>
 
@@ -97,7 +98,7 @@ export default function WelfareScreen() {
               <Image
                 source={{ uri: Images.welfare.indexItem2  }}
                 style={styles.roomImage}
-                contentFit="contain"
+                contentFit="fill"
               />
             </TouchableOpacity>
 
@@ -109,7 +110,7 @@ export default function WelfareScreen() {
               <Image
                 source={{ uri: Images.welfare.indexItem3  }}
                 style={styles.roomImage}
-                contentFit="contain"
+                contentFit="fill"
               />
             </TouchableOpacity>
           </ScrollView>
@@ -122,6 +123,8 @@ export default function WelfareScreen() {
   );
 }
 
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -176,10 +179,13 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   roomItem: {
-    marginBottom: 15,
+    marginBottom: 6,
+    width: SCREEN_WIDTH - 12, // Minimal margins (6px each side)
+    alignSelf: 'center',
   },
   roomImage: {
-    width: 375,
-    height: 130,
+    width: '100%',
+    height: undefined,
+    aspectRatio: 3, // Taller (345/115) to reduce horizontal stretch
   },
 });