native react 图片裁剪_如何在React Native中聚焦裁剪图像

According to the docs, the react native's Image component support the following resizeModes:

'cover', 'contain', 'stretch', 'repeat', 'center'

If the image is larger then the Image component, the center mode fits the image in the Image in the component by uniformly scaling the image such that the center point of the image is in center of the Image component.

I would like to know if there is a hack or a solution in which we can define a custom point (say 0,300) as a focus point such that it is the center of the Image view.

What I want to achieve is somewhat like focus crop in fresco, but should also work for IOS.

解决方案

React-Native has a built-in API to handle image cropping, ImageEditor. It makes image cropping fairly simple. See the function below for an example.

The inputted image takes the form of a URI. The image is cropped, and a URI pointing to a cropped image is provided (the image is housed via React-Native's ImageStore API). Subsequently use this URI to display the cropped image as you wish.

// 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.