Question

根据docs，本机的Image组件支持以下resizeModes：

＆＃39;封面＆＃39;，＆＃39;包含＆＃39;，＆＃39;延伸＆＃39;，＆＃39;重复＆＃39;，＆＃39; center＆＃39;

如果图像比Image组件大，则center模式通过均匀缩放图像以使图像的中心点适合组件中Image的图像位于Image组件的中心。

我想知道是否存在黑客或解决方案，我们可以将自定义点（例如0,300）定义为焦点，使其成为Image视图的中心。

我想要达到的目标有点像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

Answer 2

React-Native有一个内置的API来处理图像裁剪ImageEditor。它使图像裁剪相当简单。有关示例，请参阅下面的功能。

输入的图像采用URI的形式。裁剪图像，并提供指向裁剪图像的URI（图像通过React-Native的ImageStore API存放）。随后使用此URI显示您想要的裁剪图像。

// Make sure you import ImageEditor from react-native!
async cropImage(){
    // Construct a crop data object. 
    cropData = {
        offset:{x:0,y:0}, 
        size:{width:20, height:20},
    //  displaySize:{width:20, height:20}, THESE 2 ARE OPTIONAL. 
    //  resizeMode:'contain', 
    }
    // Crop the image. 
    try{
        await ImageEditor.cropImage(uri, 
            cropData, (successURI) => {Something awesome with successURI!}, 
            (error) =>{console.log('cropImage,',error)}
        )
    }
    catch(error){
        console.log('Error caught in this.cropImage:', error)
    }
}
// End of function.

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

2 个答案: