Как показать заданную c обрезку изображения в React-Native?

Question

У меня очень серьезная c проблема, которая сводит меня с ума с помощью варианта использования, который я пытаюсь реализовать.

У меня есть большое изображение, которое я хочу разделить на квадраты размером 100x100.

Если пользователь нажимает на место на этом большом изображении, ему необходимо отобразить новый вид с точным квадратом, где щелкает. Так, например, если он нажмет на позицию 40,50 большого изображения, я открою новый вид с квадратом x: 40, y: 50, h: 100, w: 100.

Я пытался использовать ImagePicker для этого. Это мой код:

 import * as React from 'react';
import { View, Image, Text, StyleSheet, ImageBackground } from 'react-native';
import ImageEditor from '@react-native-community/image-editor';

const initialImage = { uri: 'https://reactjs.org/logo-og.png' };

export default class CroppedImage extends React.Component {
  constructor(props) {
    super(props);
    this.state = { image: initialImage };
  }
  async componentDidMount() {
    await this.cropImage();
  }

  async cropImage() {
    // Construct a crop data object.
    const 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(
        initialImage.uri,
        cropData,
        successURI => {
          console.log('oi');
        },
        error => {
          console.log('cropImage,', error);
        }
      );
    } catch (error) {
      console.log('Error caught in this.cropImage:', error);
    }
  }
  render() {
    const resizeMode = 'center';
    return (
      <View style={styles.container}>
        <ImageBackground
          source={this.state.image}
          style={styles.image}
        ></ImageBackground>
      </View>
    );
  }
}

Я получаю эту ошибку здесь:

Error caught in this.cropImage: [TypeError: Cannot read property 'cropImage' of undefined]

Есть какие-нибудь сигналы о том, что я делаю не так?

Answer 1

Вам нужна ссылка на эту библиотеку. Попробуйте:

cd ios; pod install; cd ..

или

react-native link @react-native-community/image-editor

Answer 2

Это должно быть примерно так. Пример

async cropImage(){
  const cropData = {
    offset: {
      x: 0,
      y: 0
    },
    size: {
      width: 20,
      height: 20
    }
    //  displaySize:{width:20, height:20}, THESE 2 ARE OPTIONAL.
    //  resizeMode:'contain',
  };

  try {
    const croppedImageURI = await ImageEditor.cropImage(
      initialImage.uri,
      cropData,
    );

    if (croppedImageURI) {
      this.setState({
        image: croppedImageURI
      });
    }
  } catch (cropError) {
    //this.setState({cropError});
  }
}