JavaScript的

我试图将图像放入其包含的视图中，以便我可以拥有无​​缝图像网格。 问题是， 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' ）：

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

更新1：

通过对图像应用缩放变换并从中心收缩，我能够实现接近我所寻找的结果：

变换：

transform: [{ scale: 0.55 }]

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

---

我无法获得使用Image的resizeMode属性的示例，但是因为图像都是正方形，所以有一种方法可以使用窗口的Dimensions和Flexbox一起执行此操作。

设置flexDirection: 'row'和flexWrap: 'wrap' ，然后只要它们具有相同的尺寸，它们将全部flexDirection: 'row' flexWrap: 'wrap' 。

我在这里设置它

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

---

我想，那是因为你没有指定宽度和高度的item 。

如果您只想连续放置2张图片，则可以尝试使用这种方式而不是使用flex：

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

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

---

将尺寸设置为视图 ，并确保您的图像的样式高度和宽度设置为'undefined' ，如下面的示例所示：

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

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

链接地址: http://www.djcxy.com/p/89199.html

上一篇: javascript

下一篇: Webpack Sass import URL resolving