resizeMode 包含在本机反应中显示图像前后的空间答案

【问题标题】：resizeMode contain showing space before and after image in react nativeresizeMode 包含在本机反应中显示图像前后的空间
【发布时间】：2018-10-18 12:58:18
【问题描述】：

我正在尝试显示一个宽度根据高度调整的图像，我为此目的使用了 resizeMode="contain" 但它显示了图像前后的空间。我尝试设置边距、填充、左、右，但它们都不起作用。

 <View style={{ flex: 1 }}>
        <ScrollView horizontal>
        <View style={{ borderColor: "#f00", borderWidth: 2, height: 300 }}>
            <Image source={images[0].uri} resizeMode="contain" style={{ height: 300, width: 300 }} />
        </View>
        <View style={{ borderColor: "#f00", borderWidth: 2, height: 300 }}>
            <Image source={images[1].uri} resizeMode="contain" style={{ height: 300 }} />
        </View>
   </ScrollView>
</View>

【问题讨论】：

标签： image reactjs react-native height width

【解决方案1】：

resizeMode="contain" 是Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view，这意味着（在您的图像上），将高度和宽度拉伸到height=300，但保持纵横比。所以宽度永远不会覆盖屏幕，因为它小于高度。

如果您希望宽度覆盖整个屏幕，请使用stretch 或cover。

也许我没有正确理解您的问题。如果是，请告诉我，我会删除我的答案。

【讨论】：

【解决方案2】：

由于resizeMode="contain" 均匀缩放图像（保持图像的纵横比），还将宽度纵横比设置为您要赋予图像的高度。

例如，如果您有一张 210x300 的图片，并且您希望图片的高度为 100。您需要将宽度设置为 与 70 相同的宽高比。
<Image style={{height:100, width:70, resizeMode:"contain"}}/>

否则，您将获得图像原始纵横比的宽度间距。

【讨论】：