Question

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

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

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

Answer 2

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

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

并应用以下样式。

thumbContainer: {
    width: '100%',
    height: 400,
  },
  thumbnail: {
    flex: 1,
    width: undefined,
    height: undefined,
    resizeMode: 'cover'
  },

Answer 3

此代码对我有用

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

Answer 4

经过验证的答案对我不起作用，但给了我一个好主意。

它可能不起作用，因为我的图像在ScrollView中。

由于图像需要宽度和高度，因此我的解决方案是获取屏幕的宽度和： a）对于图像宽度：将屏幕宽度乘以我要拍摄的屏幕宽度的百分比。 b）对于图像高度：将屏幕宽度乘以屏幕宽度的百分比，我希望我的图像乘以高度/宽度纵横比。

const { width } = Dimensions.get('window');

<Image style={{ width: width * 0.5, height: width * 0.5 * 2.16 }}
       source={require("everydaycheckmobile/images/introduction/5-overviewdark.png")}
/>

效果很好，但是有必要动态定义您希望图像拍摄的宽度屏幕的百分比，以使其在各种方向上都能很好地响应。

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

4 个答案: