ReactNative之Image组件自适应高度,图片自适应大小

因为在现在0.50包括之前的ReactNative版本,Image组件必须要设置宽高才能显示。所以在图片宽高不确定的情况下,如何来让图片自适应
屏幕高度呢?

需求原因:因为做商城详情页面的图片长短不一,所以要自适应图片显示高度。这个需求就产生了。


以下方法:

getSize方法 传入imageUri(图片的uri路径,支持本地和网络路径)

Image.getSize(imageUri,(width,height) => {
    //width 图片的宽度
    //height 图片的高度
}
返回的是图片的宽高。之后根据自己手机屏幕自己计算图片的
宽度高度

算法:

1.首先获取手机屏幕宽高

let screenWidth = Dimensions.get('window').width;
let screenHeight = Dimensions.get('window').height;

2.获取网络图片宽高

Image.getSize(imageUri,(width,height) => {
    //width 图片的宽度
    //height 图片的高度
}

3.

算法一:

图片宽度(÷)手机屏幕宽度 = 图片和手机宽度之比。

图片高度(÷)  图片和手机宽度之比 = 图片应在手机上显示的高度。

注:如果图片宽度小于手机屏幕,有极大可能会让图片失真,这样的话应当增加判断(请自行编码)。

算法二:

宽度是要适配全屏的,所以要设置图片的大小,宽度就等于手机屏幕宽度,那么高度

显示高度 = Math.floor( 屏幕宽度(÷)(图片的宽 * 图片的高));

//方法一代码:
Image.getSize(imageUri,(width,height) => {
    //width 图片的宽度 Math.floor向下取整
    //height 图片的高度
    let proportion = width/screenWidth;
    let myHeight = height/screenHeight;
}
//方法二代码:
Image.getSize(imageUri,(width,height) => {
    //width 图片的宽度
    //height 图片的高度
    let myHeight = Math.floor(screenWidth/width*height);
}

注:防止小数点后出现过多小数位数,这里特别用Math.floor进行js小数返回向下取整的整数。

向下取整:

Math.floor(XXX)

XXX = 1.8

Math.floor(XXX)的值就是1

XXX = 1.2

Math.floor(XXX)的值就是1

至此,把图片Image组件的宽高设置成自定义的宽高就ok了。





你可能感兴趣的:(ReactNative)