Javascript React本机卡图像封面

我正试图在我的react native项目中开发一张卡片，卡片顶部的“70%”是一张覆盖整个卡片上部70%的图像，但底部的30%用于文本。我一直在尝试使用调整大小模式（包含或覆盖）或将宽度设置为“100%”，并相应地调整纵横比，但没有任何效果！救命啊

代码：

生产率

不断发生的事情：

预期结果：

---

我认为您的问题在于将

图像

包装在一个额外的视图中，下面是一个可行的解决方案

导出默认类卡扩展React.Component{
render（）{
const{text，image}=this.props；
返回(
{text}
);
}
}
const styles=StyleSheet.create({
容器：{
宽度：“100%”，
身高：200，
marginBottom:25，
边界半径：15，
背景颜色：“#FFFFFF”，
溢出：“隐藏”
},
图片：{
宽度：“100%”，
身高：“70%”
},
文本容器：{
弹性：1，
对齐项目：“居中”，
为内容辩护：“中心”
},
正文：{
fontWeight:'粗体'，
尺寸：20
}
});

如果需要的话，我还做了一个报告

尝试使用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>

生产率

whre is style.habitImage

<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>