Fresco: Kualitas gambar rendah menggunakan<image/> komponen pada RN &gt; = 0.57 (Fresco &gt;= 1.10.0)

Hai, sepertinya tidak ada aktivitas tentang masalah ini baru-baru ini. Apakah masalah sudah diperbaiki, atau masih membutuhkan perhatian masyarakat? Masalah ini dapat ditutup jika tidak ada aktivitas lebih lanjut yang terjadi. Anda juga dapat memberi label masalah ini sebagai "bug" atau "peningkatan" dan saya akan membiarkannya terbuka. Terima kasih atas kontribusi Anda.

Versi Fresco apa yang digunakan RN 0.56.0 dan 0.57.1? Ini mempersempit jumlah komit yang bisa menyebabkan ini.

Halo @oprisnik ,

Saya akan memeriksa dan melihat dengan tepat di patch versi mana yang mendapat peningkatan ketika saya akan kembali ke kantor saya, meskipun saya pikir https://github.com/facebook/react-native/issues/21301#issuecomment -520155609 melaporkan dengan tepat dari versi mana terjadi perubahan perilaku ini.

Hai @clytras , saya menemukan gambar di layar di repositori ini .
Saya mengunduh gambarnya, dan menemukan gambarnya adalah 2111(lebar)*4645(tinggi).

Fresco akan menurunkan sampel gambar agar sesuai dengan batas OpenGL, lebar/tinggi maksimum gambar default adalah hardcode di baris ini .

Menurut pendapat saya,
Cara mudah adalah mengubah bidang maxBitmapSize ResizeOption.
Cara yang benar adalah jangan gunakan Fresco untuk menampilkan gambar yang SANGAT besar.

Buat widget lain, dan gunakan library ini untuk menampilkan Gambar SANGAT besar yang banyak menjadi pilihan tim android.

Hai @s1rius , saya menulis ukuran gambar dengan tepat jika Anda membaca posting masalah terbuka:

Kode hanya gambar sederhana dan ukuran gambar adalah 2111 x 4645 piksel

Ini tentang perubahan perilaku yang terjadi dari RN >= 0.57 yang berubah dari Fresco 1.9.0 menjadi 1.10.0. Gambar besar seperti itu berfungsi dan dimuat dalam kualitas penuh sebelum versi itu. Kontributor dari RN repo menutup masalah karena mereka menyatakan bahwa ini bukan masalah RN tetapi masalah lib Fresco. Jika perubahan perilaku itu sengaja dilakukan, maka kita bisa menutup masalah ini. Ya ada solusi tetapi ini berfungsi hingga versi dan tiba-tiba, dan tanpa info mengapa, berhenti bekerja.

Hai, sepertinya tidak ada aktivitas tentang masalah ini baru-baru ini. Apakah masalah sudah diperbaiki, atau masih membutuhkan perhatian masyarakat? Masalah ini dapat ditutup jika tidak ada aktivitas lebih lanjut yang terjadi. Anda juga dapat memberi label masalah ini sebagai "bug" atau "peningkatan" dan saya akan membiarkannya terbuka. Terima kasih atas kontribusi Anda.

Menutup masalah ini setelah lama tidak aktif. Jika masalah ini masih ada dalam rilis terbaru, silakan buka kembali dengan informasi terkini.

Perubahan potensial yang dapat menyebabkan ini adalah https://github.com/facebook/fresco/commit/fa71901055a38a810c190862c7fd582fd3dad2b3

Bisakah Anda memverifikasi apakah itu perubahan yang menyinggung?

Halo lagi @oprisnik dan terima kasih telah menyelidiki ini.

Saya tidak begitu akrab dengan gradle dan bagaimana saya dapat mengubah RN untuk mengkompilasi fresco langsung dari sumber alih-alih mengunduh perpustakaan. Langkah-langkah yang saya ambil tanpa hasil:

1. Buat proyek RN 0.57 menggunakan react-native-cli
2. Klon fresco lib ke direktori root proyek
3. Checkout ke cabang v1.10.0 di dalam fresco lib
4. Tambahkan jalur android-ndk-r20 ke <Project>\android\local.properties ( ndk.dir=G:\\Dev\\Android\\android-ndk-r20 )

Kemudian saya menemukan jawaban ini di SO https://stackoverflow.com/a/52861379/1889685 yang mengkompilasi RN dengan fresco dari sumber dan menimpa perpustakaan:

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

tapi saya mendapatkan kesalahan berikut:

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

Mungkin @sunnylqm dapat menguji ini jika dia punya waktu, karena dia jauh lebih akrab dengan proses ini.

Jika itu membantu, saya dapat membuat repo dengan apa yang saya miliki sejauh ini.

Hai, sepertinya tidak ada aktivitas tentang masalah ini baru-baru ini. Apakah masalah sudah diperbaiki, atau masih membutuhkan perhatian masyarakat? Masalah ini dapat ditutup jika tidak ada aktivitas lebih lanjut yang terjadi. Anda juga dapat memberi label masalah ini sebagai "bug" atau "peningkatan" dan saya akan membiarkannya terbuka. Terima kasih atas kontribusi Anda.

Saya mencoba membangun tetapi juga mendapatkan kesalahan ndk. Apakah kalian memiliki build malam yang dapat kami uji?

Karena saya dapat mengkompilasi v2.0.0 tanpa modifikasi apa pun, saya mencoba cara lain untuk memverifikasi. Saya menonaktifkan downsampling yang diaktifkan oleh komit di atas , dan inilah hasilnya

gambar uji uri:
" https://wagonsclub.oss-cn-beijing.aliyuncs.com/static/carousel/carousel1_bg.jpg "

fragmen_drawee_simple.xml

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

etalase v2.0.0 asli

etalase downsampling v2.0.0 yang dinonaktifkan

@sunnylqm terima kasih telah

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

Dengan ini saya mendapatkan pesan di Logcat bahwa Fresco sudah diinisialisasi.

Metode ke-2 yang saya gunakan dengan menginisialisasi MainReactPackage dengan MainPackageConfig tetapi tidak berhasil juga:

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 Saya tidak tahu. Saya menonaktifkannya dalam kode sumber.

ping ke @oprisnik

Sepertinya ini diatur melalui konfigurasi paket utama React Native: https://github.com/facebook/react-native/blob/6c0f73b3223968448bb186b82f06f6819068a21d/ReactAndroid/src/main/Java/com/facebook/react/shell/MainPackageConfig.java

Tidak yakin bagaimana Anda harus mengaturnya dengan RN, tidak pernah mencobanya.

@oprisnik Apakah ada rencana untuk memperbaiki masalah ini?

Saya percaya masalah ini masih milik repo RN. Downsampling gambar adalah sesuatu yang tidak diragukan lagi untuk mengurangi biaya memori, mendapatkan efisiensi, dan mengurangi kesalahan saat memuat gambar besar. Saya pikir masalah ini harus ditangani oleh RN dengan cara yang memungkinkan pengembang akhir untuk memilih apakah mereka ingin melakukan downsampling gambar atau tidak dalam bentuk opsi/properti. Misalnya di aplikasi saya, di mana saya menggunakan gambar besar untuk menyajikan beberapa denah lantai, saya memerlukan resolusi tinggi saat pengguna memperbesar denah lantai. Saya selalu memeriksa kemampuan perangkat dan jika itu adalah perangkat kelas bawah dengan RAM lebih sedikit atau resolusi rendah, maka saya memuat gambar beresolusi lebih kecil dan lebih rendah.

Ada properti resizeMethod untuk komponen <Image/> yang memiliki scale dan resize . RN saat ini tidak menghargai nilai scale dari properti itu, yang menurut saya harus menonaktifkan downsampling gambar dan hanya mengaktifkannya saat menyetelnya ke resize .

resizeMethod

Mekanisme yang harus digunakan untuk mengubah ukuran gambar ketika dimensi gambar berbeda dari dimensi tampilan gambar. Default ke otomatis.

resize : Operasi perangkat lunak yang mengubah gambar yang dikodekan dalam memori sebelum didekodekan. Ini harus digunakan sebagai ganti scale ketika gambar jauh lebih besar daripada tampilan.

scale : Gambar digambar diperkecil atau ditingkatkan. Dibandingkan dengan resize , scale lebih cepat (biasanya dengan akselerasi perangkat keras) dan menghasilkan gambar dengan kualitas lebih tinggi. Ini harus digunakan jika gambar lebih kecil dari tampilan. Ini juga harus digunakan jika gambar sedikit lebih besar dari tampilan.

Saya sangat ingin melihat pendapat Anda tentang @oprisnik @sunnylqm ini.

@clytras Seperti yang Anda katakan, ini adalah perubahan perilaku di lukisan dinding tanpa penjelasan. (Demo yang saya tunjukkan adalah contoh aplikasi di fresco repo) Jadi saya rasa itu tidak ada hubungannya dengan RN.

@sunnylqm tentu saja ini adalah perubahan perilaku di fresco tanpa penjelasan tetapi RN harus meninggalkan pilihan untuk mengaktifkan/menonaktifkan fitur fresco ini ke pengembang akhir.

Juga jangan lupa bahwa perubahan perilaku ini tentu saja tidak terjadi di iOS, jadi kita harus melakukan sesuatu tentang hal itu dan karena konfigurasi fresco terjadi di reaksi asli, maka saya pikir konfigurasi ini harus diekspos ke pengembang RN akhir.

BTW saya berhasil mengkompilasi Fresco 2.0.0 (cabang master) dengan RN 0.61.2 terbaru dan menonaktifkan downsampling dengan mengomentari pemeriksaan kondisi downsampling di DecodeProducer.java seperti yang Anda lakukan.

Saya membuat file local.properties di dalam direktori repo fresco dan menggunakan Android NDK Revision 19c x86_64 untuk windows 64-bit.

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

Biner Fresco berhasil dikompilasi dan downsampling gambar telah dinonaktifkan untuk aplikasi RN yang dibuat dengan menjalankan:

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

ya, solusi untuk ini adalah menonaktifkan downsampling untuk aplikasi Anda, melalui logika inisialisasi RN atau saat Fresco diinisialisasi.

@oprisnik maka saya pikir kita membutuhkan cara yang lebih baik, bersih dan mudah untuk menginisialisasi fresco dalam proyek Android yang dihasilkan, yang tidak dapat saya capai dengan metode apa pun yang saya coba. Saya telah melihat beberapa proyek menggunakan com.facebook.imagepipeline.core.ImagePipelineConfig , com.facebook.react.shell.MainReactPackage dan com.facebook.react.shell.MainPackageConfig untuk menginisialisasinya di dalam metode getPackages dengan meneruskan konfigurasi ke MainReactPackage , tetapi itu tidak berhasil untuk saya baik di RN 0.61 maupun RN 0.57 terbaru yang saya coba:

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

Mungkin saya melakukan sesuatu yang salah di sana, dan itu pasti tidak berfungsi dengan sistem penautan >= 0.60 baru yang menghasilkan file PackageList.java di dalam direktori <project>/android/app/build/generated/rncli/src/main/java/com/facebook/react/ karena MainReactPackage adalah lulus tanpa argumen apa pun dan saya tidak dapat melihat cara untuk meneruskan argumen apa pun menggunakan sistem penautan otomatis, tetapi saya mencoba dengan mengirimkan MainReactPackage secara manual dengan konfigurasi fresco dan itu juga tidak berhasil.

Kami membutuhkan cara yang bersih dan terdokumentasi tentang cara menginisialisasi fresco lib dengan konfigurasi khusus di dalam proyek Android yang dihasilkan untuk React Native.

Setelah membaca https://frescolib.org/docs/resizing.html dan jika saya mengerti dengan benar, downsampling adalah pengganti resizing . Jadi @clytras saya pikir Anda benar, jika resizeMethod disetel ke skala, seharusnya tidak mengaktifkan downsampling.

Kode dalam RN tampaknya benar bagi saya https://github.com/facebook/react-native/blob/aee88b6843cea63d6aa0b5879ad6ef9da4701846/ReactAndroid/src/main/Java/com/facebook/react/views/image/ReactImageView.java#L505 ( itu akan meneruskan nilai nol ke imagepipeline, yang menunjukkan tidak ada pengubahan ukuran/downsampling)
Tapi di fresco itu tidak menghormati null resizeOptions https://github.com/facebook/fresco/blob/v2.0.0/imagepipeline/src/main/Java/com/facebook/imagepipeline/producers/DecodeProducer.java#L158 - L169
Jika downsampleEnabled dan downsampleEnabledForNetwork keduanya benar, itu akan di-downsampled, terlepas dari resizeOptions adalah null
https://github.com/facebook/fresco/blob/master/imagepipeline-base/src/main/java/com/facebook/imagepipeline/transcoder/DownsampleUtil.java#L56
Jadi bagi saya sepertinya ada ketidakcocokan antara dokumen dan kode. Dan kami membutuhkan cara yang lebih fleksibel untuk mengontrol apakah kami ingin gambar tertentu diturunkan sampelnya. (sekarang dikendalikan oleh 2 konfigurasi global) @clytras @oprisnik

Kerja bagus di sana @sunnylqm. Saya mulai mencari dan mengikuti konfigurasi RN untuk komponen <Image/> untuk memeriksa hal-hal itu, tetapi Anda melampaui saya!

Karena ada perubahan perilaku seperti itu, saya pikir fresco harus memeriksa dan menerapkan downsampling hanya jika resizeOptions bukan null; yang disetel hanya jika resizeMethod disetel ke resize (atau auto dan untuk gambar lokal), yang diperiksa di https://github.com/facebook/react- native/blob/aee88b6843cea63d6aa0b5879ad6ef9da4701846/ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageView.java#L606 shouldResize fungsi, atau harus ada enum resizeMethod pilihan untuk downsampling secara khusus.

Hai, sepertinya tidak ada aktivitas tentang masalah ini baru-baru ini. Apakah masalah sudah diperbaiki, atau masih membutuhkan perhatian masyarakat? Masalah ini dapat ditutup jika tidak ada aktivitas lebih lanjut yang terjadi. Anda juga dapat memberi label masalah ini sebagai "bug" atau "peningkatan" dan saya akan membiarkannya terbuka. Terima kasih atas kontribusi Anda.

@clytras bisakah Anda memberi tahu solusi Anda?

@club9822 solusinya untuk saat ini adalah mengkompilasi binari fresco dari sumber setelah pertama kali menonaktifkan downsampling gambar seperti yang saya jelaskan di sini https://github.com/facebook/fresco/issues/2397#issuecomment -541802753

Apakah ada solusi untuk ini tanpa mengkompilasi ulang perpustakaan inti?

@CaptainN Tidak ada solusi mudah untuk masalah ini. Proses kompilasi sumber mungkin tampak sulit dan membosankan, tetapi sebenarnya ini adalah masalah membuat beberapa perubahan kecil dan menjalankan perintah. Ikuti posting saya di edisi ini untuk mengetahui bagaimana Anda melakukannya.

@clytras Anda dapat meneruskan konfigurasi di argumen kedua di new PackageList(this, config)
Dan saya mencobanya ternyata benar-benar berfungsi seperti yang diharapkan. Masalahnya adalah logika di sini mengabaikan konfigurasi https://github.com/facebook/fresco/blob/v2.0.0/imagepipeline/src/main/Java/com/facebook/imagepipeline/producers/DecodeProducer.java#L158 -L169 jika itu false
Seharusnya seperti ini kan?

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

@oprisnik

@sunnylqm Saya jauh dari kantor dan saya tidak dapat memeriksa sekarang, tetapi saya ingat saya tidak dapat menemukan cara untuk melewati konfigurasi menggunakan sistem tautan otomatis _RN >= 60_ yang baru. Aku tidak yakin. Itu tidak berfungsi bahkan untuk versi _RN_ yang lebih lama untuk saya. Saya akan memeriksanya dalam beberapa hari ketika saya kembali dari liburan.

Saya percaya bahwa OR to AND change akan menyelesaikan masalah karena cukup jelas bahwa downsampling sekarang selalu berlaku jika status tidak memiliki flag IS_RESIZING_DONE sehingga sepenuhnya melewati mDownsampleEnabled . Tentu saja itu akan terjadi jika downsample penonaktifan konfigurasi fresco kustom diterapkan dan diteruskan ke fresco.

@clytras Saya mendapatkan segala macam kesalahan dengan penghentian bertahap dan semua itu. Adakah kemungkinan Anda dapat memasang biner prebuild (dan beri tahu saya di mana menginstalnya)? Saya akan sangat menghargainya.

Ah lupakan. Tidak sopan bahkan bertanya. Aku akan mencari tahu, dan mungkin dimasukkan ke dalam PR.

@CaptainN itu tidak kasar. Masalahnya adalah saya telah melakukannya dan mengatasi semua kesalahan, sehingga akan memakan waktu lebih sedikit bagi saya untuk membuat repo starter dengan instruksi tentang cara menginstal dan menambal Fresco.

Jadi ini dia: https://github.com/clytras/RN061FrescoBuild

Ini memiliki RN 0.61.5 . Repo memiliki instruksi terperinci. Itu mengkloning Fresco, checkout v2.1.0 dan menerapkan tambalan ke DecodeProducer.java jadi untuk mengomentari kode downsample. Anda hanya perlu mengunduh Android NDK dan menambahkan file libraries/fresco/local.properties . Semuanya detail di readme.

Anda dapat menambahkan lib fresco ke proyek RN >= 0.60 (_atau versi yang lebih lama_) yang ada jika Anda mengikuti instruksi dan skrip benang.

@clytras Terima kasih banyak telah menyatukannya. Saya sangat menghargai itu.

Apakah ada kata apakah komentar di atas akan mengatasi masalah ini di masa mendatang?

Saya telah menguji perubahan yang disarankan @sunnylqm :

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

dan ternyata setelah perubahan itu, saya dapat menonaktifkan downsample gambar hanya dengan menggunakan konfigurasi di dalam MainApplication.java , yang berarti tidak ada yang harus mengkompilasi fresco dan hanya perlu mengubah pengaturan fresco di sana:

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

Setelah satu perubahan itu, kode konfigurasi di atas akan berfungsi dan menonaktifkan downsampling. Jika kita menghapus konfigurasi itu atau mengatur .setDownsampleEnabled(true) maka itu akan mengaktifkan downsample dengan benar. Itu terlihat seperti bug bagi saya @oprisnik. Tentu saja hal yang ideal bagi saya adalah RN untuk menghormati resizeMethod dan menerapkan downsampling secara dinamis, tetapi saya tidak yakin apakah itu mungkin.

EDIT

Sebenarnya saya salah sebagian. Dengan perubahan itu (_yang masuk akal_), RN menetapkan .setDownsampleEnabled(false) seperti yang dapat kita lihat di sini ReactAndroid/src/main/Java/com/facebook/react/modules/fresco/FrescoModule.java#L155 , jadi, di untuk mengaktifkan downsampling, kita harus mengkonfigurasi fresco dengan kode di atas dan mengatur .setDownsampleEnabled(true) . RN telah menonaktifkan downsampling secara default!

@clytras @CaptainN Terima kasih banyak atas pekerjaan Anda dalam masalah ini. Saya mengalaminya, menggunakan Expo dan saya sangat menantikan untuk menemukan solusi, tanpa mengeluarkan aplikasi saya, jika memungkinkan.

reaksi-asli-cli: 2.0.1
reaksi asli: 0.61.2

Pembaruan kecil. Saya sudah lama tidak mengalami masalah ini. Tetapi saya tidak yakin apakah ini karena saya telah beralih menggunakan 3 skala berbeda dari gambar yang sama ( @1x , @2x , @3x) untuk sebagian besar gambar.

@enguerranws Saya tidak punya pengalaman menggunakan Expo sama sekali. @gorvinsky Saya baru saja mengujinya menggunakan RN 0.61.5 dan tidak berhasil. Sayangnya ukuran gambar yang dibundel tidak pernah berfungsi. Itu adalah hal pertama yang saya uji ketika saya pertama kali menghadapi masalah ini.

Saya telah membuat template react-native-community/cli yang memiliki proyek RN 0.61.5 dan modifikasi yang diperlukan untuk membangun Fresco dari sumber. Ini adalah cara mudah dan cepat untuk membuat proyek RN baru dengan nama proyek khusus dan dengan perubahan yang diperlukan untuk mengompilasi Fresco dari sumber. Itu juga menggunakan Android NDK Revisi 21 dan saya telah mengujinya di macOS dan Windows menggunakan yarn 1.21 .

Repositori Github: clytras/react-native-fresco
Template NPM: @lytrax/react-native-fresco

Itu dapat diinstal seperti ini:

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

Ada instruksi instalasi terperinci di README . Anda perlu mengkloning/menambal Fresco menggunakan yarn fresco-setup lalu menginstal Android NDK dan membuat android/libraries/fresco/local.properties dengan jalur Android NDK.

Apakah komit ini dalam reaksi asli memperbaiki ini? (tidak dirilis untuk saat ini)

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

Dalam deskripsi dikatakan bahwa kita dapat melewati PipelineConfig yang memiliki atribut "setDownsampleEnabled".

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

@enguerranws Saya tidak punya pengalaman menggunakan Expo sama sekali. @gorvinsky Saya baru saja mengujinya menggunakan RN 0.61.5 dan tidak berhasil. Sayangnya ukuran gambar yang dibundel tidak pernah berfungsi. Itu adalah hal pertama yang saya uji ketika saya pertama kali menghadapi masalah ini.

Saya telah membuat template react-native-community/cli yang memiliki proyek RN 0.61.5 dan modifikasi yang diperlukan untuk membangun Fresco dari sumber. Ini adalah cara mudah dan cepat untuk membuat proyek RN baru dengan nama proyek khusus dan dengan perubahan yang diperlukan untuk mengompilasi Fresco dari sumber. Itu juga menggunakan Android NDK Revisi 21 dan saya telah mengujinya di macOS dan Windows menggunakan yarn 1.21 .

Repositori Github: clytras/react-native-fresco
Template NPM: @lytrax/react-native-fresco

Itu dapat diinstal seperti ini:

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

Ada instruksi instalasi terperinci di README . Anda perlu mengkloning/menambal Fresco menggunakan yarn fresco-setup lalu menginstal Android NDK dan membuat android/libraries/fresco/local.properties dengan jalur Android NDK.

Apakah ada cara untuk mengimplementasikannya ke proyek yang sudah ada?

@kalmahik
Coba cara ini. (RN saya adalah v0.61.4)
Ini adalah cara untuk menerapkan tambalan @clytras ke proyek yang ada.
Dan itu tidak dapat menjalankan simulator android lagi. Saya selalu menguji pada perangkat nyata. 😢

1. Tambahkan skrip ke 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. Buat patch/DecodeProducer.java.diff

'tambalan fresco benang'

Hasil

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

Tambahkan includeBuild ('libraries/fresco') sebelum include ':app'

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

include ':app'

1. android/build.gradle

Gunakan ketergantungan gradle adalah 3.4.1

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

1. Jalankan skrip

yarn fresco-setup

1. Unduh android ndk

Saya menggunakan versi r21.

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

1. Buka zip dan pindahkan ndk

Buka zip NDK
Saya membuka ritsleting ndk ke Users/YOURNAME/Library/Android/android-ndk-r21
Dan buat android/libraries/fresco/local.properties di proyek Anda

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

1. Jalankan android

Itu saja.

yarn android dan periksa kualitas gambar yang besar.

Terima kasih kepada @clytras

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

@JeffGuKang
apa perintah file-patch ?

Apa yang membuat ini tidak dapat digabungkan? Mengapa kami memerlukan tambalan ini alih-alih hanya memperbaikinya (dengan asumsi itu bukan hanya batasan waktu - saya benar-benar mengerti, tidak berusaha memaksa)?

@kalmahik file-patch adalah alat patch CLI paket NPM.

@JeffGuKang Anda harus menyertakan perubahan di package.json yang diperlukan agar skrip pengaturan templat berfungsi.

@CaptainN Saya tidak berpikir itu sesederhana itu, meskipun saya belum punya waktu untuk menguji komit di atas.

@clytras oh ini satu ? Terima kasih)

@kalmahik
Coba cara ini. (RN saya adalah v0.61.4)
Ini adalah cara untuk menerapkan tambalan @clytras ke proyek yang ada.
Dan itu tidak dapat menjalankan simulator android lagi. Saya selalu menguji pada perangkat nyata. 😢

1. Tambahkan skrip ke 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. Buat patch/DecodeProducer.java.diff

'tambalan fresco benang'

Hasil

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

Tambahkan includeBuild ('libraries/fresco') sebelum include ':app'

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

include ':app'

1. android/build.gradle

Gunakan ketergantungan gradle adalah 3.4.1

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

1. Jalankan skrip

yarn fresco-setup

1. Unduh android ndk

Saya menggunakan versi r21.

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

1. Buka zip dan pindahkan ndk

Buka zip NDK
Saya membuka ritsleting ndk ke Users/YOURNAME/Library/Android/android-ndk-r21
Dan buat android/libraries/fresco/local.properties di proyek Anda

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

1. Jalankan android

Itu saja.

yarn android dan periksa kualitas gambar yang besar.

Terima kasih kepada @clytras

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

Saya menghadapi masalah ini ketika mencoba mengkompilasi Fresco dari sumber mengikuti skrip @clytras . Saya mengompilasinya ke dalam proyek RN (v0.59.9) yang ada

Juga, coba tambahkan Fresco Config ke MainApplication.java tetapi tidak berhasil

@ravali121 Langkah-langkah ini untuk RN >= 0.60.x, bukan untuk RN 0.59 atau versi yang lebih lama. Itu dapat ditambal untuk versi RN yang lebih lama, tetapi langkah-langkah dan checkout Fresco harus mengikuti versi yang disertakan dengan versi RN spesifik itu. Saya memeriksa Fresco 2.1.0 untuk RN 0.61 dan RN 0.59 memiliki versi yang berbeda dan tentu saja patch yang berbeda meskipun patch tidak diperlukan, perubahan kode dapat diterapkan secara manual dengan mengedit DecodeProducer.java . Juga, ada konfigurasi gradle tambahan untuk menangani dependensi.

Meskipun Anda dapat membuatnya bekerja dengan 0,59, saya sarankan Anda memutakhirkan proyek Anda ke setidaknya 0,61 (atau lebih baik 0,62).

Halo yang disana! Adakah pembaruan pada ETA untuk tambalan yang akan digabungkan? (Terima kasih @clytras untuk pekerjaan yang luar biasa, saya perlu mencoba tambalan Anda secepatnya, tetapi saya ingin tahu apakah ini akan diperbaiki)

@FRizzonelli tambalan adalah solusi, ini bukan perbaikan untuk masalah ini dan itulah mengapa masalah ini tetap terbuka begitu lama.
Saya harus memeriksa patch dan template @react-native-community/cli dan memutakhirkannya ke versi RN terbaru.

@clytras Saya mengerti :( Masalahnya saat ini saya sedang mencoba menyiapkan POC kecil dengan react-native-web di Expo, yang memiliki masalah ini untuk Android. Dan untuk demo kecil, saya tidak ingin mengeluarkan. Tapi aku rasa aku perlu :(

@clytras Saya mengerti :( Masalahnya saat ini saya sedang mencoba menyiapkan POC kecil dengan react-native-web di Expo, yang memiliki masalah ini untuk Android. Dan untuk demo kecil, saya tidak ingin mengeluarkan. Tapi aku rasa aku perlu :(

Bagaimana kalau menggunakan format jpg alih-alih png ? Saya tidak yakin itu bisa menyelesaikan masalah.

@clytras Saya mengerti :( Masalahnya saat ini saya sedang mencoba menyiapkan POC kecil dengan react-native-web di Expo, yang memiliki masalah ini untuk Android. Dan untuk demo kecil, saya tidak ingin mengeluarkan. Tapi aku rasa aku perlu :(

Bagaimana kalau menggunakan format jpg alih-alih png ? Saya tidak yakin itu bisa menyelesaikan masalah.

Sayangnya tidak berfungsi, dan saya perlu png untuk lapisan alfa :(

Saya memiliki masalah yang sama dengan RN 0.63.4.
Ukuran gambar 960 x 13983 turun banyak sampel, teks dalam gambar hampir tidak bisa dibaca.
Ukuran gambar 680 X 2538 juga diturunkan sampelnya tetapi cukup baik.
Saya menggunakan Image.getSize untuk mengetahui ukuran gambar, dan menghitung tinggi darinya (lebar adalah 100%)
Gambar semua jpg.
Saya melakukan metode @clytras 's dengan Gradle 3.5.4, NDK 21.4.7075529. Tapi, masalah yang sama.

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

Kami memecahkan masalah dengan FastImage. Saya harap ini akan membantu.

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

@JJMoon Apakah Anda tahu cara memaksa FastImage merender ulang gambar ketika saya mengubah ukuran gambar dalam gaya.
Gambar selalu dirender ulang tetapi FastImage tidak.

Halo bersama,

Saya mencoba semua solusi yang mungkin dari utas ini, tetapi dengan RN 0.64.2 dan Fresco 2.5.0.
Saya menggunakan NDK v22.1.7171670 dan gradle 4.2.1.

Saat ini saya terjebak pada kesalahan berikut (apakah masalah terkait dengan emulator 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 menggunakan FastImage dengan gambar lokal (wajib) memberi saya pengalaman berkedip yang buruk.

Sambil menunggu tim memperbaiki masalah ini, saya menggunakan Image dan FastImage seperti itu
if(height < blurSize){ return <Image/> }else{ return <FastImage/> }