首页 文章

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

提问于
浏览 次
10

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

enter image description here

结果（使用 resizeMode='cover' ）：

enter image description here

如您所见， cover ed图像非常大，并且与整个屏幕一样宽，并且不适合立即包含的视图 .

Update 1:

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

变换：

transform: [{ scale: 0.55 }]

生成的布局（没有边距或填充）：
enter image description here

javascript reactjs flexbox react-native

3 回答

  • 3

    我无法使用 Image 的 resizeMode 属性来运行示例，但由于图像都是方形的，因此有一种方法可以使用窗口的尺寸和flexbox来完成 .

    设置 flexDirection: 'row' 和 flexWrap: 'wrap' ，只要它们都是相同的尺寸，它们都会排列 .

    我把它设置了here

    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>
    );
  }
});
    回复于
  • 2

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

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

    这将确保您的图像缩放并完美地适合您的视图 .

    回复于
  • 4

    我认为's because you didn' t指定 item 的宽度和高度 .

    如果你只想连续有2个图像，你可以尝试这样的东西，而不是使用flex：

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

    这对我有用，希望它有所帮助 .

    回复于

相关问题