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

Question

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

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

Answer 1

使用调整大小模式cover并将宽度设置为ScreenWidth/2,您可以使用" 尺寸"组件来反转屏幕宽度

//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

本地图像可以在不给出固定宽度和高度的情况下进行渲染，但是，对于远程图像，您必须提供尺寸，因为反应本机无法在运行时计算它们。所以，以下内容对我有用

<View style={styles.thumbContainer}>
      <Image source={{uri: "REMOTE_IMAGE_URI}} style={styles.thumbnail} />
</View>

并应用以下样式。

<View style={styles.thumbContainer}>
      <Image source={{uri: "REMOTE_IMAGE_URI}} style={styles.thumbnail} />
</View>

Answer 3

这段代码对我有用

        <Image
            style={{width: '100%', height: 100}}
            resizeMode={'center'}
            source={{}}
        />