2

我在本机反应中遇到图像组件问题。我想在某个正方形中显示图像的特定部分。铁：

假设我的图像分辨率为：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 像素。

4

4 回答 4

4

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

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

这是此代码的参考图像

于 2019-09-23T14:28:50.077 回答
2

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

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

于 2019-09-23T13:46:10.817 回答
1

将“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>

于 2019-09-23T13:50:26.153 回答
0

在 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

于 2019-09-23T13:42:13.723 回答