我有一个包含图像的 View 元素,该图像用作 View 元素的背景图像。背景图像是绝对定位的,顶部、左侧、右侧和底部设置为 0,但它仍然高于其父级(您可以在图像中的红色边框上看到它)。
有谁知道为什么吗?
<View style={styles.headerContainer}>
<Image source={Images.headerBg} style={styles.headerBackgroundImage} resizeMode="cover" />
<View style={styles.headerRow}>
<View style={styles.headerColumn}>
<TouchableOpacity style={styles.magicHeartButton}>
<Icon
name="heart"
size={12}
color="red"
style={styles.magicHeartButtonIcon}
/>
<Text style={styles.magicHeartButtonText}>247</Text>
</TouchableOpacity>
</View>
<View style={styles.headerColumn}>
<TouchableOpacity style={styles.tonightButton}>
<Text style={styles.tonightButtonText}>right column</Text>
</TouchableOpacity>
</View>
</View>
</View>
样式表:
headerContainer: {
backgroundColor: '#ffd700',
height: 40,
position: 'relative',
borderWidth: 1,
borderColor: 'red',
},
headerRow: {
justifyContent: 'space-between',
flexDirection: 'row',
alignItems: 'center',
},
headerColumn: {
padding: 10,
},
headerBackgroundImage: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
最佳答案
我按照以下方式制作了背景图像。而不是包裹在 <View>
中,我将所有内容都包裹在 <Image>
中
示例:
<Image source = {require('./back.jpg')} style={styles.container}>
<View>
</View>
</Image>
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(0,0,0,0)',
height :null,
width: null
},
关于javascript - react native : Absolute positioned image higher than parent,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40963344/