Saya menghadapi masalah yang sama

System:
    OS: macOS 10.16
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Memory: 493.38 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.4.0 - ~/.nvm/versions/node/v14.4.0/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v14.4.0/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v14.4.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 25, 27, 28, 29
      Build Tools: 28.0.3, 29.0.0
      System Images: android-27 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6308749
    Xcode: 11.5/11E608c - /usr/bin/xcodebuild
  Languages:
    Python: 2.7.16 - /usr/local/bin/python
  npmPackages:
    @react-native-community/cli: ^4.5.1 => 4.5.1 
    react: 16.11.0 => 16.11.0 
    react-native: 0.62.0 => 0.62.0 
  npmGlobalPackages:
    *react-native*: Not Found

namun saya menggunakan Xcode-beta dan iOS 14

saya memiliki masalah yang sama!

masalah yang sama...

masalah yang sama...

Ok jadi saya telah menemukan bahwa masalah dengan Gambar hanya terjadi ketika build dibuat dengan Xcode 12 Beta. Ketika saya membuat build menggunakan Xcode 11.5 menggunakan iOS 14.0 Beta Device Support didapat dari sini , Gambar berfungsi dengan baik.

Ini adalah masalah duplikat -- https://github.com/facebook/react-native/issues/29215

Gunakan react-native+0.63.0.patch

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink

 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

Gunakan react-native+0.63.0.patch

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink

 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

Bagaimana saya bisa menerapkan ini menggunakan paket tambalan? Pemula dengan menggunakan patch-package.

Gunakan react-native+0.63.0.patch

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink

 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

Bagaimana saya bisa menerapkan ini menggunakan paket tambalan? Pemula dengan menggunakan patch-package.

Hai!

1.- jalankan "npm i -g patch-package"
2.- Buat folder baru bernama patch
3.- Buat file baru bernama react-native+0.63.0.patch di dalam folder itu
4.- Tambahkan kode sumber di atas.
5.- jalankan "patch-package" di root proyek

Gunakan react-native+0.63.0.patch

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink

 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

Bagaimana saya bisa menerapkan ini menggunakan paket tambalan? Pemula dengan menggunakan patch-package.

Hai!

1.- jalankan "npm i -g patch-package"
2.- Buat folder baru bernama patch
3.- Buat file baru bernama react-native+0.63.0.patch di dalam folder itu
4.- Tambahkan kode sumber di atas.
5.- jalankan "patch-package" di root proyek

Bekerja dengan baik terima kasih.

Itu dapat menampilkan gambar setelah menambahkan [super displayLayer:layer]; jika _currentFrame adalah nil

jika saya mengerti dengan benar, _currentFrame seharusnya untuk gambar animasi, jadi jika itu gambar diam, kita dapat menggunakan implementasi UIImage untuk menangani rendering gambar, tidak yakin apakah itu perbaikan yang benar.

https://github.com/facebook/react-native/blob/1c634a921887caf02f1b9fba6fd177c352f9ef78/Libraries/Image/RCTUIImageViewAnimated.m#L283 -L289

  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  } else {
    [super displayLayer:layer];
  }

Masalah yang sama dengan reaksi asli 0.62.x. Adakah kemungkinan perbaikannya bisa dikemas porting? RN 0.63.x masih sangat disadap dan kami tidak dapat memutakhirkan.

Masalah yang sama dengan reaksi asli 0.62.x. Adakah kemungkinan perbaikannya bisa dikemas porting? RN 0.63.x masih sangat disadap dan kami tidak dapat memutakhirkan.

Pikirkan yang terbaik untuk menggunakan garpu atau menerapkan paket tambalan untuk saat ini.

Saya dapat memperbaiki masalah ini dengan menerapkan tambalan yang disarankan. Saya mengonfirmasi bahwa itu berfungsi dengan baik dengan versi RN sebelumnya:

RN: 0.62.2
Kode X: 12.0
Simulator iOS: 14

Menambahkan klarifikasi (untuk pemula lain ke patch-package seperti saya) folder "tambalan" harus berada di tingkat root proyek.

Menggunakan perpustakaan tambalan hanya untuk ini sepertinya berlebihan. Apakah akan terlalu sulit untuk menambahkannya sebagai tambalan kecil ke 0.62.2 (mungkin menjadikannya 0.62.3?). Ini benar-benar 3 baris kode.

Seperti sekarang, 0.63.x memiliki beberapa bug utama dan sepertinya mereka tidak akan ditangani dalam waktu dekat (0.64.x sudah dekat), jadi kami terjebak dengan 0.62 di masa mendatang.

Menggunakan perpustakaan tambalan hanya untuk ini sepertinya berlebihan.

Jangan gunakan paket tambalan ...

Anda tidak ingin menggunakan paket tambalan, Anda tidak ingin memperbarui aplikasi Anda ke versi terbaru, tetapi mengapa "memaksa" pengembang untuk mengabaikan seluruh peta jalan?
Mengapa Anda tidak ingin melakukan sesuatu, tetapi ingin membuat orang melakukan apa yang Anda inginkan?

Tambalan bekerja dengan sempurna di sini. 0.62.2

Masalah yang sama dengan reaksi asli 0.62.x. Adakah kemungkinan perbaikannya bisa dikemas porting? RN 0.63.x masih sangat disadap dan kami tidak dapat memutakhirkan.

hai teman, tambahkan saja ini ke folder tambalan Anda di bawah react-native+0.62.2.patch

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..0ff66f3 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -275,6 +275,8 @@ - (void)displayLayer:(CALayer *)layer
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
+  } else {
+    [super displayLayer:layer];
   }
 }

diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

dan jalankan npx patch-package

Ini adalah tambalan untuk 0,61.5

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 01aa75f..24c1075 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -267,8 +267,10 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink
 - (void)displayLayer:(CALayer *)layer
 {
   if (_currentFrame) {
-    layer.contentsScale = self.animatedImageScale;
-    layer.contents = (__bridge id)_currentFrame.CGImage;
+      layer.contentsScale = self.animatedImageScale;
+      layer.contents = (__bridge id)_currentFrame.CGImage;
+  } else {
+      [super displayLayer:layer];
   }
 }

Anda selalu dapat mengganti komponen Gambar Anda dengan FastImage. Dengan begitu Anda tidak perlu menambal apa pun. Gambar memuat lebih baik juga.

Bagi siapa saja yang menggunakan perbaikan patch-package dan memiliki pengaturan CI/CD, ingatlah untuk menambahkan "postinstall": "patch-package" di package.json Anda

Anda selalu dapat mengganti komponen Gambar Anda dengan FastImage. Dengan begitu Anda tidak perlu menambal apa pun. Gambar memuat lebih baik juga.

FastImage bukan perpustakaan yang dikelola dengan banyak bug.

Mengapa menurut Anda lebih baik?

FastImage berfungsi Anda dapat menggunakannya

@johnlim5847 di mana menambahkan "postinstall": "patch-package" baris ini di package.json?

Mendapatkan kesalahan ini saat Jalankan: npx patch-package
Menerapkan tambalan...
Kesalahan: File tambalan ditemukan untuk paket asli-reaksi yang tidak ada di node_modules/reaksi-asli

@shrimallamanoj Anda harus pergi ke https://github.com/ds300/patch-package terlebih dahulu

Ya ... terima kasih saya telah mengikuti langkah dan tambalan berhasil diterapkan & tidak ada masalah saat menjalankan npx tetapi sepertinya solusi tidak berfungsi untuk saya .. buruk ... ada solusi lain?

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink

 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

Teman-teman, tambalan ini juga berfungsi pada React native 0.61.5. Saya menggunakan solusi yang sama.

1.- jalankan "benang tambahkan paket tambalan"
2.- Buat folder baru bernama patch di root proyek.
3.- Buat file baru bernama react-native+0.61.5.patch di dalam folder itu
4.- Tambahkan kode sumber di atas.
5.- jalankan "paket tambalan benang" di root proyek atau letakkan ini di skrip pasca-instal

Saya mengikuti tautan ini untuk memperbaiki masalah tentang gambar di IOS14.

• bersihkan build di Xcode (CMD + Shift + K)
• reset cache dengan npx react-native start --reset-cache
• Membangun dengan XCode, dan semuanya berfungsi dengan baik lagi
  Saya menggunakan Bereaksi asli 0.62.2
  GL untuk semua orang.

bukan perbaikan tapi pengamatan, jika Anda tetapdi dalamitu menunjukkan gambarnya.

Saya melihat bug yang sama, tetapi hanya selama proses pengembangan. Ini terjadi setelah saya memperbarui telepon saya dan program xcode. (ios14, xcode12) Yang aneh adalah ketika saya mengunduh aplikasi saya dari pasar, saya tidak dapat melihat gambar statis. Saya dapat melihat gambar ketika saya mencoba dari telepon yang berbeda. lingkungan pengembangan saya benar-benar hancur setelah pembaruan.

Mengedit file RCTUIImageViewAnimated.m secara manual seperti yang disarankan @tomcheung di atas memperbaiki masalah pada versi 0.61.5. Terima kasih!

Saran: Jangan upgrade ke 0.63 hanya patch. Saya mencoba memutakhirkan, build gagal karena firebase , code-push .

Masih mengalami masalah ini, adakah yang bisa memberi tahu apakah patch saat ini merupakan solusi terbaik untuk masalah tersebut?

Apakah ada patch untuk 0.61.2?

Apakah ada patch untuk 0.61.2?

Untuk saya. Ini diselesaikan.

0.62.2 sudah teratasi. tetapi perangkat yang sebenarnya gagal ....
apakah ada solusi?

https://github.com/huylvdev/react-native-fix-image ini berfungsi untuk saya

if (_currentFrame) {
layer.contentsScale = self.animatedImageScale;
layer.contents = (__bridge id)_currentFrame.CGImage;
} lain {
[ playLayer super display:lapisan ];
}

di : /node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m

itu bekerja untuk saya, terima kasih

Untuk saya. Ini diselesaikan.

Maaf saya tidak mengerti, apa maksudmu? Patch mana yang Anda terapkan?

solusi yang berhasil bagi saya hanya untuk sementara diperbaiki karena Anda harus memperbaikinya di dalam modul simpul, apakah ada cara lain untuk mencegah hal ini terjadi di masa mendatang?

Untuk versi asli reaksi <0.63
Silakan gunakan react-native-fast-image alih-alih ReactNative Image
Untuk pekerjaan reaksi-asli-cepat-gambar , harap nonaktifkan mundur dari reaksi-asli-cepat-gambar
Ini berfungsi di iOS 14!

Untuk saya. Ini diselesaikan.

Maaf saya tidak mengerti, apa maksudmu? Patch mana yang Anda terapkan?

@EmmanueleVilla terapkan tambalan ini https://github.com/facebook/react-native/issues/29279#issuecomment -658244428 dan kemudian gunakan paket tambalan untuk menyimpannya :)

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink

 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

Teman-teman, tambalan ini juga berfungsi pada React native 0.61.5. Saya menggunakan solusi yang sama.

1.- jalankan "benang tambahkan paket tambalan"
2.- Buat folder baru bernama patch di root proyek.
3.- Buat file baru bernama react-native+0.61.5.patch di dalam folder itu
4.- Tambahkan kode sumber di atas.
5.- jalankan "paket tambalan benang" di root proyek atau letakkan ini di skrip pasca-instal

Saya juga menjalankan 61.5, ini berhasil untuk saya! Saya menduga jika Anda memiliki versi selain 61.5, cukup ganti nama file tambalan untuk menggunakan versi Anda, dan ketika Anda menjalankan yarn patch-package itu akan menerapkan tambalan karena mendeteksi bahwa versi asli reaksi Anda cocok.

misalnya untuk versi 61.2, beri nama file patch Anda react-native+0.61.2.patch

#import "RCTUIImageViewAnimated+WLAdd.h"
#import <objc/runtime.h>

<strong i="5">@implementation</strong> RCTUIImageViewAnimated (WLAdd)

+ (void)load {
  static dispatch_once_t onceToken;
  dispatch_once(&onceToken, ^{
    Method fromMethod = class_getInstanceMethod([self class], @selector(displayLayer:));
    Method toMethod = class_getInstanceMethod([self class], @selector(wl_displayLayer:));
    method_exchangeImplementations(fromMethod, toMethod);
  });
}

- (void)wl_displayLayer:(CALayer *)layer {
  UIImage *currentFrame = [self valueForKey:@"currentFrame"];
  CGFloat animatedImageScale = [[self valueForKey:@"animatedImageScale"] floatValue];
  if (currentFrame) {
      layer.contentsScale = animatedImageScale;
      layer.contents = (__bridge id)currentFrame.CGImage;
    } else {
      [super displayLayer:layer];
    }
}

<strong i="6">@end</strong>

Ini bekerja untuk saya di v0.61.4 meskipun ada cara yang lebih sederhana untuk menghasilkan file tambalan.

tl; dr Ikuti petunjuk di https://github.com/ds300/patch-package itu sendiri.

Berikut adalah petunjuk rinci:
Ini adalah perbaikan yang dibuat pada kode sumber React Native v0.63.2 : https://github.com/facebook/react-native/commit/123423c2a9258c9af25ca9bffe1f10c42a176bf3

# make the change in `node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m` file
if (_currentFrame) {
  layer.contentsScale = self.animatedImageScale;
  layer.contents = (__bridge id)_currentFrame.CGImage;
} else {
  [super displayLayer:layer];
}

# run patch-package to create a .patch file
npx patch-package react-native

# this will generate the patch file in the patches folder
# patches/react-native+0.61.4.patch

# then add to postinstall script
"scripts": {
  "postinstall": "patch-package"
 }

Semoga ini membantu!

Gunakan react-native+0.63.0.patch

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink

 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

Bagaimana saya bisa menerapkan ini menggunakan paket tambalan? Pemula dengan menggunakan patch-package.

Hai!

1.- jalankan "npm i -g patch-package"
2.- Buat folder baru bernama patch
3.- Buat file baru bernama react-native+0.63.0.patch di dalam folder itu
4.- Tambahkan kode sumber di atas.
5.- jalankan "patch-package" di root proyek

Saya mendapatkan masalah ini saat menggunakan RN v0.61.2 tetapi ini masih berhasil untuk saya. Terima kasih

Untuk versi asli reaksi <0.63
Silakan gunakan react-native-fast-image alih-alih ReactNative Image
Untuk pekerjaan reaksi-asli-cepat-gambar , harap nonaktifkan mundur dari reaksi-asli-cepat-gambar
Ini berfungsi di iOS 14!

Ini berhasil untuk saya!

paket tambalan benang

Untuk saya. Ini diselesaikan.

Maaf saya tidak mengerti, apa maksudmu? Patch mana yang Anda terapkan?

@EmmanueleVilla terapkan tambalan ini #29279 (komentar) dan kemudian gunakan paket tambalan untuk menyimpannya :)

Kamu orangnya @jkim430 Terima kasih

Mencoba semua solusi pada 0.61.4, gambar jarak jauh dimuat dengan baik tetapi aset lokal tidak hanya ditampilkan.

Ada ide?

Terima kasih xcode..

Itu dapat menampilkan gambar setelah menambahkan [super displayLayer:layer]; jika _currentFrame adalah nil

jika saya mengerti dengan benar, _currentFrame seharusnya untuk gambar animasi, jadi jika itu gambar diam, kita dapat menggunakan implementasi UIImage untuk menangani rendering gambar, tidak yakin apakah itu perbaikan yang benar.

https://github.com/facebook/react-native/blob/1c634a921887caf02f1b9fba6fd177c352f9ef78/Libraries/Image/RCTUIImageViewAnimated.m#L283 -L289

  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  } else {
    [super displayLayer:layer];
  }

Itu berhasil untuk saya. Terima kasih! Selain itu, Anda dapat menggunakan npx patch-package (info lebih lanjut di sini ) untuk menyimpan perubahan ini dan tidak perlu terus-menerus memperbaiki node_modules diinstal ulang.

Ini adalah jenis bug yang membuat saya ingin membuka bisnis lain dan berhenti menjadi programmer.

https://github.com/huylvdev/react-native-fix-image ini berfungsi untuk saya

Terima kasih banyak Setelah menghabiskan satu hari akhirnya saya diperbaiki dengan bantuan ini

Saya dapat mengonfirmasi bahwa tambalan ini juga dapat diterapkan ke versi 0.63.2. Ganti nama file menjadi (react-native+0.62.2.patch).

Silakan buka kembali masalah ini,
Ini masih belum menyelesaikan masalah.

https://github.com/huylvdev/react-native-fix-image ini berfungsi untuk saya

Terima kasih banyak Setelah menghabiskan satu hari akhirnya saya diperbaiki dengan bantuan ini

Hei, saya mencoba menggunakan react-native-fix-image itu berhasil ketika saya melakukannya
npx react-native-fix-image tetapi ketika saya menghapus node_modules dan menginstalnya kembali.
Aplikasi tidak memuat gambar.
Apakah Anda menghadapi masalah seperti itu dan apakah kami harus menjalankan perintah npx setiap kali untuk merender gambar.

ini dia
https://github.com/facebook/react-native/issues/29279#issuecomment -658244428

https://github.com/huylvdev/react-native-fix-image ini berfungsi untuk saya

Terima kasih banyak Setelah menghabiskan satu hari akhirnya saya diperbaiki dengan bantuan ini

Itu bekerja untuk saya! Terima kasih!!

Ini tidak berfungsi untuk saya pada mode rilis, ada ide?

@tomcheung terima kasih banyak!
Saya memukul kepala saya 2 hari untuk mencari tahu apa masalahnya ...

Untuk mereka yang menjalankan React Native versi lama (misalnya, 0.60.6) patch tidak dapat dilakukan karena file RCTUIImageViewAnimated.m tidak ada. Saya memecahkan masalah ini dengan menggunakan React Native Fast Image v8.1.5 dan memutakhirkan pod SDWebImage dengan pod update SDWebImage . Lebih khusus lagi, saya memutakhirkan SDWebImage dari v5.8.1 ke v5.9.2.

Sumber: https://github.com/DylanVann/react-native-fast-image/issues/702#issuecomment -653930858

Gambar tidak ditampilkan pada versi rilis. (proyek expo 39 dikeluarkan) RN 0.63.3
pembaruan: memperbarui metro.config.js memperbaiki masalah saya => https://forums.expo.io/t/assets-missing-only-in-ios-release-build-after-ejecting/42759

Apakah ini akan diperbaiki secara resmi pada rilis RN apa pun? Afaik, masalahnya masih ada.

Apakah ini akan diperbaiki secara resmi pada rilis RN apa pun? Afaik, masalahnya masih ada.

+1. Sesekali saya mengerjakan proyek lama dan saya harus menambalnya..

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.mb/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
indeks 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink

• (void)displayLayer:(CALayer *)layer
  {
  
  
  
  • if (!_currentFrame) {
  
  
  • _currentFrame = self.image;
  
  
  • }
    
    if (_currentFrame) {
    
    layer.contentsScale = self.animatedImageScale;
    
    layer.contents = (__bridge id)_currentFrame.CGImage;
    
    diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
    
    mode file baru 100644
    
    indeks 0000000..361f5fb
    
    --- /dev/null
    
    +++ b/node_modules/react-native/scripts/.packager.env
    
    @@ -0,0 +1 @@
    
    +ekspor RCT_METRO_PORT=8081
  
  

Terima kasih! Ini bekerja untuk saya di semua proyek RN lama saya.
Ganti saja versi React Native dari proyek lama Anda alih-alih 0.63 sebelum membuat file react-native+0.63.0.patch .

Saya membuat video dan saya harap ini akan membantu seseorang.

Perbaikan @AsbarAli berhasil untuk saya, Versi RN: 0.61.5.

Itu dapat menampilkan gambar setelah menambahkan [super displayLayer:layer]; jika _currentFrame adalah nil
jika saya mengerti dengan benar, _currentFrame seharusnya untuk gambar animasi, jadi jika itu gambar diam, kita dapat menggunakan implementasi UIImage untuk menangani rendering gambar, tidak yakin apakah itu perbaikan yang benar.
https://github.com/facebook/react-native/blob/1c634a921887caf02f1b9fba6fd177c352f9ef78/Libraries/Image/RCTUIImageViewAnimated.m#L283 -L289

  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  } else {
    [super displayLayer:layer];
  }

Itu berhasil untuk saya. Terima kasih! Selain itu, Anda dapat menggunakan npx patch-package (info lebih lanjut di sini ) untuk menyimpan perubahan ini dan tidak perlu terus-menerus memperbaiki node_modules diinstal ulang.

Ini adalah jenis bug yang membuat saya ingin membuka bisnis lain dan berhenti menjadi programmer.

Sangat penting bahwa Anda menjalankan npx patch-package react-native untuk patch yang akan diterapkan.

Hei semua, bisakah seseorang mengonfirmasi ini digabung ke inti?

Meskipun patch-package adalah solusi, itu tidak boleh menjadi solusi permanen.

Saya akan tetap membuka ini sampai saya dapat menyelidikinya.

Apakah mereka tidak berencana untuk memperbaikinya?

https://www.npmjs.com/package/react-native-fix-image
bekerja untuk saya

Sepertinya sudah diperbaiki. Hanya tidak akan kembali porting ke versi sebelumnya. Saya percaya perbaikannya ada di 63.3

Perbaikan @AsbarAli berhasil untuk saya, Versi RN: 0.61.5.

Bagaimana kamu melakukannya? saya menggunakan RN 61.2

Gunakan react-native+0.63.0.patch

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink

 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

Bagaimana saya bisa menerapkan ini menggunakan paket tambalan? Pemula dengan menggunakan patch-package.

Hai!
1.- jalankan "npm i -g patch-package"
2.- Buat folder baru bernama patch
3.- Buat file baru bernama react-native+0.63.0.patch di dalam folder itu
4.- Tambahkan kode sumber di atas.
5.- jalankan "patch-package" di root proyek

Saya mendapatkan masalah ini saat menggunakan RN v0.61.2 tetapi ini masih berhasil untuk saya. Terima kasih

Hai, bisakah kamu membantuku? Saya juga memiliki RN 61.2 tetapi tidak berfungsi sama sekali. Mungkin gambar navigasi bawah tidak muncul

Hai @rjtubera , patch seharusnya bekerja dengan 0.63 meskipun dilaporkan bekerja juga dengan versi 0.61.5 dari React Native. Mungkin jika Anda mencoba memutakhirkan dari React Native 0.61.2 ke 0.61.5, dan menerapkan kembali langkah-langkah yang Anda kutip, mungkin berhasil.

Jika itu tidak berhasil, coba tingkatkan ke 0.63 dan lakukan hal yang sama. Meskipun hati-hati karena beberapa komponen Anda mungkin rusak. Anda harus menguji setiap komponen setelah pemutakhiran untuk memastikan semuanya masih berfungsi dengan baik (di iOS dan Android).

Saya mengalami masalah ini, saya memperbaikinya dengan mengikuti langkah-langkah di tautan ini
https://github.com/facebook/react-native/pull/29420#issuecomment -707435412

Terima kasih Alabi, saya juga mengurutkan masalah dengan menambal React Native. Bekerja dengan baik sekarang sejauh ini 😊

Dari: Alabi Temitope [email protected]
Balas ke: facebook/react-native [email protected]
Tanggal: Selasa 13 Oktober 2020 pukul 03:56
Kepada: facebook/react-native [email protected]
Cc: Kieran Desmond [email protected] , Comment [email protected]
Subjek: Re: [facebook/react-native] Gambar tidak dapat menampilkan gambar di iOS 14 (#29279)

Saya mengalami masalah ini, saya memperbaikinya dengan mengikuti langkah-langkah di tautan ini

29420 (komentar) https://github.com/facebook/react-native/pull/29420#issuecomment-707435412

—
Anda menerima ini karena Anda berkomentar.
Balas email ini secara langsung, lihat di GitHub https://github.com/facebook/react-native/issues/29279#issuecomment-707436028 , atau berhenti berlangganan https://github.com/notifications/unsubscribe-auth/AIENJUWD2RES5AC52CT4MG3SKOXURANCNFSM4ORGDXZA .

saya memutakhirkan ke versi asli reaksi 0,63, tetapi saya menghadapi masalah yang sama, ada yang bisa membantu saya?

Untuk mereka yang menjalankan React Native versi lama (misalnya, 0.60.6) patch tidak dapat dilakukan karena file RCTUIImageViewAnimated.m tidak ada. Saya memecahkan masalah ini dengan menggunakan React Native Fast Image v8.1.5 dan memutakhirkan pod SDWebImage dengan pod update SDWebImage . Lebih khusus lagi, saya memutakhirkan SDWebImage dari v5.8.1 ke v5.9.2.

Sumber: DylanVann/react-native-fast-image#702 (komentar)

Bekerja dengan sempurna.

Versi 8.3.2 dari react-native-fast-image bahkan menyertakan versi SDWebImage yang ditingkatkan, jadi tidak perlu pod update !

https://www.npmjs.com/package/react-native-fix-image
bekerja untuk saya

Bekerja untuk saya juga. 👍

Upgrade dari React-Native 0.63.1 ke 0.63.2 berhasil untuk kami.

Saya menghadapi masalah yang sama pada RN 0.62.2 pada Xcode 12.0.1. dan ios 14 . Ada solusi?

Saya menghadapi masalah yang sama pada RN 0.62.2 pada Xcode 12.0.1. dan ios 14 . Ada solusi?

@ghasemikasra39 Saya menghadapi masalah yang sama dengan versi Anda yang sama. Menginstal react-native-fix-image berfungsi untuk saya.

@RutsSantos tepat ini juga bekerja untuk saya!

1) npm install --save react-native-fix-image
2) npx react-native-fix-image
3) membangun kembali proyek

Upgrade dari React-Native 0.63.1 ke 0.63.2 berhasil untuk kami.

Ini berhasil untuk saya.

Ini berhasil untuk saya. Terima kasih @JordanRosas

@JordanRosas Bekerja untuk saya juga luar biasa, terima kasih

tingkatkan versi reaksi asli dari 0.62.2 ke 0.63.3 tidak perlu menambal atau menginstal modul npm lagi

0.62.3 tidak ada:

0.63.3
0.63.2
0.63.1
0.63.0 3.0
0.63.0-rc.1
0.63.0-rc.0
0.62.2
0.62.1
0.62.0

0.63.3
0.63.2
0.63.1
0.63.0
0.63.0-rc.1
0.63.0-rc.0
0.62.2
0.62.1
0.62.0

dikoreksi

Beberapa dari kita tidak dapat memutakhirkan hingga bug RN kritis ini teratasi: https://github.com/facebook/react-native/issues/29451

Jadi kita terjebak dengan patch monyet 0.62.x atau versi 0.63.x yang disadap.

Itu dapat menampilkan gambar setelah menambahkan [super displayLayer:layer]; jika _currentFrame adalah nil

jika saya mengerti dengan benar, _currentFrame seharusnya untuk gambar animasi, jadi jika itu gambar diam, kita dapat menggunakan implementasi UIImage untuk menangani rendering gambar, tidak yakin apakah itu perbaikan yang benar.

https://github.com/facebook/react-native/blob/1c634a921887caf02f1b9fba6fd177c352f9ef78/Libraries/Image/RCTUIImageViewAnimated.m#L283 -L289

  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  } else {
    [super displayLayer:layer];
  }

Berhasil. Terima kasih!

Jika Anda tidak ingin menginstal paket apa pun atau langsung mengedit node_modules Anda dapat mencoba menambahkan kait panggung preinstall di podfile seperti pada https://stackoverflow.com/a/64495360/7477198 ini bekerja untuk saya. Ini lebih ramah git.

Bagi saya, bahkan pada RN 63.3, gambar tidak muncul di perangkat fisik. Sebagai solusinya, saya menyandikan gambar di basis 64 di sini: https://www.base64-image.de/ dan kemudian menggunakannya sebagai source untuk komponen Image alih-alih require('imagePath')

Itu dapat menampilkan gambar setelah menambahkan [super displayLayer:layer]; jika _currentFrame adalah nil

jika saya mengerti dengan benar, _currentFrame seharusnya untuk gambar animasi, jadi jika itu gambar diam, kita dapat menggunakan implementasi UIImage untuk menangani rendering gambar, tidak yakin apakah itu perbaikan yang benar.

https://github.com/facebook/react-native/blob/1c634a921887caf02f1b9fba6fd177c352f9ef78/Libraries/Image/RCTUIImageViewAnimated.m#L283 -L289

  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  } else {
    [super displayLayer:layer];
  }

Anda adalah pria jenius, Anda menyelamatkan hidup saya!

Gunakan react-native+0.63.0.patch

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink

 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

Bagaimana saya bisa menerapkan ini menggunakan paket tambalan? Pemula dengan menggunakan patch-package.

Hai!

1.- jalankan "npm i -g patch-package"
2.- Buat folder baru bernama patch
3.- Buat file baru bernama react-native+0.63.0.patch di dalam folder itu
4.- Tambahkan kode sumber di atas.
5.- jalankan "patch-package" di root proyek

terima kasih
bekerja untuk saya dengan baik di RN 0.61.5
saya menambahkan file patch bernama react-native+0.61.5.patch

juga perbaikan untuk DylanVann/react-native-fast-image
cd ios && pod update SDWebImage

Gunakan react-native+0.63.0.patch

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink

 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

@legion-zver Terima kasih atas perbaikannya! Apakah RCT_METRO_PORT diperlukan di sini, atau sesuatu yang spesifik untuk proyek Anda?

RN 0.59.0 pada Xcode 12.0.1. dan ios 14. Adakah solusi?

RN 0.59.0 pada Xcode 12.0.1. dan ios 14. Adakah solusi?

3 solusi:

1. Perbaiki masalah secara manual di dalam node_modules
2. Gunakan perpustakaan perbaikan ini https://www.npmjs.com/package/react-native-fix-image
3. Perbarui ke React Native 0.63.3

Saya dapat mengonfirmasi ini masih ada di --configuration=Release , bahkan pada "react-native": "0.63.3" . Namun bekerja dengan baik di --configuration=Debug .

https://www.npmjs.com/package/react-native-fix-image tidak membantu tetapi merusak build in
rilis konfigurasi dengan kesalahan ini:

.../node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m:278:5: error: expected expression
  } else {
    ^

Juga pengguna aplikasi saya tidak mengalami pemuatan gambar (dari url) di iOS tetapi itu tidak terjadi pada semua orang hanya pada beberapa orang. Tolong perbaiki ini. Saya menggunakan React Native 0.63.3.
https://i.ibb.co/1vDc6kv/1.jpg <- tautan ke gambar yang menunjukkan masalah ini

@douglasjunior bekerja dengan baik! Terima kasih banyak!

@RutsSantos tepat ini juga bekerja untuk saya!

1. npm install --save react-native-fix-image
2. npx reaksi-asli-perbaiki-gambar
3. membangun kembali proyek

bekerja untuk saya

RN 0.59.0 pada Xcode 12.0.1. dan ios 14. Adakah solusi?

3 solusi:

1. Perbaiki masalah secara manual di dalam node_modules
2. Gunakan perpustakaan perbaikan ini https://www.npmjs.com/package/react-native-fix-image
3. Perbarui ke React Native 0.63.3

Q lain, saya menggunakan .1 secara manual di dalam node_modules ini berfungsi dengan baik dalam menampilkan gambar dari jaringan, tetapi saya tidak dapat menampilkan gambar lokal,

Juga pengguna aplikasi saya tidak mengalami pemuatan gambar (dari url) di iOS tetapi itu tidak terjadi pada semua orang hanya pada beberapa orang. Tolong perbaiki ini. Saya menggunakan React Native 0.63.3.
https://i.ibb.co/1vDc6kv/1.jpg <- tautan ke gambar yang menunjukkan masalah ini

Saya menemukan masalah yang terjadi pada saya. WebP tidak didukung di iOS 13 jadi saya perlu menginstal react-native-fast-image dengan SDWebImageWebPCoder pod.

saya rasa tidak ada yang punya skrip pembuatan Microsoft App Center untuk memperbaikinya juga?

FYI, saya juga dapat mengatasi ini menggunakan FastImage yang telah diperbaiki setelah memutakhirkan SDWebImage https://github.com/DylanVann/react-native-fast-image/issues/730 (Saya tidak dapat memutakhirkan ke 0,63 sekarang karena rusak pekerjaan lain, saya akhirnya akan pindah ke versi terbaru)

Dalam kasus saya, saya memiliki gambar animasi dari RN biasa, tetapi saya dapat menggunakan FastImage untuk itu juga menggunakan

const AnimatedImage = Animated.createAnimatedComponent(FastImage)

<AnimatedImage source={require('....')} />

Atau paket gambar perbaikan harus dilakukan, jika tidak berfungsi di Appcenter (@krisbaum74) Anda harus dapat melakukan hal yang sama dengan membuat appcenter-pre-build.sh di root repo dan menambahkan skrip dengan perbaikan di sana

Saya menggunakan react-native 0.63.3 dan masih menghadapi masalah ini di iOS 14.1. Ini sudah diterapkan di versi itu. Ada ide tentang cara memperbaikinya?

Saya menggunakan react-native 0.63.3 dan masih menghadapi masalah ini di iOS 14.1. Ini sudah diterapkan di versi itu. Ada ide tentang cara memperbaikinya?

jika Anda meningkatkan ke 0.63.3 Anda mungkin memiliki masalah dalam kode itu, coba perpustakaan perbaikan ini https://www.npmjs.com/package/react-native-fix-image

Saya menggunakan react-native 0.63.3 dan masih menghadapi masalah ini di iOS 14.1. Ini sudah diterapkan di versi itu. Ada ide tentang cara memperbaikinya?

jika Anda meningkatkan ke 0.63.3 Anda mungkin memiliki masalah dalam kode itu, coba perpustakaan perbaikan ini https://www.npmjs.com/package/react-native-fix-image

Saya sudah memutakhirkan ke 0.63.3 dan perpustakaan ini tidak menyelesaikan masalah (Gambar dimuat di simulator tetapi tidak di perangkat fisik.

Saya menggunakan react-native 0.63.3 dan masih menghadapi masalah ini di iOS 14.1. Ini sudah diterapkan di versi itu. Ada ide tentang cara memperbaikinya?

jika Anda meningkatkan ke 0.63.3 Anda mungkin memiliki masalah dalam kode itu, coba perpustakaan perbaikan ini https://www.npmjs.com/package/react-native-fix-image

Saya sudah memutakhirkan ke 0.63.3 dan perpustakaan ini tidak menyelesaikan masalah (Gambar dimuat di simulator tetapi tidak di perangkat fisik.

Masalah saya terkait dengan menyalin aset untuk build produksi, ada tautan yang buruk seperti yang dijelaskan di sini lalu buat ulang bundel dan coba lagi

Gunakan react-native+0.63.0.patch

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink

 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

Bagaimana saya bisa menerapkan ini menggunakan paket tambalan? Pemula dengan menggunakan patch-package.

Hai!

1.- jalankan "npm i -g patch-package"
2.- Buat folder baru bernama patch
3.- Buat file baru bernama react-native+0.63.0.patch di dalam folder itu
4.- Tambahkan kode sumber di atas.
5.- jalankan "patch-package" di root proyek

Terima kasih banyak!!!! Anda benar-benar menyelamatkan hari saya 🙏 ❤️

Itu dapat menampilkan gambar setelah menambahkan [super displayLayer:layer]; jika _currentFrame adalah nil

jika saya mengerti dengan benar, _currentFrame seharusnya untuk gambar animasi, jadi jika itu gambar diam, kita dapat menggunakan implementasi UIImage untuk menangani rendering gambar, tidak yakin apakah itu perbaikan yang benar.

https://github.com/facebook/react-native/blob/1c634a921887caf02f1b9fba6fd177c352f9ef78/Libraries/Image/RCTUIImageViewAnimated.m#L283 -L289

  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  } else {
    [super displayLayer:layer];
  }

Bekerja untuk saya !!! 👍

Kami juga meningkatkan ke 0.63.3, dan menghadapi masalah ini di iOS 14.
Kami mengunduh file (gambar di antaranya) menggunakan paket RN-fetch-blob, dan memuat gambar lokal ini menggunakan komponen Gambar.

@krisbaum74

saya rasa tidak ada yang punya skrip pembuatan Microsoft App Center untuk memperbaikinya juga?

Gunakan react-native+0.63.0.patch

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink

 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

Bagaimana saya bisa menerapkan ini menggunakan paket tambalan? Pemula dengan menggunakan patch-package.

Hai!

1.- jalankan "npm i -g patch-package"
2.- Buat folder baru bernama patch
3.- Buat file baru bernama react-native+0.63.0.patch di dalam folder itu
4.- Tambahkan kode sumber di atas.
5.- jalankan "patch-package" di root proyek

Cukup ikuti perbaikan di atas dan buat file react-native+0.63.0.patch

setelah itu, Di appcenter-pre-build.sh Anda tambahkan

npm i -g patch-package
paket-patch

Ini akan menambahkan perbaikan di atas di build AppCenter Anda.

Saya memiliki ini di iOS dan menggunakan npx react-native-fix-image yang berfungsi dengan baik. Sekarang saya kecewa menemukan masalah tetap ada di Android!

Tidak disebutkan Android di sini - apakah saya satu-satunya?

Saya menggunakan "react-native": "0.61.5"

_const Gambar = Animatable.createAnimatableComponent(FastImage);_
Tidak bekerja dengan benar!

animasi={'bounceIn'} tidak berfungsi

"react-asli": "0.63.3"
"react-native-fast-image": "^8.3.4"
"react-native-animable": "^1.3.3"

Saya tahu ini dianggap sebagai tambalan untuk 0,63, tetapi saya dapat mengonfirmasi bahwa ini juga berfungsi pada 0,62. 👍

Itu masih tidak berfungsi pada IOS 14.2, Xcode 12.2, reaksi asli 0.63.4
Perbaikan yang disarankan tidak membantu
Memperbarui
0.63.4 - menampilkan gambar jarak jauh tanpa masalah dan tanpa tambalan apa pun, tetapi gambar lokal tidak berfungsi dengan atau tanpa tambalan

Saya memiliki proyek dengan react-native 0.63.3, tambalan tidak berfungsi untuk saya. Sebelum menerapkan tambalan, saya memverifikasi kelas RCTUIImageViewAnimated dan sudah berisi kode tambalan, ini diharapkan karena #29420 sudah digabungkan dalam 0.63.3 sesuai perubahan 0.63.2 CHANGELOG https://github.com/react-native- komunitas/rilis/gumpalan/master/CHANGELOG.md#v0632. Jadi tambalan tidak memperbaikinya, saya pikir itu valid di 0.62.2 tapi saya khawatir perubahan di 0.63.3 merusak pemuatan gambar _local_ lagi. Itu menjelaskan mengapa beberapa dev menurunkan versi ke <0.63.2 dan menerapkan tambalan dan gambarnya terlihat lagi. Saya lebih suka mendapatkan 0.63.2 yang berisi perbaikan. Bagaimanapun, saya ragu untuk menurunkan versi, ya bahkan untuk satu versi kembali karena saya tidak ingin terjebak di masa lalu ;-). Saya membuat solusi yang berhasil di pihak saya.

Berdasarkan fakta bahwa untuk _me_ gambar dimuat saat menggunakan URL _eksternal_ (RN 0.63.3).
Solusi saya,

• Saya mengikuti pola aset Hybrid, Anda bisa mendapatkan referensi di sini https://reactnative.dev/docs/images#images -from-hybrid-apps-resources
• Tambahkan gambar ke pustaka aset iOS/Android. Ini dapat dilakukan secara manual, dengan skrip, XCode,...
• Referensikan gambar dengan _local_ URI-nya alih-alih _react native convenience file system reference_, contoh iOS di bawah

<Image
  source={{ uri: 'app_icon' }}
  style={{ width: 40, height: 40 }}
/>

• Membuat fungsi utilitas untuk mendapatkan URI aset referensi iOS atau Android bergantung pada Platform. Harap baca dokumentasi (https://reactnative.dev/docs/images#images-from-hybrid-apps-resources) dan perhatikan perbedaan dalam pemformatan URI.
• Gambar mulai muncul di aplikasi iOS 14.2!! Saya menguji dengan aplikasi yang didistribusikan dari App Store dan instalasi Ad Hoc

Ini berfungsi (untuk saya) tetapi, kerugiannya,

• Cara referensi React Native terlalu nyaman untuk dikesampingkan, saya berharap masalah ini teratasi dan saya bisa kembali normal.
• Menjaga potensi tiga folder aset tetap sinkron... ya itu dengan skrip tetapi pengembang akan dengan mudah lupa dan dalam beberapa bulan dari sekarang seseorang akan menghabiskan 2 hari mencari tahu mengapa gambar tidak muncul untuk menemukan bahwa skrip sudah kedaluwarsa atau apa yang dapat Anda pikirkan.
• Gambar hilang dari simulator saya, saya akan mencari untuk menambahkan persyaratan untuk memuat gambar dari folder aset asli reaksi jika dijalankan dari simulator. Lib ini dapat membantu https://github.com/react-native-device-info/react-native-device-info (Saya belum mencoba).
  Saya berharap seseorang dapat mengambil manfaat dari solusi ini.

@RutsSantos tepat ini juga bekerja untuk saya!

1. npm install --save react-native-fix-image
2. npx reaksi-asli-perbaiki-gambar
3. membangun kembali proyek

bekerja untuk saya

Tidak bekerja untuk RN 0.61

Saya menggunakan RN 0.61 dan solusi apa pun tidak berfungsi untuk saya. Pls, punya solusi lain?

Saya menggunakan RN 0.61 dan solusi apa pun tidak berfungsi untuk saya. Pls, punya solusi lain?

https://www.npmjs.com/package/react-native-fix-image

Perpustakaan saya ini, masih berfungsi dengan baik dengan RN 0.61

Saya menggunakan RN 0.61 dan solusi apa pun tidak berfungsi untuk saya. Pls, punya solusi lain?

https://www.npmjs.com/package/react-native-fix-image

Perpustakaan saya ini, masih berfungsi dengan baik dengan RN 0.61

Hai Huy, saya mencoba langkah demi langkah seperti panduan di atas, itu menunjukkan perbaikan gambar Selesai. Namun gambar tersebut tetap tidak ditampilkan di ios 14. Versi ios lainnya masih menampilkan gambar secara normal.
Saya menggunakan RN 0.61 dan ios 14.