将图像插入flexbox视图

时间:2019-02-25 09:56:13

标签: react-native

am使用react native和我用卡片创建视图样式, 我想做的就是在卡中插入图像。

这是我的代码:

<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'
     }
});

并且输出在图片下方

out put in emulator

1 个答案:

答案 0 :(得分:0)

可能您错过了给它的宽度和高度。 我已经几次面对这个问题,但是应该固定宽度和高度。 试试

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

}