Question

我试图将图像放入其包含的视图中，以便我可以拥有无缝的图像网格。问题是while (strand1.length() < strand2.length()) { strand1 += "*"; } while (strand1.length() > strand2.length()) { strand2 += "*"; }似乎适合屏幕的宽度或至少某些更高级别的容器，我需要图像以适合每个列表项的大小。

这是一个非常丑陋的样式和结果网格示例：

风格：

resizeMode='contain'

布局：

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
  }
})

结果（<TouchableOpacity activeOpacity={ 0.75 } style={ styles.item } > <Image style={ styles.image } resizeMode='contain' source={ temp } /> </TouchableOpacity>）：

结果（resizeMode='contain'）：

正如您所看到的，resizeMode='cover' ed图像非常大，并且与整个屏幕一样宽，并且不适合立即包含的视图。

更新1：

通过对图像应用缩放变换并将其从中心缩小，我能够获得接近我所寻找的结果：

变换：

cover

生成的布局（没有边距或填充）：

Answer 1

将尺寸设置为查看，并确保图像的样式设置为高度和宽度设置为＆＃39; undefined＆＃39; 如下例所示：

    <View style={{width: 10, height:10 }} >
      <Image style= {{flex:1 , width: undefined, height: undefined}}    
       source={require('../yourfolder/yourimage'}
        />
    </View>

这将确保您的图像可以缩放并完全适合您的视图。

Answer 2

例如，如果您知道宽高比，则如果您的图像是方形的，则可以设置height或width来填充容器，并用{{1 }}属性

如果您希望自动设置aspectRatio，请参见以下样式：

height

注意：{ width: '100%', height: undefined, aspectRatio: 1, }必须为height

Answer 3

只需您这样传递resizeMode，使其适合包含在图像中的视图

<Image style={styles.imageStyle} resizeMode={'cover'} source={item.image}/>

const style = StyleSheet.create({
  imageStyle: {
      alignSelf: 'center',
      height:'100%', 
      width:'100%'
    },]
})

Answer 4

我无法使用resizeMode的{{1}}属性来运行示例，但由于图像都是方形的，因此可以使用窗口的尺寸和flexbox来实现。

设置Image和flexDirection: 'row'，只要它们都是相同的尺寸，它们就会排成一行。

我设置了here

https://snack.expo.io/HkbZNqjeZ

flexWrap: 'wrap'

Answer 5

我认为这是因为你没有指定item的宽度和高度。

如果您只想连续拍摄2张图像，可以尝试使用此类图像而不是使用flex：

item: {
width: '50%',
height: '100%',
overflow: 'hidden',
alignItems: 'center',
backgroundColor: 'orange',
position: 'relative',
margin: 10,
},

这对我有用，希望有所帮助。

Answer 6

任何希望自己的图像在全屏模式下都没有任何裁剪（纵向和横向模式下）的人，请使用以下方法：

image: {
    flex: 1,
    width: '100%',
    height: '100%',
    resizeMode: 'contain',
},

Answer 7

图像具有一个名为Style的属性（就像大多数本机反应成分一样）对于图像的样式，有一个名为resizeMode的属性，该属性的值如下：包含，覆盖，拉伸，居中，重复

大多数情况下，如果您使用center，它将为您工作

react-native - 包含View的Fit Image，而不是整个屏幕大小

7 个答案: