React Native 响应式图像宽度，而图像的宽度/高度比保持不变

Question

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

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

原文由 manpenaloza 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用调整大小模式 cover 并将宽度设置为 ScreenWidth / 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'}]}/>

原文由 LHIOUI 发布，翻译遵循 CC BY-SA 3.0 许可协议