将图像插入Flexbox视图

Posted 2021-05-06

我正在使用本机反应，我用卡创建视图样式，我想要做的只是在卡片中插入图像。

这是我的代码：

<View style={styles.card}>
        <Image style={styles.img} source={require('./shjpolice.jpg')} />
</View>
<View style={styles.card} />
<View style={styles.card} />
<View style={styles.card} />



const styles = StyleSheet.create({
     feed: {
         flex: 1,
         flexDirection: 'row',
         flexWrap: 'wrap',
         padding: 16,
         justifyContent: 'space-between'  
     },
     card: {
         backgroundColor: 'grey',
         width: '48%',
         aspectRatio: 1,
         marginBottom: 16
     },
     img: {
         flex : 2 ,
         resizeMode : 'stretch',
         resizeMode:'contain'
     }
});

输出低于图像

答案

可能你错过了它的宽度和高度。我几次遇到过这个问题，但应该用宽度和高度来解决。尝试

img: {
    flex : 1 ,
    resizeMode : 'stretch',
    resizeMode:'contain',
    width:'100%',
    height: '100%'

}