Javascript react-native - 在包含视图中适合图像，而不是整个屏幕尺寸
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34180629/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
react-native - Fit Image in containing View, not the whole screen size
提问by BarakChamo
I'm trying to fit images in their containing views so that I can have a seamless grid of images. The problem is that resizeMode='contain'seems to fit to the width of the screen or at least some higher level container, I need the images to fit to the size of each list item.
我正在尝试将图像放入它们的包含视图中，以便我可以拥有无缝的图像网格。问题是resizeMode='contain'似乎适合屏幕的宽度或至少一些更高级别的容器，我需要图像适合每个列表项的大小。
Here's a very ugly example of the styles and resulting grid:
这是样式和生成的网格的非常丑陋的示例：
The styles:
款式：
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'blue'
},
item: {
flex: 1,
overflow: 'hidden',
alignItems: 'center',
backgroundColor: 'orange',
position: 'relative',
margin: 10
},
image: {
flex: 1
}
})
The layout:
布局：
<TouchableOpacity
activeOpacity={ 0.75 }
style={ styles.item }
>
<Image
style={ styles.image }
resizeMode='contain'
source={ temp }
/>
</TouchableOpacity>
The result (with resizeMode='contain'):
结果（与resizeMode='contain'）：
The result (with resizeMode='cover'):
结果（与resizeMode='cover'）：
As you can see, the covered images are very big and are as wide as the whole screen and don't fit the immediately containing view.
如您所见，covered 图像非常大并且与整个屏幕一样宽，并且不适合直接包含的视图。
Update 1:
更新 1：
I was able to achieve a result close to what I'm looking for by applying a scale transform to the image and shrinking it from the center:
通过对图像应用比例变换并将其从中心缩小，我能够获得接近于我正在寻找的结果：
The transform:
变换：
transform: [{ scale: 0.55 }]
The resulting layout (without margins or paddings):
结果布局（没有边距或填充）：
采纳答案by Nader Dabit
I could not get the example working using the resizeModeproperties of Image, but because the images will all be square there is a way to do it using the Dimensions of the window along with flexbox.
我无法使用 的resizeMode属性使示例工作Image，但是因为图像都是方形的，所以有一种方法可以使用窗口的尺寸和 flexbox 来实现。
Set flexDirection: 'row', and flexWrap: 'wrap', then they will all line up as long as they are all the same dimensions.
设置flexDirection: 'row', 和flexWrap: 'wrap'，那么只要它们的尺寸都相同，它们就会排成一行。
I set it up here
我在这里设置
https://snack.expo.io/HkbZNqjeZ
https://snack.expo.io/HkbZNqjeZ
"use strict";
var React = require("react-native");
var {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TouchableOpacity,
Dimensions,
ScrollView
} = React;
var deviceWidth = Dimensions.get("window").width;
var temp = "http://thumbs.dreamstime.com/z/close-up-angry-chihuahua-growling-2-years-old-15126199.jpg";
var SampleApp = React.createClass({
render: function() {
var images = [];
for (var i = 0; i < 10; i++) {
images.push(
<TouchableOpacity key={i} activeOpacity={0.75} style={styles.item}>
<Image style={styles.image} source={{ uri: temp }} />
</TouchableOpacity>
);
}
return (
<ScrollView style={{ flex: 1 }}>
<View style={styles.container}>
{images}
</View>
</ScrollView>
);
}
});
回答by Naadiya Ahmed
Set the dimensions to the Viewand make sure your Imageis styled with height and width set to 'undefined'like the example below :
将尺寸设置为视图，并确保您的图像的高度和宽度设置为“未定义”，如下例所示：
<View style={{width: 10, height:10 }} >
<Image style= {{flex:1 , width: undefined, height: undefined}}
source={require('../yourfolder/yourimage')}
/>
</View>
This will make sure your image scales and fits perfectly into your view.
这将确保您的图像缩放并完全适合您的视图。
回答by sazzy4o
If you know the aspect ratio for example, if your image is square you can set either the heightor the widthto fill the container and get the other to be set by the aspectRatioproperty
例如，如果您知道纵横比，如果您的图像是方形的，您可以设置height或width来填充容器，并通过aspectRatio属性 设置另一个
Here is the style if you want the heightbe set automatically:
如果您希望height自动设置样式，请使用以下样式：
{
width: '100%',
height: undefined,
aspectRatio: 1,
}
Note: heightmust be undefined
注意：height必须是undefined
回答by user3685578
I think it's because you didn't specify the width and height for the item.
我认为这是因为您没有指定item.
If you only want to have 2 images in a row, you can try something like this instead of using flex:
如果您只想连续显示 2 张图像，您可以尝试这样的操作，而不是使用 flex：
item: {
width: '50%',
height: '100%',
overflow: 'hidden',
alignItems: 'center',
backgroundColor: 'orange',
position: 'relative',
margin: 10,
},
This works for me, hope it helps.
这对我有用，希望它有所帮助。
回答by Sujeet Kumar Gupta
Simply You need to pass resizeMode like this to fit in your image in containing view
只是您需要像这样传递 resizeMode 以适应包含视图中的图像
<Image style={styles.imageStyle} resizeMode={'cover'} source={item.image}/>
const style = StyleSheet.create({
imageStyle: {
alignSelf: 'center',
height:'100%',
width:'100%'
},]
})
回答by noshad b.e
the image has a property named Style ( like most of the react-native Compponents) and for Image's Styles, there is a property named resizeMode that takes values like: contain,cover,stretch,center,repeat
图像有一个名为 Style 的属性（就像大多数 react-native 组件一样），对于图像的样式，有一个名为 resizeMode 的属性，它采用的值如下：包含、覆盖、拉伸、中心、重复
most of the time if you use center it will work for you
大多数情况下，如果您使用 center 它将为您工作
