Обрезка нескольких изображений в реагировать родной

Question

Как правильно подрезать несколько изображений в React Native? Я работаю над приложением, в котором пользователь выбирает много фотографий, но перед загрузкой их на сервер каждая фотография должна иметь правильное соотношение сторон - 1: 1, 2: 3 и т. Д. c.

Я использую react-native-image-crop-picker, чтобы позволить пользователю выбрать несколько фотографий одновременно. Первоначально я использовал одну и ту же библиотеку, чтобы позволить пользователям обрезать по одной фотографии за раз, но это было плохо для пользователя, так как люди загружали по 10-20 фотографий за раз. Поэтому я подумал об автоматической обрезке изображений за сценой, используя ImageEditor.cropImage()

. Теперь я получаю обрезанное изображение, но оно практически замораживает приложение до тех пор, пока изображения не обрезаются, что приводит к плохому ux. Есть ли какие-либо сведения о том, как с этим бороться?

Answer 1

На мой взгляд, это очень трудная область, которую можно охватить только с помощью библиотеки react-native-image-picker. Я бы переосмыслил это отсутствие гибкости на стороне сервера при получении изображений тоже. По сути, я думаю, что это не очень хороший UX, требующий от пользователя загружать на мобильное устройство несколько изображений с ограниченным соотношением сторон.

Но если это невозможно, попробуйте решить эту проблему с помощью следующих параметров, чтобы лучше UX:

• Вариант 1. После импорта изображений отобразите их в виде сетки в вашем приложении, что позволит пользователю обрезать каждый из них перед загрузкой (таким образом, пользователь может сделать это вручную не чувствуя себя слишком перегруженным, немного лучший подход к ручной обрезке)
• Вариант 2: попробуйте запустить автоматические c обрезку изображений последовательно (не асинхронно) и показать пользователю ActivityIndicator, когда приложение занято обработка этих изображений и их загрузка (если необходимо, заблокируйте навигацию приложения, со стороны пользователя понятно, что загрузка нескольких изображений - более медленный процесс).
• Вариант 3: Переместите автоматическую функцию обрезки c в на стороне сервера если возможно , это Таким образом, приложение не перегружено обработкой изображений, и сервер будет иметь большую ответственность, обрабатывая все изображения, которые он получает. Не уверен, что это может быть реализовано, хотя.