根据docs , react native 的 Image
组件支持以下 resizeModes
:
'覆盖'、'包含'、'拉伸(stretch)'、'重复'、'居中'
如果图像比Image
组件大,center
模式通过统一缩放使图像适合组件中的Image
图像使得图像的中心点位于 Image
组件的中心。
我想知道是否有 hack 或解决方案,我们可以将自定义点(比如 0,300)定义为焦点,使其成为 Image
View 的中心。
我想要实现的有点像 fresco
中的焦点裁剪,但也应该适用于 IOS。
最佳答案
我认为你需要这样处理
const CroppedImage = React.createClass({
render() {
return (
<View
style={[
{
overflow: 'hidden',
height: this.props.cropHeight,
width: this.props.cropWidth,
backgroundColor: 'transparent'
},
this.props.style
]}
>
<Image
style={{
position: 'absolute',
top: this.props.cropTop * -1,
left: this.props.cropLeft * -1,
width: this.props.width,
height: this.props.height
}}
source={this.props.source}
resizeMode={this.props.resizeMode}
>
{this.props.children}
</Image>
</View>
);
}
});
看这个例子 Link
关于javascript - 如何在 React Native 中聚焦裁剪图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40627018/