Как сосредоточиться кадрирование изображения в React Native

Question

Согласно docs, то реагировать Image компонент поддержки туземца следующих resizeModes:

'крышка', 'содержит', 'растяжку', 'Repeat', 'центр'

Если изображение больше, то 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, указывающий на обрезанное изображение (изображение размещается через API React-Native ImageStore). Впоследствии используйте этот 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.