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