react-native - 适合包含视图的图像，而不是整个屏幕大小

Posted 2023-02-22

【中文标题】react-native - 适合包含视图的图像，而不是整个屏幕大小

【英文标题】：react-native - Fit Image in containing View, not the whole screen size

【发布时间】：2016-03-14 20:00:16

【问题描述】：

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

如您所见，covered 图像非常大，与整个屏幕一样宽，不适合立即包含的视图。

更新 1：

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

变换：

transform: [ scale: 0.55 ]

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

【问题讨论】：

您能否举例说明您希望他们看起来或接近它的样子？谢谢。

嘿@NaderDabit 我现在会更新一个例子。

所有图片都是正方形的吗？

【参考方案1】：

这对我有用，

<Image style=styles.imageStyle resizeMode="cover" source=imageSource />

const styles = StyleSheet.create(
  imageStyle: 
    width: undefined,
    height: '100%',
    aspectRatio: 1,
    alignSelf: 'center',
  ,
);

【参考方案2】：

这里的任何人如果希望他的图像适合全屏而不进行任何裁剪（在纵向和横向模式下），请使用：

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

【参考方案3】：

图像有一个名为 Style 的属性（就像大多数 react-native 组件一样） 对于 Image 的样式，有一个名为 resizeMode 的属性，它的取值如下： 包含、覆盖、拉伸、居中、重复

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

【参考方案4】：

您只需像这样传递 resizeMode 以适应包含视图中的图像

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

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

【参考方案5】：

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

如果你只想连续有 2 张图片，你可以尝试这样的方法而不是使用 flex：

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

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

【参考方案6】：

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

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

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

【参考方案7】：

如果您知道纵横比，例如，如果您的图像是方形的，您可以设置 height 或 width 来填充容器并让另一个由 aspectRatio 属性设置

如果你想自动设置height，这里是样式：

    width: '100%',
    height: undefined,
    aspectRatio: 1,

注意：height 必须是 undefined

【讨论】：

这个答案有什么问题？它似乎对我有用。如果有什么我需要解决的，请评论

我必须添加 resizeMode: 'contain' 才能使其工作。如果不是默认封面模式裁剪图像。

【参考方案8】：

我无法使用Image 的resizeMode 属性使示例正常工作，但是由于图像都是方形的，因此可以使用窗口的尺寸和弹性框来实现。

设置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>
    );
  
);

【讨论】：

感谢 Nader，我使用了您的解决方案，效果很好。我希望能够使用内置 flexbox 支持的东西，但这正在做我需要的。