Question

我在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像素。

Answer 1

要以全分辨率显示图像，但只显示所选部分，则需要在固定大小的容器中显示图像。该图像还必须是style属性中的背景图像。

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

Answer 2

Jroslaw。这可能对您有帮助。

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

Answer 3

为可使用的本机图像尝试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

Answer 4

将“ 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 个答案: