如何以正方形显示图像的特定部分答案

【问题标题】：How to display specific part of image in square如何以正方形显示图像的特定部分
【发布时间】：2019-09-23 13:33:37
【问题描述】：

我在 React Native 中遇到 Image 组件问题。我想在某个正方形中显示图像的特定部分。 F.e：

假设我的图像分辨率为：1280x720

private someImage = require('../Assets/someImage.jpg');

我想以正方形组件显示此图像（具有恒定大小）

<View style={{width: 64, height: 64}}>
   <Image source={this.someImage}
          style={{position: 'absolute', top: 0, left: 0 }} />
</View>

第一个问题来了：图像超出了正方形。 我怎样才能只显示我的图像的一部分（但以原始分辨率）。

第二个问题是：有没有办法显示我的图像的特定片段？如果我设置为顶部：-64，左侧：-64，那是男人我希望看到原始图像沿对角线移动约 64 像素。

【问题讨论】：

标签： reactjs react-native react-native-image

【解决方案1】：

杰罗斯劳。这可能对你有帮助。

const someImage = require('../Assets/someImage.jpg');

class ImageClip extends Components {
  ...
    render() {
        return (
          ...
            <View style={{ width: 64, height: 64, overflow: 'hidden' }}> // width and height of image you want display.
                <Image
                    source={someImage}
                    style={{
                        top: 24,
                        left: 32,
                    }} //position of image you want display.
                />
            </View>
          ...
        );
    }
}

【讨论】：

【解决方案2】：

要以全分辨率显示您的图像，但只显示您选择的部分，您需要在固定大小的容器中显示图像。此图像还需要是样式属性中的背景图像。

<View style={{background-image: this.someImage, background-position-x: -64px, background-position-y: -64px}}>

【讨论】：

【解决方案3】：

将“overflow:'hidden'”赋予父视图也适用于我。 Resize-mode:contain 将不起作用，因为它会调整您的图像大小以完全适合 64x64 容器，在这种情况下不是您想要的。

        <View style={{width: 64, height: 64, overflow: 'hidden'}}>
          <Image
            source={{uri: 'https://picsum.photos/200/300'}}
            style={{
              height: 200,
              width: 200,
              top: -50,
              left: -70,
            }}
          />
        </View>

【讨论】：

【解决方案4】：

尝试在 react-native 中为图像使用 resizeMode 道具，您也可以使用 ('cover', 'contain', 'stretch', 'repeat', 'center') 道具：-

<View>

 <Image source={require: ('your path')} resizeMode={'contain'}} />

</View>

参考链接：-https://facebook.github.io/react-native/docs/image.html#resizemode

【讨论】：