React Native 响应式图像宽度，而图像的宽高比保持不变 [英] React Native responsive image width while width/height ratio of image keeps the same

问题描述

我希望 React Native Image 的宽度为可用屏幕宽度的 50%，不修改图像的宽高比.

I want a React Native Image to have a width of 50% of the available screen-width, no modification to width:height ratio of the image.

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

Any hints how to solve this?

推荐答案

使用调整大小模式 cover 并将宽度设置为 ScreenWidth/2 您可以使用 维度组件

Use resize mode cover and set the width to ScreenWidth / 2 you can retrive the screen width using Dimensions component

//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'}]}/>

这篇关于React Native 响应式图像宽度，而图像的宽高比保持不变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！