Обрезка изображения React Native

Я новичок в React Native и Expo, поэтому извините за невежество. Я создаю приложение с Expo (RN: 0.74.1, Expo: 51.0.8), которое требует отображения изображения с внешнего URL-адреса и возможности его обрезки. Я уже реализовал версию, в которой использую ImagePicker, но для этого мне нужно сохранить изображение в изображениях пользователя, а затем попросить его выбрать его оттуда. Я ищу способ обрезать изображение напрямую, без необходимости сохранять файл и открывать средство выбора.

Я смотрел https://github.com/st0ffern/react-native-image-cropper, но меня беспокоит, что плагин довольно старый (последняя версия — 2017 года). Больше ничего подходящего я не нашел. Я нашел несколько компонентов React, но не уверен, смогу ли использовать их в React Native.

Я также искал способ открыть окно выбора изображений с уже выбранным изображением, но не смог найти в документации ничего, что позволяло бы мне это сделать.

Любые предложения о том, как действовать?

react-native image expo

19.06.2024 08:03

Умерло ли Create-React-App?

В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.

Освоение React Native: Пошаговое руководство для начинающих

React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...

Ускоренная стилизация компонентов React Native с помощью NativeWind

В чем разница между react native и react ?

React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...

От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React

Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...

Хуки React: что это такое и как их использовать

Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

 *Using react-native-image-crop-picker
    import ImagePicker from 'react-native-image-crop-picker';
    
    ImagePicker.openCropper({
      path: 'https://example.com/image.jpg',
      width: 300,
      height: 400
    }).then(image => {
      console.info(image);
    });
 *Using expo-image-crop
    import { ImageCrop } from 'expo-image-crop';
    import React, { useState } from 'react';
    import { View, Button, Image } from 'react-native';
    
    const App = () => {
      const [croppedImage, setCroppedImage] = useState(null);
    
      const handleCrop = async () => {
        const result = await ImageCrop.openCropper({
          uri: 'https://example.com/image.jpg',
          aspect: [4, 3]
        });
        setCroppedImage(result.uri);
      };
    
      return (
        <View>
          <Button title = "Crop Image" onPress = {handleCrop} />
          {croppedImage && <Image source = {{ uri: croppedImage }} style = {{ width: 100, height: 100 }} />}
        </View>
      );
    };
    
    export default App;
 *Using react-native-image-editor with Expo
    import React, { useState } from 'react';
    import { View, Button, Image } from 'react-native';
    import ImageEditor from '@react-native-community/image-editor';
    
    const App = () => {
      const [croppedImage, setCroppedImage] = useState(null);
    
      const handleCrop = async () => {
        const cropData = {
          offset: { x: 0, y: 0 },
          size: { width: 300, height: 300 },
          displaySize: { width: 300, height: 300 },
          resizeMode: 'contain',
        };
    
        ImageEditor.cropImage('https://example.com/image.jpg', cropData).then((uri) => {
          setCroppedImage(uri);
        }).catch((error) => {
          console.error(error);
        });
      };
    
      return (
        <View>
          <Button title = "Crop Image" onPress = {handleCrop} />
          {croppedImage && <Image source = {{ uri: croppedImage }} style = {{ width: 100, height: 100 }} />}
        </View>
      );
    };
    
    export default App;

Спасибо, Ану. Я попробую это и отчитаюсь

— 23.06.2024 03:08

19.06.2024 11:12