React本机响应图像宽度，而图像的宽高比保持不变

Question

我希望React本机图像的宽度为可用屏幕宽度的50％，不需要修改图像的宽度：高度比。

任何提示如何解决这个问题？

Answer 1

使用调整模式cover和宽度设定为屏幕宽度/ 2可以使用Dimensions部件

//Get screen width using Dimensions component 
var {width} = Dimensions.get('window'); 
//.... 
//In image style 
image:{ 
    width: width * 0.5 
} 
//In render function 
<Image resizeMode = 'cover' style = {styles.image}/> 

编辑添加溢出

//add overflow : visible 
<Image resizeMode = 'cover' style = {[styles.image,{overflow: 'visible'}]}/> 

Answer 2

问题的上述方法的缺点是retrive屏幕宽度当你旋转设备时，图像尺寸不会改变。因此，使用维度与状态，以便它将在旋转时更新。