[英]React Native Card Image Cover
I'm trying to develop a card in my react native project where the top '70%' of the card is an image that covers the whole upper 70% of the card, but the bottom 30% remains for text.我正在尝试在我的 React Native 项目中开发一张卡片,其中卡片顶部的“70%”是一个图像,覆盖了卡片的整个上部 70%,但底部 30% 保留为文本。 I keep trying to use resize mode (contain or cover) or set the width to '100%' and adjust the aspect ratio accordingly, but nothing is working!
我一直尝试使用调整大小模式(包含或覆盖)或将宽度设置为“100%”并相应地调整纵横比,但没有任何效果! Help!
帮助!
CODE:代码:
<TouchableOpacity style={{width: '100%',marginBottom: 25, height: 200,borderRadius: 15 }}>
<View style={{ height: '70%', width: '100%' }}>
<Image style={styles.habitImage} source={require('../../assets/habits/Productivity_Long.png')} resizeMode='cover'/>
</View>
<View style={{ height: '30%', width: '100%', justifyContent: 'center', alignItems: 'center' }}>
<Text style={styles.habitTypeText}>Productivity</Text>
</View>
</TouchableOpacity>
WHAT KEEPS HAPPENING:持续发生的事情:
Desired Result:预期结果:
I think your problem was wrapping the Image
in an extra view, here's a working solution.我认为您的问题是将
Image
包装在额外的视图中,这是一个有效的解决方案。
export default class Card extends React.Component {
render() {
const { text, image } = this.props;
return (
<TouchableOpacity>
<View style={styles.container}>
<Image style={styles.image} source={image} />
<View style={styles.textContainer}>
<Text style={styles.text}>
{text}
</Text>
</View>
</View>
</TouchableOpacity>
);
}
}
const styles = StyleSheet.create({
container : {
width : '100%',
height : 200,
marginBottom : 25,
borderRadius : 15,
backgroundColor : '#FFFFFF',
overflow : 'hidden'
},
image : {
width : '100%',
height : '70%'
},
textContainer : {
flex : 1,
alignItems : 'center',
justifyContent : 'center'
},
text : {
fontWeight : 'bold',
fontSize : 20
}
});
try using flex尝试使用 flex
<View style={{ flex:7, width: '100%' }}>
<Image style={styles.habitImage} source={require('../../assets/habits/Productivity_Long.png')} resizeMode='cover'/>
</View>
<View style={{ flex:3, width: '100%', justifyContent: 'center', alignItems: 'center' }}>
<Text style={styles.habitTypeText}>Productivity</Text>
</View>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.