更新由于问题复杂且不清楚,因此我正在重写我的问题以使其更加简单。
给定
我想要的是
这是我的示例代码
// render the part of the image
console.log(left); // 50
console.log(thumbSize); // 300
return (
<Image
source={{uri: image}}
style={selectedStyle(left, top, thumbSize)}/>
);
...
function selectedStyle(left, top, thumbSize) {
return {
left,
top,
width: thumbSize,
height: thumbSize
};
}
来自zvona的工作演示的更新,我想要的是这个。
这是一个工作示例:https : //snack.expo.io/@zvona/cropped-image
这个想法是“裁剪”View
在其中Image
具有自定义尺寸的位置。我在示例中使用常量来澄清这种情况。
<View style={styles.cropped}>
<Image
style={styles.image}
source={{uri: 'https://upload.wikimedia.org/wikipedia/en/0/02/Homer_Simpson_2006.png'}} />
</View>
在样式上:
image: {
marginLeft: -OFFSET_LEFT,
marginTop: -OFFSET_TOP,
width: IMAGE_WIDTH,
height: IMAGE_HEIGHT,
},
cropped: {
width: 150,
height: 150,
overflow: 'hidden',
position: 'absolute',
left: OFFSET_LEFT,
top: OFFSET_TOP,
},
请注意,这ImageBackground
仅出于示例目的,在实际实现中并不需要。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句