reactjs - 如何以正方形显示图像的特定部分

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

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

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