版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/z93701081/article/details/83751988
因为在现在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);
4 /2 * 1 = 2
-
}
注：防止小数点后出现过多小数位数，这里特别用Math.floor进行js小数返回向下取整的整数。
向下取整：
Math.floor(XXX)
XXX = 1.8
Math.floor(XXX)的值就是1
XXX = 1.2
Math.floor(XXX)的值就是1
至此，把图片Image组件的宽高设置成自定义的宽高就ok了。
### // 获取自适应高度
### const height = 屏幕的宽度 * 图片的高度 / 图片的宽度
### // 4 * 1 / 2 = 2