最近在项目中逐渐使用RN进行前端开发，遇到一个需求，需要对图片进行限宽不限高的等宽高比缩放，
没有办法通过设置属性来处理，如果是宽高固定的容器，加载图片将resizeMode设置成contain，图片是按照宽和高中大的来做等比缩放，不符合项目要求，
因此需要先预加载图片来获取宽高比，下载后设置宽高来处理，getSize的Api如下：
staticgetSize(uri: string,success: (width: number,height: number) => void,failure: (error: any) => void)
在显示图片前获取图片的宽高(以像素为单位)。如果图片地址不正确或下载失败,此方法也会失败。
要获取图片的尺寸,首先需要加载或下载图片(同时会被缓存起来)。这意味着理论上你可以用这个方法来预加载图片,虽然此方法并没有针对这一用法进行优化,而且将来可能会换一些实现方案使得并不需要完整下载图片即可获取尺寸。所以更好的预加载方案是使用下面那个专门的预加载方法。
下面贴一下主要代码:
constructor(props) { super(props); // 初始状态 this.state = { width: defaultWidth,height: defaultHeight, }; }
componentDidMount() {
Image.getSize(this.props.image,(width,height) => {
height = screenWidth * height / width; //按照屏幕宽度进行等比缩放
this.setState({screenWidth,height});
});
}
@H_404_123@render( return ( <Image style={[styles.imageStyle,{width: this.state.width,height: this.state.height}]} source={{uri: this.props.image}}/> ) )