我有一个从URL拉下来的图像。我事先不知道这个图像的尺寸。
如何设置样式/布局图像,使其成为父视图的全宽,并计算高度以保持长宽比?
我尝试过在0.34.0-rc.0中使用onLoad
,并且在event. nativeEvent.source
中高度/宽度都是0。
图像在中
我的使用非常相似,因为我需要显示全屏宽度但保持其长宽比的图像。
根据@JasonGaare对使用Image. getSize()
的回答,我想出了以下实现:
class PostItem extends React.Component {
state = {
imgWidth: 0,
imgHeight: 0,
}
componentDidMount() {
Image.getSize(this.props.imageUrl, (width, height) => {
// calculate image width and height
const screenWidth = Dimensions.get('window').width
const scaleFactor = width / screenWidth
const imageHeight = height / scaleFactor
this.setState({imgWidth: screenWidth, imgHeight: imageHeight})
})
}
render() {
const {imgWidth, imgHeight} = this.state
return (
<View>
<Image
style={{width: imgWidth, height: imgHeight}}
source={{uri: this.props.imageUrl}}
/>
<Text style={styles.title}>
{this.props.description}
</Text>
</View>
)
}
}
我是react-native的新手,但我使用简单的风格遇到了这个解决方案:
imageStyle: {
height: 300,
flex: 1,
width: null}
它对我有用。
React Native内置了一个函数,它将返回图像的宽度和高度:Image. getSize()
。在这里查看留档