我的图片在样式上被截断了

Question

这是我的carddetail.js

import React from "react";
import { View,Text, Image, Dimensions} from "react-native";
import Item from "./Item";
import ItemSection from "./ItemSection";
const { height } = Dimensions.get('window');
const imageHeight = (30 / 100) * height; // calculates 30% of the screen
const CardDetail = ({brand}) => {
const {headerContainer, headerText, imageStyle} = styles;
return( 
<Item>
<ItemSection>
<View style={headerContainer}>
<Text style={headerText}>{brand.brand}</Text>
<Text style ={headerText}>{brand.model[0].name}</Text>  
</View>
</ItemSection>
<ItemSection>
<Image
style={imageStyle}
source={{ uri:brand.model[0].image}}
/>        

</ItemSection>

</Item>

);
};
const styles ={
headerContainer:{
flexDirection: "column",
justifyContent: "space-between",
flex: 1
},
headerText:{
fontSize: 18,
flex: 1,
fontWeight: "500",
textTransform: "uppercase",
flexDirection: "column"
},
imageStyle: {
height: 300,
flex:1,
width: 0

}

}
export default CardDetail;

输入图片描述

我已经使用flex，我做了一些冲浪，但我不知道我的代码有什么问题

我使用react native 0.68.02版本

Answer 1

这可能是由于以下配置:

imageStyle: {
height: 300,
flex:1,
width: 0
}

当宽度设置为0时，很可能图像甚至不显示。