Fresco: Baixa qualidade de imagem usando<image/> componente em RN&gt; = 0,57 (Fresco&gt; = 1.10.0)

Olá, parece que não houve nenhuma atividade sobre este problema recentemente. O problema foi corrigido ou ainda requer a atenção da comunidade? Este problema pode ser resolvido se nenhuma outra atividade ocorrer. Você também pode rotular esse problema como "bug" ou "aprimoramento" e eu o deixarei em aberto. Obrigado por suas contribuições.

Quais versões do Fresco estão usando o RN 0.56.0 e 0.57.1? Isso reduz o número de confirmações que podem ter causado isso.

Olá @oprisnik ,

Vou verificar e ver exatamente em qual versão do patch foi feita a atualização quando voltar ao meu escritório, embora eu ache que https://github.com/facebook/react-native/issues/21301#issuecomment -520155609 relata exatamente de qual versão obteve essa mudança de comportamento.

Olá @clytras , achei a imagem na tela deste repositório .
Eu baixei a imagem e descobri que ela tinha 2111 (largura) * 4645 (altura).

Fresco irá reduzir a resolução de uma imagem para caber no limite do OpenGL, a largura / altura máxima da imagem padrão é codificada nesta linha .

Na minha opinião,
A maneira fácil é alterar um campo maxBitmapSize de ResizeOption.
A maneira certa é não usar o Fresco para exibir uma imagem MUITO grande.

Crie um outro widget e use esta biblioteca para exibir uma imagem MUITO grande à escolha de muitos da equipe do Android.

Olá @ s1rius , escrevo o tamanho da imagem com precisão se você leu a postagem do problema aberto:

O código é apenas uma imagem simples e o tamanho da imagem é 2111 x 4645 pixels

Trata-se de uma mudança de comportamento que aconteceu de RN> = 0,57, que mudou de Fresco 1.9.0 para 1.10.0. Imagens grandes como essa funcionavam e carregavam com qualidade total antes dessa versão. Colaboradores do repo RN encerraram o problema, pois afirmam que este não é um problema RN, mas um problema Fresco lib. Se essa mudança de comportamento for feita intencionalmente, podemos encerrar este problema. Sim, existem soluções alternativas, mas é que isso estava funcionando até uma versão e de repente, e sem nenhuma informação sobre o porquê, parou de funcionar.

Olá, parece que não houve nenhuma atividade sobre este problema recentemente. O problema foi corrigido ou ainda requer a atenção da comunidade? Este problema pode ser resolvido se nenhuma outra atividade ocorrer. Você também pode rotular esse problema como "bug" ou "aprimoramento" e eu o deixarei em aberto. Obrigado por suas contribuições.

Fechar este problema após um período prolongado de inatividade. Se o problema ainda estiver presente na versão mais recente, sinta-se à vontade para reabrir com informações atualizadas.

Uma possível mudança que poderia ter causado isso é https://github.com/facebook/fresco/commit/fa71901055a38a810c190862c7fd582fd3dad2b3

Você pode verificar se essa é a alteração ofensiva?

Olá de novo, @oprisnik e obrigado por investigar isso.

Não estou tão familiarizado com o gradle e como posso alterar o RN para compilar o fresco diretamente da fonte em vez de baixar a biblioteca. Passos que dei sem sucesso:

1. Crie um projeto RN 0,57 usando react-native-cli
2. Clone fresco lib para o diretório raiz do projeto
3. Check-out para v1.10.0 branch dentro do fresco lib
4. Adicionar android-ndk-r20 caminho a <Project>\android\local.properties ( ndk.dir=G:\\Dev\\Android\\android-ndk-r20 )

Então eu encontrei esta resposta em SO https://stackoverflow.com/a/52861379/1889685 que compila RN com fresco da fonte e substitui a biblioteca:

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

mas recebo o seguinte erro:

> 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.

Talvez @sunnylqm possa testar isso se tiver algum tempo, porque ele está muito mais familiarizado com esse processo.

Se ajudar, posso criar um repo com o que tenho até agora.

Olá, parece que não houve nenhuma atividade sobre este problema recentemente. O problema foi corrigido ou ainda requer a atenção da comunidade? Este problema pode ser resolvido se nenhuma outra atividade ocorrer. Você também pode rotular esse problema como "bug" ou "aprimoramento" e eu o deixarei em aberto. Obrigado por suas contribuições.

Tentei construir, mas também obtive o erro ndk. Vocês têm compilações noturnas que podemos testar?

Como posso compilar a versão 2.0.0 sem nenhuma modificação, tentei outra maneira de verificar. Desativei o downsampling, que é habilitado pelo commit acima , e aqui estão os resultados

uri de imagem de teste:
" 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"
      />

vitrine v2.0.0 original

demonstração desativada de redução da resolução v2.0.0

@sunnylqm obrigado por depurar isso. Como posso desativar a redução da resolução? Tentei os seguintes métodos sem sucesso:

1º em 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);
}

Com isso recebo uma mensagem no Logcat informando que o Fresco já foi inicializado.

2º método que usei inicializando MainReactPackage com MainPackageConfig mas também não funcionou:

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 eu não sei. Eu desativei no código-fonte.

ping @oprisnik

Parece que isso é definido por meio da configuração do pacote principal React Native: https://github.com/facebook/react-native/blob/6c0f73b3223968448bb186b82f06f6819068a21d/ReactAndroid/src/main/java/com/facebook/reacigt/shell/Mackage

Não sei como você tem que configurar isso com RN, nunca tentei isso.

@oprisnik Existe algum plano para corrigir esse problema?

Acredito que esse problema ainda pertence ao repo da RN. O downsampling de imagem é algo que sem dúvida serve para reduzir o custo de memória, ganhar eficiência e ter menos crasses ao carregar imagens grandes. Acho que essas questões devem ser tratadas pelo RN de uma forma que permita aos desenvolvedores finais escolher se desejam ter uma redução da resolução da imagem ou não na forma de uma opção / propriedade. Por exemplo, em meu aplicativo, onde uso imagens grandes para apresentar algumas plantas baixas, preciso de alta resolução quando o usuário aumenta o zoom na planta baixa. Sempre verifico os recursos do dispositivo e, se for um dispositivo de baixo custo com menos RAM ou baixa resolução, carrego imagens menores e de baixa resolução.

Existe a propriedade resizeMethod para o componente <Image/> que tem scale e resize . O RN currenlty não respeita o scale dessa propriedade, que eu acho que deveria desabilitar a redução da resolução da imagem e apenas habilitá-la ao configurá-la para resize .

resizeMethod

O mecanismo que deve ser usado para redimensionar a imagem quando as dimensões da imagem diferem das dimensões da visualização da imagem. O padrão é automático.

resize : uma operação de software que altera a imagem codificada na memória antes de ser decodificada. Deve ser usado em vez de scale quando a imagem é muito maior do que a visualização.

scale : A imagem é desenhada em escala reduzida ou aumentada. Comparado com resize , scale é mais rápido (geralmente acelerado por hardware) e produz imagens de qualidade superior. Deve ser usado se a imagem for menor do que a visualização. Também deve ser usado se a imagem for um pouco maior do que a visualização.

Eu realmente gostaria de ver sua opinião sobre este @oprisnik @sunnylqm.

@clytras Como você disse, é uma mudança de comportamento no afresco sem explicação. (A demonstração que mostro é o aplicativo de exemplo no repositório de afrescos) Portanto, não acho que tenha algo a ver com o RN.

@sunnylqm, claro, é uma mudança de comportamento no fresco sem explicação, mas RN deve deixar a escolha de ativar / desativar este recurso para os desenvolvedores finais.

Também não se esqueça de que essa mudança de comportamento obviamente não acontece no iOS, então temos que fazer algo a respeito e como a configuração do fresco acontece no react nativo, então acho que essa configuração deve ser exposta aos desenvolvedores RN finais.

BTW, consegui compilar o Fresco 2.0.0 (master branch) com o RN 0.61.2 mais recente e desativei a redução da resolução comentando a verificação da condição de redução da resolução em

Eu criei um arquivo local.properties dentro do diretório do repositório Fresco e usei o Android NDK Revisão 19c x86_64 para Windows de 64 bits.

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

Binários Fresco compilados com sucesso e redução da resolução de imagem foi desativada para o aplicativo RN desenvolvido executando:

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

sim, a solução para isso seria desabilitar a redução da resolução para seus aplicativos, por meio da lógica de inicialização RN ou quando o Fresco é inicializado.

@oprisnik, então acho que precisamos de uma maneira melhor, limpa e fácil de inicializar o fresco dentro do projeto android gerado, o que não consegui com nenhum método que tentei. Tenho visto alguns projetos usarem com.facebook.imagepipeline.core.ImagePipelineConfig , com.facebook.react.shell.MainReactPackage e com.facebook.react.shell.MainPackageConfig para inicializá-lo dentro do método getPackages passando a configuração para MainReactPackage , mas que não funcionou para mim nem no último RN 0.61 nem no RN 0.57 que tentei:

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),
    ...
  ));
}

Talvez eu esteja fazendo algo errado lá, e isso definitivamente não funcionou com o novo sistema de links> = 0,60 que gera um arquivo PackageList.java dentro do diretório <project>/android/app/build/generated/rncli/src/main/java/com/facebook/react/ porque MainReactPackage é passou sem nenhum argumento e não consigo ver uma maneira de passar qualquer tipo de argumento usando o sistema de ligação automática, mas tentei passar manualmente o MainReactPackage com configuração fresco e também não funcionou.

Precisamos de uma maneira limpa e documentada de como inicializar o fresco lib com configuração personalizada dentro do projeto android gerado para React Native.

Depois de ler https://frescolib.org/docs/resizing.html e se bem entendi, downsampling substitui resizing . Então, @clytras , acho que você está certo, se resizeMethod definido para dimensionar, não deve permitir a redução da resolução.

O código em RN parece correto para mim https://github.com/facebook/react-native/blob/aee88b6843cea63d6aa0b5879ad6ef9da4701846/ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageView5 passaria um valor nulo para imagepipeline, o que indica nenhum redimensionamento / redução da resolução)
Mas no afresco ele não respeita os resizeOptions nulos https://github.com/facebook/fresco/blob/v2.0.0/imagepipeline/src/main/java/com/facebook/imagepipeline/producers/DecodeProducer.java#L158 - L169
Se downsampleEnabled e downsampleEnabledForNetwork forem verdadeiros, a resolução será reduzida, independentemente de resizeOptions serem nulos
https://github.com/facebook/fresco/blob/master/imagepipeline-base/src/main/java/com/facebook/imagepipeline/transcoder/DownsampleUtil.java#L56
Portanto, parece uma incompatibilidade entre o doc e o código para mim. E precisamos de uma maneira mais flexível de controlar se queremos que uma imagem específica seja reduzida. (agora é controlado por 2 configurações globais) @clytras @oprisnik

Bom trabalho @sunnylqm. Comecei a procurar e seguir a configuração do RN para o componente <Image/> para verificar essas coisas, mas você foi além de mim!

Como existe essa mudança de comportamento, acho que qualquer um dos afrescos deve verificar e aplicar a redução da resolução apenas se resizeOptions não for nulo; que é definido apenas se resizeMethod é definido como resize (ou auto e para imagens locais), que é verificado em https://github.com/facebook/react- native / blob / aee88b6843cea63d6aa0b5879ad6ef9da4701846 / ReactAndroid / src / main / java / com / facebook / react / views / image / ReactImageView.java # L606 shouldResize função, ou deveria haver uma nova função resizeMethod enum opção para reduzir a resolução especificamente.

Olá, parece que não houve nenhuma atividade sobre este problema recentemente. O problema foi corrigido ou ainda requer a atenção da comunidade? Este problema pode ser resolvido se nenhuma outra atividade ocorrer. Você também pode rotular esse problema como "bug" ou "aprimoramento" e eu o deixarei em aberto. Obrigado por suas contribuições.

@clytras você poderia dizer a sua solução?

@ club9822 a solução por agora é compilar binários de fresco a partir da fonte depois de primeiro desabilitar a redução da resolução da imagem, conforme descrevo aqui https://github.com/facebook/fresco/issues/2397#issuecomment -541802753

Existe uma solução alternativa para isso sem recompilar as bibliotecas principais?

@CaptainN Não há uma solução fácil para esse problema. O processo de compilar os fontes pode parecer difícil e tedioso, mas na verdade é uma questão de fazer algumas pequenas alterações e executar comandos. Siga minhas postagens nesta edição para descobrir como você faz isso.

@clytras Você pode passar config no segundo argumento em new PackageList(this, config)
E eu tentei, na verdade, funcionou conforme o esperado. O problema é que a lógica aqui apenas ignorou a configuração https://github.com/facebook/fresco/blob/v2.0.0/imagepipeline/src/main/java/com/facebook/imagepipeline/producers/DecodeProducer.java#L158 -L169 se fosse false
Deve ser assim, certo?

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

@oprisnik

@sunnylqm Estou fora do escritório e não posso verificar agora, mas lembro que não consegui encontrar uma maneira de passar a configuração usando o novo sistema de link automático _RN> = 60_. Eu não tenho certeza embora. Não funcionou mesmo para versões mais antigas do _RN_ para mim. Vou verificar em alguns dias, quando voltar das férias.

Eu acredito que a mudança de OR para AND resolverá o problema, pois é bastante óbvio que a redução da resolução agora se aplica sempre se o status não tiver o sinalizador IS_RESIZING_DONE portanto, ignora mDownsampleEnabled . É claro que esse será o caso se a configuração personalizada do fresco, que desativa a redução da amostra, for aplicada e passada para o fresco.

@clytras Estou recebendo todos os tipos de erros com a depreciação do Gradle e tudo mais. Alguma chance de você colocar um binário pré-compilado (e me dizer onde instalá-lo)? Eu realmente aprecio isso.

Ah, esqueça. É rude até mesmo perguntar. Vou descobrir e talvez colocar um PR.

@CaptainN não é rude. O fato é que eu fiz isso e enfrentei todos os erros, então levará muito menos tempo para fazer um repositório inicial com instruções sobre como instalar e corrigir o Fresco.

Então, aqui está: https://github.com/clytras/RN061FrescoBuild

Tem RN 0.61.5 . O repo possui instruções detalhadas. Ele clona o Fresco, verifica v2.1.0 e aplica um patch a DecodeProducer.java para comentar o código de redução da amostra. Você só precisa baixar o NDK do Android e adicionar um arquivo libraries/fresco/local.properties . Está tudo detalhado no readme.

Você pode adicionar o fresco lib a um projeto existente RN> = 0.60 (_ou versões mais antigas_) se seguir as instruções e os scripts do yarn.

@clytras Muito obrigado por colocar isso junto. Eu realmente gostei disso.

Há alguma informação sobre se o comentário acima abordará o problema no futuro?

Eu testei a mudança sugerida por @sunnylqm :

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

e depois dessa mudança, consegui desativar a redução da resolução da imagem usando apenas a configuração dentro de MainApplication.java , o que significa que ninguém terá que compilar o fresco e apenas alterar as configurações do fresco lá:

<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;
}

Após essa única alteração, o código de configuração acima funcionará e desabilitará a redução da resolução. Se removermos essa configuração ou definirmos .setDownsampleEnabled(true) , ele habilitará a redução da amostra de maneira adequada. Isso parece um bug para mim, @oprisnik. Claro que o ideal para mim seria RN respeitar resizeMethod e aplicar a redução da resolução dinamicamente, mas não tenho certeza se isso é possível.

EDITAR

Na verdade, eu estava parcialmente errado. Com essa mudança (_que faz total sentido_), RN define .setDownsampleEnabled(false) como podemos ver aqui ReactAndroid / src / main / java / com / facebook / react / modules / fresco / FrescoModule.java # L155 , então, em para habilitar a redução da resolução, temos que configurar o fresco com o código acima e definir .setDownsampleEnabled(true) . RN tem a redução da resolução desabilitada por padrão!

@clytras @CaptainN Muito obrigado pelo seu trabalho nesta questão. Estou experimentando isso, usando o Expo e estou realmente ansioso para encontrar uma solução, sem ejetar meu aplicativo, se possível.

reac-nativo-cli: 2.0.1
reagente nativo: 0.61.2

Pequena atualização. Faz muito tempo que não encontro esse problema. Mas não tenho certeza se é porque mudei para usar 3 escalas diferentes da mesma imagem ( @ 1x , @ 2x , @ 3x) para a maioria das imagens.

@enguerranws Não tenho nenhuma experiência no uso da Expo. @gorvinsky Acabei de testar usando RN 0.61.5 e não funciona. Infelizmente, tamanhos de imagem agrupados nunca funcionaram. Foi a primeira coisa que testei quando enfrentei esse problema.

Eu criei um modelo react -native-community / cli que tem o projeto RN 0.61.5 e as modificações necessárias para construir o Fresco a partir da fonte. Esta é uma maneira fácil e rápida de ter um novo projeto RN criado com o nome do projeto personalizado e com as alterações necessárias para compilar o Fresco a partir do código-fonte. Ele também usa Android NDK Revisão 21 e testei no macOS e no Windows usando yarn 1.21 .

Repositório Github: clytras / react-native-fresco
Modelo NPM: @ lytrax / react-native-fresco

Ele pode ser instalado assim:

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

Existem instruções de instalação detalhadas no README . Você precisa clonar / corrigir o Fresco usando yarn fresco-setup e, em seguida, instalar o Android NDK e criar android/libraries/fresco/local.properties com o caminho do Android NDK.

Este commit está corrigindo isso em um reagente nativo? (não lançado por enquanto)

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

Na descrição, diz que podemos passar um PipelineConfig que tem um atributo "setDownsampleEnabled".

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

@enguerranws Não tenho nenhuma experiência no uso da Expo. @gorvinsky Acabei de testar usando RN 0.61.5 e não funciona. Infelizmente, tamanhos de imagem agrupados nunca funcionaram. Foi a primeira coisa que testei quando enfrentei esse problema.

Eu criei um modelo react -native-community / cli que tem o projeto RN 0.61.5 e as modificações necessárias para construir o Fresco a partir da fonte. Esta é uma maneira fácil e rápida de ter um novo projeto RN criado com o nome do projeto personalizado e com as alterações necessárias para compilar o Fresco a partir do código-fonte. Ele também usa Android NDK Revisão 21 e testei no macOS e no Windows usando yarn 1.21 .

Repositório Github: clytras / react-native-fresco
Modelo NPM: @ lytrax / react-native-fresco

Ele pode ser instalado assim:

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

Existem instruções de instalação detalhadas no README . Você precisa clonar / corrigir o Fresco usando yarn fresco-setup e, em seguida, instalar o Android NDK e criar android/libraries/fresco/local.properties com o caminho do Android NDK.

Existe uma maneira de implementá-lo em um projeto existente?

@kalmahik
Tente desta forma. (Meu RN é v0.61.4)
É a maneira de aplicar o patch do @clytras a um projeto existente.
E não pode mais rodar o simulador Android. Estou sempre testando em dispositivos reais. 😢

1. Adicionar scripts a 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. Crie patches / DecodeProducer.java.diff

'remendo de afresco de fios'

Resultado

@@ -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. Editar android / settings.gradle

Adicione includeBuild ('libraries/fresco') antes de include ':app'

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

include ':app'

1. android / build.gradle

A dependência do gradle de uso é 3.4.1

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

1. Executar script

yarn fresco-setup

1. Baixar ndk android

Usei a versão r21.

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

1. Descompacte e mova o ndk

Descompacte NDK
Descompactei o ndk para Users/YOURNAME/Library/Android/android-ndk-r21
E crie android/libraries/fresco/local.properties em seu projeto

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

1. Executar android

Isso é tudo.

yarn android e verifique a qualidade da imagem grande.

Obrigado a @clytras

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

@JeffGuKang
o que é o comando file-patch ?

O que está impedindo que isso seja mesclado? Por que exigimos esses patches em vez de apenas consertá-los (presumindo que não seja apenas uma restrição de tempo - eu entendo isso, não estou tentando ser agressivo)?

@kalmahik file-patch é uma ferramenta de patch CLI do pacote NPM.

@JeffGuKang você deve incluir as alterações em package.json que são necessárias para que os scripts de configuração do modelo funcionem.

@CaptainN Não acho que seja tão simples, embora não tenha tido tempo de testar os commits acima ainda.

@clytras oh este um ? THX)

@kalmahik
Tente desta forma. (Meu RN é v0.61.4)
É a maneira de aplicar o patch do @clytras a um projeto existente.
E não pode mais rodar o simulador Android. Estou sempre testando em dispositivos reais. 😢

1. Adicionar scripts a 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. Crie patches / DecodeProducer.java.diff

'remendo de afresco de fios'

Resultado

@@ -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. Editar android / settings.gradle

Adicione includeBuild ('libraries/fresco') antes de include ':app'

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

include ':app'

1. android / build.gradle

A dependência do gradle de uso é 3.4.1

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

1. Executar script

yarn fresco-setup

1. Baixar ndk android

Usei a versão r21.

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

1. Descompacte e mova o ndk

Descompacte NDK
Descompactei o ndk para Users/YOURNAME/Library/Android/android-ndk-r21
E crie android/libraries/fresco/local.properties em seu projeto

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

1. Executar android

Isso é tudo.

yarn android e verifique a qualidade da imagem grande.

Obrigado a @clytras

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

Estou enfrentando esse problema ao tentar compilar o Fresco da fonte seguindo o script @clytras . Estou compilando em um projeto RN (v0.59.9) existente

Além disso, tentei adicionar Fresco Config em MainApplication.java, mas não tive sorte

@ ravali121 Essas etapas são para RN> = 0.60.x, não para RN 0.59 ou versões anteriores. Ele pode ser corrigido para versões mais antigas do RN, mas as etapas e a verificação do Fresco devem seguir a versão que vem com aquela versão específica do RN. Estou verificando o Fresco 2.1.0 para RN 0.61 e RN 0.59 tem uma versão diferente e, claro, um patch diferente, embora o patch não seja necessário, as alterações de código podem ser aplicadas manualmente editando DecodeProducer.java . Além disso, existem configurações adicionais do gradle para lidar com dependências.

Embora você possa fazê-lo funcionar com 0,59, sugiro que você atualize seu (s) projeto (s) para pelo menos 0,61 (ou melhor 0,62).

Olá! Alguma atualização em um ETA para o patch a ser mesclado? (Obrigado @clytras pelo excelente trabalho, preciso tentar seu patch o mais

@FRizzonelli o patch é uma solução alternativa, não é realmente uma solução para o problema e é por isso que esse problema permanece aberto por tanto tempo.
Tenho que verificar o patch e o modelo @react-native-community/cli e atualizá-lo para a versão mais recente do RN.

@clytras eu entendo :( O problema é que agora estou tentando configurar um pequeno POC com react-native-web na Expo, que tem esse problema para Android. E para uma pequena demonstração, eu gostaria de não ejetar. Mas Acho que preciso :(

@clytras eu entendo :( O problema é que agora estou tentando configurar um pequeno POC com react-native-web na Expo, que tem esse problema para Android. E para uma pequena demonstração, eu gostaria de não ejetar. Mas Acho que preciso :(

Que tal usar o formato jpg vez de png ? Não tenho certeza se pode ser resolvido o problema.

@clytras eu entendo :( O problema é que agora estou tentando configurar um pequeno POC com react-native-web na Expo, que tem esse problema para Android. E para uma pequena demonstração, eu gostaria de não ejetar. Mas Acho que preciso :(

Que tal usar o formato jpg vez de png ? Não tenho certeza se pode ser resolvido o problema.

Infelizmente também não funciona e eu preciso de png para camada alfa :(

Tenho o mesmo problema com RN 0.63.4.
O tamanho da imagem de 960 x 13983 é muito reduzido, os textos na imagem dificilmente podem ser lidos.
O tamanho da imagem de 680 X 2538 também foi amostrado, mas bastante decente.
Usei Image.getSize para descobrir o tamanho da imagem e calcular a altura dela (a largura é 100%)
As imagens são todas jpg.
Eu fiz método @clytras 's com Gradle 3.5.4, NDK 21.4.7075529. Mas, mesmo problema.

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

Resolvemos o problema com FastImage. Espero que ajude.

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

@JJMoon Você sabe como forçar o FastImage a renderizar novamente a imagem quando eu alterar o tamanho da imagem no estilo.
A imagem sempre é renderizada novamente, mas FastImage não.

Olá juntos,

Tentei todas as soluções possíveis deste segmento, mas com RN 0.64.2 e Fresco 2.5.0.
Estou usando o NDK v22.1.7171670 e gradle 4.2.1.

No momento, estou preso no seguinte erro (o problema está relacionado ao emulador do 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 usando FastImage com imagens locais (requer) me deu uma experiência ruim de cintilação.

Enquanto espero a equipe corrigir esse problema, estou usando Image e FastImage assim
if(height < blurSize){ return <Image/> }else{ return <FastImage/> }