Fresco: Низкое качество изображения при использовании<image/> компонент на RN&gt; = 0,57 (Fresco&gt; = 1.10.0)

Привет, похоже, в последнее время не было никакой активности по этой проблеме. Проблема устранена или все еще требует внимания сообщества? Эта проблема может быть закрыта, если больше не будет никаких действий. Вы также можете пометить эту проблему как «ошибка» или «улучшение», и я оставлю ее открытой. Спасибо за ваш вклад.

Какие версии Fresco используются в RN 0.56.0 и 0.57.1? Это сужает количество коммитов, которые могли вызвать это.

Привет @oprisnik ,

Я проверю и увижу, какой именно патч версии получил обновление, когда вернусь в свой офис, хотя я думаю, что https://github.com/facebook/react-native/issues/21301#issuecomment -520155609 сообщает точно из какой версии было изменено это поведение.

Привет @clytras , я нашел изображение на экране в этом репозитории .
Я скачиваю картинку и нахожу картинку 2111 (ширина) * 4645 (высота).

Fresco уменьшит разрешение изображения, чтобы оно соответствовало пределу OpenGL, максимальная ширина / высота изображения по умолчанию жестко задана в этой строке .

На мой взгляд,
Самый простой способ - изменить поле maxBitmapSize в ResizeOption.
Правильный способ - не использовать Fresco для отображения ОЧЕНЬ большого изображения.

Создать другой виджет и использовать эту библиотеку для отображения ОЧЕНЬ большого изображения - выбор многих разработчиков Android.

Привет @ s1rius , размер изображения я напишу точно, если вы прочитали сообщение об открытом выпуске:

Код - это простое изображение и размер изображения 2111 x 4645 пикселей

Речь идет об изменении поведения, которое произошло с RN> = 0,57, которое изменилось с Fresco 1.9.0 на 1.10.0. До этой версии большие изображения, подобные этой, работали и загружались в полном качестве. Авторы репозитория RN закрыли проблему, заявив, что это не проблема RN, а проблема с библиотекой Fresco. Если это поведенческое изменение сделано намеренно, мы можем закрыть эту проблему. Да, есть обходные пути, но дело в том, что это работало до версии, и внезапно, без информации о причинах, перестало работать.

Привет, похоже, в последнее время не было никакой активности по этой проблеме. Проблема устранена или все еще требует внимания сообщества? Эта проблема может быть закрыта, если больше не будет никаких действий. Вы также можете пометить эту проблему как «ошибка» или «улучшение», и я оставлю ее открытой. Спасибо за ваш вклад.

Закрытие этого вопроса после длительного периода бездействия. Если эта проблема все еще присутствует в последнем выпуске, не стесняйтесь повторно открыть с актуальной информацией.

Потенциальное изменение, которое могло вызвать это, - https://github.com/facebook/fresco/commit/fa71901055a38a810c190862c7fd582fd3dad2b3.

Можете ли вы проверить, является ли это неправильным изменением?

Еще раз здравствуйте,

Я не так хорошо знаком с gradle и тем, как я могу изменить RN для компиляции фрески прямо из источника вместо загрузки библиотеки. Шаги, которые я предпринял безуспешно:

1. Создайте проект RN 0.57, используя react-native-cli
2. Клонировать fresco lib в корневой каталог проекта
3. Оформить заказ в ветку v1.10.0 внутри библиотеки fresco
4. Добавить android-ndk-r20 путь к <Project>\android\local.properties ( ndk.dir=G:\\Dev\\Android\\android-ndk-r20 )

Затем я нашел этот ответ в SO https://stackoverflow.com/a/52861379/1889685, который компилирует RN с фреской из источника и переопределяет библиотеку:

cd android
./gradlew assembleDebug --include-build /e/Sandbox/RN057ImageTest/fresco/

но я получаю следующую ошибку:

> Task :fresco:imagepipeline:ndk_build_bitmaps FAILED
A problem was found with the configuration of task ':fresco:imagepipeline:ndk_build_bitmaps'. Registering invalid inputs and outputs via TaskInputs and TaskOutputs methods has been deprecated and is scheduled to be removed in Gradle 5.0.
 - File 'E:\Sandbox\RN057ImageTest\fresco\imagepipeline\src\main\jni\bitmaps' specified for property '$1' is not a file.

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

Если это поможет, я могу создать репо с тем, что у меня есть.

Привет, похоже, в последнее время не было никакой активности по этой проблеме. Проблема устранена или все еще требует внимания сообщества? Эта проблема может быть закрыта, если больше не будет никаких действий. Вы также можете пометить эту проблему как «ошибка» или «улучшение», и я оставлю ее открытой. Спасибо за ваш вклад.

Я пытался собрать, но получил ошибку ndk. У вас, ребята, есть ночные сборки, которые мы можем протестировать?

Поскольку я могу скомпилировать v2.0.0 без каких-либо изменений, я попробовал проверить другой способ. Я отключил понижающую дискретизацию, которая разрешена приведенной выше фиксацией , и вот результаты

тестовое изображение uri:
" https://wagonsclub.oss-cn-beijing.aliyuncs.com/static/carousel/carousel1_bg.jpg "

fragment_drawee_simple.xml

  <com.facebook.drawee.view.SimpleDraweeView
      android:id="@+id/drawee_view"
      android:layout_width="match_parent"
      android:layout_height="1000dp"
      />

оригинальная витрина v2.0.0

отключена субдискретизация v2.0.0 витрина

@sunnylqm благодарит за отладку. Как отключить понижающую дискретизацию? Я безуспешно пробовал следующие методы:

1-е место в MainApplication.java onCreate :

<strong i="10">@Override</strong>
public void onCreate() {
  super.onCreate();

  ImagePipelineConfig config = ImagePipelineConfig.newBuilder(this)
    .setDownsampleEnabled(false)
    .build();

  Fresco.initialize(this, config);

  SoLoader.init(this, /* native exopackage */ false);
}

При этом я получаю сообщение в Logcat о том, что Fresco уже инициализирован.

Второй метод, который я использовал, инициализировал MainReactPackage с помощью MainPackageConfig но он тоже не сработал:

protected List<ReactPackage> getPackages() {
  Context context = getApplicationContext();
  ImagePipelineConfig pipelineConfig = ImagePipelineConfig
    .newBuilder(context.getApplicationContext())
    .setDownsampleEnabled(false)
    .build();
  MainPackageConfig config = new MainPackageConfig.Builder().setFrescoConfig(pipelineConfig).build();

  return new ArrayList<>(Arrays.<ReactPackage>asList(
    new MainReactPackage(config),
    new ReactNativeFirebaseAppPackage(),
    new FastImageViewPackage(),
    new RNGestureHandlerPackage(),
    new ReanimatedPackage(),
    new SvgPackage()
  ));
}

@clytras Я не знаю. Я отключил это в исходном коде.

пинг @oprisnik

Похоже, это установлено через конфигурацию основного пакета React Native: https://github.com/facebook/react-native/blob/6c0f73b3223968448bb186b82f06f6819068a21d/ReactAndroid/src/main/java/com/facebook/react/shellConf/MainPackjack/react/shellConf.

Не уверен, как это настроить с помощью RN, никогда не пробовал.

@oprisnik Есть ли планы исправить эту проблему?

Я считаю, что этот выпуск по-прежнему принадлежит репо RN. Понижение частоты дискретизации изображения, без сомнения, предназначено для снижения затрат на память, повышения эффективности и уменьшения количества сбоев при загрузке больших изображений. Я думаю, что RN должна решать эти проблемы таким образом, чтобы позволить конечным разработчикам выбирать, хотят ли они иметь понижающую дискретизацию изображения или нет, в форме параметра / свойства. Например, в моем приложении, где я использую большие изображения для представления некоторых планов этажей, мне нужно высокое разрешение, когда пользователь увеличивает масштаб плана этажа. Я всегда проверяю возможности устройства, и если это устройство низкого уровня с меньшим объемом оперативной памяти или низким разрешением, я загружаю изображения меньшего и более низкого разрешения.

Существует resizeMethod собственность за <Image/> компонент , который имеет scale и resize . RN currenlty не соблюдает значение scale этого свойства, которое, я думаю, должно отключать понижающую дискретизацию изображения и включать его только при установке на resize .

resizeMethod

Механизм, который следует использовать для изменения размера изображения, когда размеры изображения отличаются от размеров представления изображения. По умолчанию авто.

resize : программная операция, которая изменяет закодированное изображение в памяти перед его декодированием. Это следует использовать вместо scale когда изображение намного больше, чем представление.

scale : изображение увеличивается или уменьшается в масштабе. По сравнению с resize , scale быстрее (обычно с аппаратным ускорением) и создает изображения более высокого качества. Это следует использовать, если изображение меньше размера просмотра. Его также следует использовать, если изображение немного больше, чем вид.

Мне бы очень хотелось узнать ваше мнение об этом

@clytras Как вы сказали, это изменение поведения на фреске без объяснения причин. (Демонстрация, которую я показываю, является примером приложения в репозитории фрески) Так что я не думаю, что это имеет какое-либо отношение к RN.

@sunnylqm, конечно, это изменение поведения фрески без объяснения причин, но RN должна оставить выбор включения / отключения этой функции фрески конечным разработчикам.

Также не забывайте, что это изменение поведения, конечно же, не происходит в iOS, поэтому мы должны что-то с этим сделать, и поскольку конфигурация fresco происходит в react native, я думаю, что эта конфигурация должна быть представлена ​​конечным разработчикам RN.

Кстати, мне удалось скомпилировать Fresco 2.0.0 (основная ветвь) с последней версией RN 0.61.2 и отключить понижающую дискретизацию, прокомментировав проверку условия понижающей дискретизации в DecodeProducer.java, как и вы.

Я создал файл local.properties внутри каталога репозитория fresco и использовал Android NDK Revision 19c x86_64 для 64-разрядной

ndk.dir=G:\\Dev\\Android\\android-ndk-r19c
org.gradle.daemon=true
org.gradle.parallel=true
org.gradle.configureondemand=true

Двоичные файлы Fresco успешно скомпилированы, а пониженная дискретизация изображения отключена для приложения RN, созданного с помощью запуска:

cd android
.\gradlew assembleDebug --include-build ..\fresco\

да, решением для этого было бы отключение понижающей дискретизации для ваших приложений с помощью логики инициализации RN или при инициализации Fresco.

@oprisnik, тогда я думаю, что нам нужен лучший, чистый и простой способ инициализировать фреску в сгенерированном проекте Android, чего я не мог достичь ни одним из методов, которые я пробовал. Я видел, как в некоторых проектах используются com.facebook.imagepipeline.core.ImagePipelineConfig , com.facebook.react.shell.MainReactPackage и com.facebook.react.shell.MainPackageConfig для инициализации внутри метода getPackages путем передачи конфигурации MainReactPackage , но это не сработало для меня ни в последних версиях RN 0.61, ни в RN 0.57, которые я пробовал:

protected List<ReactPackage> getPackages() {
  Context context = getApplicationContext();

  ImagePipelineConfig pipelineConfig = ImagePipelineConfig
    .newBuilder(context.getApplicationContext())
    .setDownsampleEnabled(false)
    .build();

  MainPackageConfig config = new MainPackageConfig.Builder()
    .setFrescoConfig(pipelineConfig)
    .build();

  return new ArrayList<>(Arrays.<ReactPackage>asList(
    new MainReactPackage(config),
    ...
  ));
}

Возможно, я что-то делаю не так, и это определенно не сработало с новой системой связывания> = 0.60, которая генерирует файл PackageList.java внутри каталога <project>/android/app/build/generated/rncli/src/main/java/com/facebook/react/ потому что MainReactPackage передается без каких-либо аргументов, и я не вижу способа передать какие-либо аргументы с помощью системы автоматической привязки, но я попытался вручную передать MainReactPackage с конфигурацией fresco, и это тоже не сработало.

Нам нужен чистый и задокументированный способ инициализации fresco lib с пользовательской конфигурацией внутри сгенерированного проекта Android для React Native.

После прочтения https://frescolib.org/docs/resizing.html и, если я правильно понял, downsampling заменяет resizing . Итак, @clytras, я думаю, вы правы, если resizeMethod установлен на масштабирование, он не должен включать понижающую дискретизацию.

Код в RN кажется мне правильным https://github.com/facebook/react-native/blob/aee88b6843cea63d6aa0b5879ad6ef9da4701846/ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageLView5# он передаст нулевое значение в imagepipeline, что указывает на отсутствие изменения размера / понижения разрешения)
Но во фреске он не соблюдает null resizeOptions https://github.com/facebook/fresco/blob/v2.0.0/imagepipeline/src/main/java/com/facebook/imagepipeline/producers/DecodeProducer.java#L158 - L169
Если и downsampleEnabled и downsampleEnabledForNetwork истинны, выборка будет уменьшена, независимо от того, что resizeOptions равно null.
https://github.com/facebook/fresco/blob/master/imagepipeline-base/src/main/java/com/facebook/imagepipeline/transcoder/DownsampleUtil.java#L56
Так что мне кажется несоответствие между документом и кодом. И нам нужен более гибкий способ контролировать, хотим ли мы понижать разрешение конкретного изображения. (сейчас контролируется 2 глобальными конфигами ) @oprisnik

Хорошая работа там @sunnylqm. Я начал искать и следить за конфигурацией RN для компонента <Image/> чтобы проверить эти вещи, но вы превзошли меня!

Поскольку существует такое изменение поведения, я думаю, что любая фреска должна проверять и применять понижающую дискретизацию только в том случае, если resizeOptions не равно нулю; который устанавливается, только если для resizeMethod установлено значение resize (или auto и для локальных изображений), что проверяется в https://github.com/facebook/react- native / blob / aee88b6843cea63d6aa0b5879ad6ef9da4701846 / ReactAndroid / src / main / java / com / facebook / response / views / image / ReactImageView.java # L606 shouldResize function, или должно быть новое перечисление resizeMethod вариант для понижающей дискретизации специально.

Привет, похоже, в последнее время не было никакой активности по этой проблеме. Проблема устранена или все еще требует внимания сообщества? Эта проблема может быть закрыта, если больше не будет никаких действий. Вы также можете пометить эту проблему как «ошибка» или «улучшение», и я оставлю ее открытой. Спасибо за ваш вклад.

@clytras не могли бы вы рассказать о своем решении?

@ club9822 решение на данный момент состоит в том, чтобы скомпилировать двоичные файлы фрески из источника после первого отключения понижающей дискретизации изображения, как я описываю здесь https://github.com/facebook/fresco/issues/2397#issuecomment -541802753

Есть ли обходной путь без перекомпиляции основных библиотек?

@CaptainN Нет простого решения этой проблемы. Процесс компиляции исходных текстов может показаться сложным и утомительным, но на самом деле это вопрос внесения незначительных изменений и выполнения команд. Следите за моими сообщениями в этом выпуске, чтобы узнать, как вы это делаете.

@clytras Вы можете передать конфигурацию во втором аргументе в new PackageList(this, config)
И я попробовал, все получилось, как и ожидалось. Проблема в том, что логика здесь просто проигнорировала конфигурацию https://github.com/facebook/fresco/blob/v2.0.0/imagepipeline/src/main/java/com/facebook/imagepipeline/producers/DecodeProducer.java#L158 -L169, если это было false
Так должно быть, правда?

- if (mDownsampleEnabled || !statusHasFlag(status, Consumer.IS_RESIZING_DONE))
+ if (mDownsampleEnabled && !statusHasFlag(status, Consumer.IS_RESIZING_DONE))

@oprisnik

@sunnylqm Я нахожусь вдали от офиса и сейчас не могу проверить, но помню, что не смог найти способ передать конфигурацию с помощью новой системы автоматической связи _RN> = 60_. Хотя я не уверен. У меня не работало даже для старых версий _RN_. Проверю через пару дней, когда вернусь из отпуска.

Я верю, что изменение OR на AND решит проблему, поскольку совершенно очевидно, что понижающая дискретизация теперь применяется всегда, если в статусе нет флага IS_RESIZING_DONE поэтому он полностью обходит mDownsampleEnabled . Конечно, это будет так, если пользовательская конфигурация фрески, отключающая даунсэмпл, будет применена и передана в fresco.

@clytras Я получаю всевозможные ошибки с устареванием Gradle и всем остальным. Есть ли шанс, что вы можете поставить предварительно собранный двоичный файл (и сказать мне, где его установить)? Я был бы очень признателен.

Ах, забудь об этом. Грубо даже спрашивать. Я разберусь и, может быть, поставлю пиар.

@CaptainN, это не грубо. Дело в том, что я сделал это и столкнулся со всеми ошибками, поэтому мне потребуется гораздо меньше времени, чтобы создать стартовый репозиторий с инструкциями по установке и исправлению Fresco.

Итак, вот оно: https://github.com/clytras/RN061FrescoBuild

У него есть RN 0.61.5 . Репо имеет подробную инструкцию. Он клонирует Fresco, проверяет v2.1.0 и применяет патч к DecodeProducer.java чтобы закомментировать код понижающей дискретизации. Вам нужно только загрузить Android NDK и добавить файл libraries/fresco/local.properties . Все это подробно описано в ридми.

Вы можете добавить fresco lib в существующий проект RN> = 0.60 (_ или более старые версии_), если будете следовать инструкциям и сценариям пряжи.

@clytras Большое спасибо за то, что

Есть ли какие-нибудь сведения о том, решит ли вышеприведенный

Я проверил изменение, предложенное @sunnylqm :

- if (mDownsampleEnabled || !statusHasFlag(status, Consumer.IS_RESIZING_DONE))
+ if (mDownsampleEnabled && !statusHasFlag(status, Consumer.IS_RESIZING_DONE))

и оказалось, что после этого изменения я смог отключить субдискретизацию изображения, используя только конфигурацию внутри MainApplication.java , что означает, что никому не нужно будет компилировать фреску и нужно будет только изменить настройки фрески там:

<strong i="12">@Override</strong>
protected List<ReactPackage> getPackages() {
  Context context = getApplicationContext();

  ImagePipelineConfig frescoConfig = ImagePipelineConfig
    .newBuilder(context)
    .setDownsampleEnabled(false)
    .build();

  MainPackageConfig appConfig = new MainPackageConfig
    .Builder()
    .setFrescoConfig(frescoConfig)
    .build();

  @SuppressWarnings("UnnecessaryLocalVariable")
  List<ReactPackage> packages = new PackageList(this, appConfig).getPackages();
  // Packages that cannot be autolinked yet can be added manually here, for example:
  // packages.add(new MyReactNativePackage());
  return packages;
}

После этого единственного изменения приведенный выше код конфигурации будет работать и отключит понижающую дискретизацию. Если мы удалим эту конфигурацию или установим .setDownsampleEnabled(true) то она правильно включит субдискретизацию. Мне это кажется ошибкой @oprisnik. Конечно, идеальным вариантом для меня будет RN, уважающая resizeMethod и динамически применяющая понижающую дискретизацию, но я не уверен, возможно ли это.

РЕДАКТИРОВАТЬ

На самом деле я был частично неправ. С этим изменением (_ что имеет смысл_) RN устанавливает .setDownsampleEnabled(false) как мы видим здесь ReactAndroid / src / main / java / com / facebook / react / modules / fresco / FrescoModule.java # L155 , так что в чтобы включить понижающую дискретизацию, мы должны настроить фреску с помощью приведенного выше кода и установить .setDownsampleEnabled(true) . По умолчанию в RN пониженная дискретизация отключена!

@clytras @CaptainN Большое спасибо за вашу работу над этой проблемой. Я испытываю это, используя Expo, и я действительно с нетерпением жду возможности найти решение, если возможно, не извлекая мое приложение.

реагировать-родной-cli: 2.0.1
реагировать-родной: 0.61.2

Небольшое обновление. Давно не сталкивался с этой проблемой. Но я не уверен, что это связано с тем, что я переключился на использование трех разных масштабов одного и того же изображения ( @ 1x , @ 2x , @ 3x) для большинства изображений.

@enguerranws ​​У меня вообще нет опыта использования Expo. @gorvinsky Я только что протестировал его с помощью RN 0.61.5, и он не работает. К сожалению, связанные размеры изображений никогда не работали. Это было первое, что я протестировал, когда впервые столкнулся с этой проблемой.

Я создал шаблон response -native-community / cli с проектом RN 0.61.5 и необходимыми модификациями для сборки Fresco из исходников. Это простой и быстрый способ создать новый проект RN с пользовательским именем проекта и с изменениями, необходимыми для компиляции Fresco из исходного кода. Он также использует Android NDK Revision 21, и я тестировал его на macOS и Windows, используя yarn 1.21 .

Репозиторий Github: clytras / react-native-fresco
Шаблон NPM: @ lytrax / react-native-fresco

Его можно установить так:

npx @react-native-community/cli<strong i="17">@next</strong> init --template=@lytrax/react-native-fresco <ProjectName>

Подробная инструкция по установке находится в README . Вам нужно клонировать / исправлять Fresco с помощью yarn fresco-setup а затем установить Android NDK и создать android/libraries/fresco/local.properties с путем Android NDK.

Эта фиксация исправляет это? (пока не выпущено)

https://github.com/facebook/react-native/commit/f535c8b4bb4474ffe0a0765270cbca8d839deca8

В описании говорится, что мы можем передать PipelineConfig с атрибутом setDownsampleEnabled.

https://frescolib.org/docs/configure-image-pipeline.html

@enguerranws ​​У меня вообще нет опыта использования Expo. @gorvinsky Я только что протестировал его с помощью RN 0.61.5, и он не работает. К сожалению, связанные размеры изображений никогда не работали. Это было первое, что я протестировал, когда впервые столкнулся с этой проблемой.

Я создал шаблон response -native-community / cli с проектом RN 0.61.5 и необходимыми модификациями для сборки Fresco из исходников. Это простой и быстрый способ создать новый проект RN с пользовательским именем проекта и с изменениями, необходимыми для компиляции Fresco из исходного кода. Он также использует Android NDK Revision 21, и я тестировал его на macOS и Windows, используя yarn 1.21 .

Репозиторий Github: clytras / react-native-fresco
Шаблон NPM: @ lytrax / react-native-fresco

Его можно установить так:

npx @react-native-community/cli<strong i="18">@next</strong> init --template=@lytrax/react-native-fresco <ProjectName>

Подробная инструкция по установке находится в README . Вам нужно клонировать / исправлять Fresco с помощью yarn fresco-setup а затем установить Android NDK и создать android/libraries/fresco/local.properties с путем Android NDK.

Есть ли способ реализовать это в существующем проекте?

@kalmahik
Попробуйте так. (Мой RN - v0.61.4)
Это способ применить патч @clytras к существующему проекту.
И он больше не может запускать симулятор Android. Всегда тестирую на реальных устройствах. 😢

1. Добавить скрипты в package.json

"fresco-clone": "git clone https://github.com/facebook/fresco.git android/libraries/fresco && cd android/libraries/fresco && git checkout tags/v2.1.0",
"fresco-patch": "yarn file-patch ./patches/DecodeProducer.java.diff android/libraries/fresco/imagepipeline/src/main/java/com/facebook/imagepipeline/producers/DecodeProducer.java",
"fresco-setup": "yarn fresco-clone && yarn fresco-patch"

1. Создать патчи / DecodeProducer.java.diff

'пряжа фресковая нашивка'

Результат

@@ -7279,32 +7279,35 @@

+// 
 if (mDownsampleE
@@ -7381,24 +7381,27 @@

+// 
   ImageReque
@@ -7460,24 +7460,27 @@

+// 
   if (mDowns
@@ -7513,24 +7513,27 @@

+ //
        %7C%7C !U
@@ -7587,36 +7587,39 @@

+//

+ 
 encodedImage.set
@@ -7637,32 +7637,35 @@
 %0A               
+ //
          Downsam
@@ -7700,32 +7700,35 @@
 %0A               
+ //
              req
@@ -7762,32 +7762,35 @@

+// 
             requ
@@ -7820,32 +7820,35 @@
 %0A               
+ //
              enc
@@ -7866,32 +7866,35 @@

+// 
             maxB
@@ -7914,32 +7914,35 @@

+// 
   %7D%0A            
@@ -7937,32 +7937,35 @@

+// 
 %7D%0A%0A             
@@ -7962,24 +7962,27 @@

+ //
  if (produce
@@ -8002,28 +8002,31 @@

+//

+ 
 .getImagePip
@@ -8050,24 +8050,27 @@

+ //
      .getExp
@@ -8091,24 +8091,27 @@

+ //
      .should
@@ -8151,24 +8151,27 @@

+// 
   maybeIncre
@@ -8206,32 +8206,35 @@
 %0A               
+ //
  %7D%0A%0A            

1. Отредактируйте android / settings.gradle

Добавьте includeBuild ('libraries/fresco') перед include ':app'

rootProject.name = 'YOURPROJECT'
...
includeBuild ('libraries/fresco') 

include ':app'

1. android / build.gradle

Зависимость использования gradle - 3.4.1

dependencies {
  ...
  classpath("com.android.tools.build:gradle:3.4.1")
  ...
}

1. Выполнить скрипт

yarn fresco-setup

1. Скачать android ndk

Я использовал версию r21.

https://developer.android.com/ndk/downloads

1. Разархивируйте и переместите ndk

Распаковать NDK
Я разархивировал ndk в Users/YOURNAME/Library/Android/android-ndk-r21
И создайте в своем проекте android/libraries/fresco/local.properties

ndk.dir=/Users/YOURNAME/Library/Android/android-ndk-r21
org.gradle.daemon=true
org.gradle.parallel=true
org.gradle.configureondemand=true

1. Запускаем android

Это все.

yarn android и проверьте качество большого изображения.

Спасибо @clytras

https://github.com/clytras/react-native-fresco

@JeffGuKang
что такое команда file-patch ?

Что мешает этому слиться? Почему нам нужны эти патчи, а не просто их исправлять (если это не просто временные ограничения - я полностью понимаю это, не пытаясь быть настойчивым)?

@kalmahik file-patch - это средство исправления CLI пакета NPM.

@JeffGuKang, вы должны включить изменения в package.json , которые необходимы для работы сценариев установки шаблона.

@CaptainN Я не думаю, что это так просто, хотя у меня еще не было времени, чтобы проверить вышеупомянутые коммиты.

@clytras ой этот один ? Спасибо)

@kalmahik
Попробуйте так. (Мой RN - v0.61.4)
Это способ применить патч @clytras к существующему проекту.
И он больше не может запускать симулятор Android. Всегда тестирую на реальных устройствах. 😢

1. Добавить скрипты в package.json

"fresco-clone": "git clone https://github.com/facebook/fresco.git android/libraries/fresco && cd android/libraries/fresco && git checkout tags/v2.1.0",
"fresco-patch": "yarn file-patch ./patches/DecodeProducer.java.diff android/libraries/fresco/imagepipeline/src/main/java/com/facebook/imagepipeline/producers/DecodeProducer.java",
"fresco-setup": "yarn fresco-clone && yarn fresco-patch"

1. Создать патчи / DecodeProducer.java.diff

'пряжа фресковая нашивка'

Результат

@@ -7279,32 +7279,35 @@

+// 
 if (mDownsampleE
@@ -7381,24 +7381,27 @@

+// 
   ImageReque
@@ -7460,24 +7460,27 @@

+// 
   if (mDowns
@@ -7513,24 +7513,27 @@

+ //
        %7C%7C !U
@@ -7587,36 +7587,39 @@

+//

+ 
 encodedImage.set
@@ -7637,32 +7637,35 @@
 %0A               
+ //
          Downsam
@@ -7700,32 +7700,35 @@
 %0A               
+ //
              req
@@ -7762,32 +7762,35 @@

+// 
             requ
@@ -7820,32 +7820,35 @@
 %0A               
+ //
              enc
@@ -7866,32 +7866,35 @@

+// 
             maxB
@@ -7914,32 +7914,35 @@

+// 
   %7D%0A            
@@ -7937,32 +7937,35 @@

+// 
 %7D%0A%0A             
@@ -7962,24 +7962,27 @@

+ //
  if (produce
@@ -8002,28 +8002,31 @@

+//

+ 
 .getImagePip
@@ -8050,24 +8050,27 @@

+ //
      .getExp
@@ -8091,24 +8091,27 @@

+ //
      .should
@@ -8151,24 +8151,27 @@

+// 
   maybeIncre
@@ -8206,32 +8206,35 @@
 %0A               
+ //
  %7D%0A%0A            

1. Отредактируйте android / settings.gradle

Добавьте includeBuild ('libraries/fresco') перед include ':app'

rootProject.name = 'YOURPROJECT'
...
includeBuild ('libraries/fresco') 

include ':app'

1. android / build.gradle

Зависимость использования gradle - 3.4.1

dependencies {
  ...
  classpath("com.android.tools.build:gradle:3.4.1")
  ...
}

1. Выполнить скрипт

yarn fresco-setup

1. Скачать android ndk

Я использовал версию r21.

https://developer.android.com/ndk/downloads

1. Разархивируйте и переместите ndk

Распаковать NDK
Я разархивировал ndk в Users/YOURNAME/Library/Android/android-ndk-r21
И создайте в своем проекте android/libraries/fresco/local.properties

ndk.dir=/Users/YOURNAME/Library/Android/android-ndk-r21
org.gradle.daemon=true
org.gradle.parallel=true
org.gradle.configureondemand=true

1. Запускаем android

Это все.

yarn android и проверьте качество большого изображения.

Спасибо @clytras

https://github.com/clytras/react-native-fresco

Я столкнулся с этой проблемой при попытке скомпилировать Fresco из исходного кода, следуя сценарию @clytras . Я компилирую его в существующий проект RN (v0.59.9)

Кроме того, попытался добавить Fresco Config в MainApplication.java, но там не повезло

@ ravali121 Эти шаги предназначены для RN> = 0.60.x, а не для RN ​​0.59 или более ранних версий. Его можно исправить для более старых версий RN, но шаги и проверка Fresco должны соответствовать версии, которая поставляется с этой конкретной версией RN. Я проверяю Fresco 2.1.0 для RN ​​0.61, а RN 0.59 имеет другую версию и, конечно же, другой патч, хотя патч не нужен, изменения кода можно применить вручную, отредактировав DecodeProducer.java . Кроме того, есть дополнительная конфигурация Gradle для обработки зависимостей.

Хотя вы можете заставить его работать с 0,59, я предлагаю вам обновить ваши проекты как минимум до 0,61 (или лучше 0,62).

Привет! Есть ли какие-либо обновления относительно ETA для слияния патча? (Спасибо @clytras за

@FRizzonelli, патч - это обходной путь, на самом деле это не решение проблемы, и поэтому эта проблема остается открытой так долго.
Мне нужно проверить патч и шаблон @react-native-community/cli и обновить его до последней версии RN.

@clytras Я понимаю :( Проблема в том, что сейчас я пытаюсь настроить небольшой POC с react-native-web на Expo, у которого есть эта проблема для Android. А для небольшой демонстрации я бы не хотел извлекать. Но Думаю надо :(

@clytras Я понимаю :( Проблема в том, что сейчас я пытаюсь настроить небольшой POC с react-native-web на Expo, у которого есть эта проблема для Android. А для небольшой демонстрации я бы не хотел извлекать. Но Думаю надо :(

Как насчет использования формата jpg вместо png ? Я не уверен, что это решит проблему.

@clytras Я понимаю :( Проблема в том, что сейчас я пытаюсь настроить небольшой POC с react-native-web на Expo, у которого есть эта проблема для Android. А для небольшой демонстрации я бы не хотел извлекать. Но Думаю надо :(

Как насчет использования формата jpg вместо png ? Я не уверен, что это решит проблему.

К сожалению, тоже не работает, и мне нужен png для альфа-слоя :(

У меня такая же проблема с RN 0.63.4.
Размер изображения 960 x 13983 сильно занижен, текст на изображении плохо читается.
Размер изображения 680 X 2538 также уменьшен, но вполне приличный.
Я использовал Image.getSize, чтобы узнать размер изображения и вычислить по нему высоту (ширина 100%)
Все изображения в формате jpg.
Я использовал метод @clytras с gradle 3.5.4, NDK 21.4.7075529. Но такая же проблема.

        <Image
          style={{ width: SCREEN_WIDTH, height }}
          resizeMode="contain"
          source={{ uri }}
          resizeMethod="scale"
        />

Решили проблему с FastImage. Надеюсь, это поможет.

 <FastImage
          style={{ width: SCREEN_WIDTH, height: height }}
          source={{
            uri: uri,
            priority: FastImage.priority.normal,
          }}
          resizeMode={FastImage.resizeMode.center}
 />

@JJMoon Знаете ли вы, как заставить FastImage повторно визуализировать изображение, когда я меняю размер изображения в стиле.
Изображение всегда перерисовывается, а FastImage - нет.

Привет вместе,

Я перепробовал все возможные решения из этой ветки, но с RN 0.64.2 и Fresco 2.5.0.
Я использую NDK v22.1.7171670 и gradle 4.2.1.

В настоящее время я застрял на следующей ошибке (проблема связана с эмулятором Android?):

E/AndroidRuntime: FATAL EXCEPTION: mqt_native_modules
    Process: com.veerle.wiener.debug, PID: 10813
    java.lang.NoSuchMethodError: No static method initialize(Lcom/facebook/imagepipeline/core/ImagePipelineConfig;)V in class Lcom/facebook/imagepipeline/core/ImagePipelineFactory; or its super classes (declaration of 'com.facebook.imagepipeline.core.ImagePipelineFactory' appears in /data/app/<project>/base.apk!classes16.dex)
        at com.facebook.drawee.backends.pipeline.Fresco.initialize(Fresco.java:83)
        at com.facebook.drawee.backends.pipeline.Fresco.initialize(Fresco.java:45)
        at com.facebook.react.modules.fresco.FrescoModule.initialize(FrescoModule.java:114)
        at com.facebook.react.bridge.ModuleHolder.doInitialize(ModuleHolder.java:236)
        at com.facebook.react.bridge.ModuleHolder.markInitializable(ModuleHolder.java:100)
        at com.facebook.react.bridge.NativeModuleRegistry.notifyJSInstanceInitialized(NativeModuleRegistry.java:103)
        at com.facebook.react.bridge.CatalystInstanceImpl$2.run(CatalystInstanceImpl.java:438)
        at android.os.Handler.handleCallback(Handler.java:938)
        at android.os.Handler.dispatchMessage(Handler.java:99)
        at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27)
        at android.os.Looper.loop(Looper.java:223)
        at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:226)
        at java.lang.Thread.run(Thread.java:923)
I/Process: Sending signal. PID: 10813 SIG: 9

@JJMoon с использованием FastImage с локальными изображениями (требуется) дало мне плохое мерцание.

Ожидая, что команда исправит эту проблему, я использую как Image, так и FastImage.
if(height < blurSize){ return <Image/> }else{ return <FastImage/> }