javascript - 如何在 React Native 中聚焦裁剪图像

Question

根据docs , react native 的 Image 组件支持以下 resizeModes:

'覆盖'、'包含'、'拉伸(stretch)'、'重复'、'居中'

如果图像比Image组件大，center模式通过统一缩放使图像适合组件中的Image图像使得图像的中心点位于 Image 组件的中心。

我想知道是否有 hack 或解决方案，我们可以将自定义点(比如 0,300)定义为焦点，使其成为 Image View 的中心。

我想要实现的有点像 fresco 中的焦点裁剪，但也应该适用于 IOS。

Answer 1

我认为你需要这样处理

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