Ich stehe vor den gleichen Problemen

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

Ich bin jedoch auf Xcode-Beta und iOS 14

Ich habe das gleiche Problem!

gleicher Fehler...

gleicher Fehler...

Ok, ich habe festgestellt, dass das Problem mit Bildern nur auftritt, wenn der Build mit Xcode 12 Beta erstellt wird. Wenn ich einen Build mit Xcode 11.5 unter Verwendung von iOS 14.0 Beta Device Support von hier erstelle, funktionieren Bilder einwandfrei.

Dies ist ein doppeltes Problem – https://github.com/facebook/react-native/issues/29215

Verwenden Sie 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

Verwenden Sie 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

Wie kann ich dies bitte mit dem Patch-Paket anwenden? Anfänger mit der Verwendung des Patch-Pakets.

Verwenden Sie 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

Wie kann ich dies bitte mit dem Patch-Paket anwenden? Anfänger mit der Verwendung des Patch-Pakets.

Hallo!

1.- Führen Sie "npm i -g patch-package" aus
2.- Erstellen Sie einen neuen Ordner namens Patches
3.- Erstellen Sie eine neue Datei mit dem Namen „react-native+0.63.0.patch“ in diesem Ordner
4.- Fügen Sie den obigen Quellcode hinzu.
5.- Führen Sie "patch-package" im Stammverzeichnis des Projekts aus

Verwenden Sie 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

Wie kann ich dies bitte mit dem Patch-Paket anwenden? Anfänger mit der Verwendung des Patch-Pakets.

Hallo!

1.- Führen Sie "npm i -g patch-package" aus
2.- Erstellen Sie einen neuen Ordner namens Patches
3.- Erstellen Sie eine neue Datei mit dem Namen „react-native+0.63.0.patch“ in diesem Ordner
4.- Fügen Sie den obigen Quellcode hinzu.
5.- Führen Sie "patch-package" im Stammverzeichnis des Projekts aus

Hat super funktioniert danke.

Es kann das Bild nach dem Hinzufügen [super displayLayer:layer]; anzeigen, wenn _currentFrame nil ist

Wenn ich das richtig verstehe, sollte _currentFrame für animierte Bilder sein. Wenn es also ein Standbild ist, können wir die UIImage-Implementierung verwenden, um das Rendern von Bildern zu handhaben, nicht sicher, ob es sich um eine korrekte Lösung handelt.

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

Dasselbe Problem mit React Native 0.62.x. Gibt es eine Chance, dass der Fix paketportiert werden kann? RN 0.63.x ist immer noch extrem verbuggt und wir können nicht upgraden.

Dasselbe Problem mit React Native 0.62.x. Gibt es eine Chance, dass der Fix paketportiert werden kann? RN 0.63.x ist immer noch extrem verbuggt und wir können nicht upgraden.

Denken Sie, es ist das Beste, vorerst einen Fork zu verwenden oder ein Patch-Paket anzuwenden.

Ich konnte das Problem beheben, indem ich den vorgeschlagenen Patch anwendete. Ich bestätige, dass das mit früheren RN-Versionen gut funktioniert:

RN: 0.62.2
Xcode: 12.0
iOS-Simulator: 14

Um eine Klarstellung hinzuzufügen (für andere Neulinge bei patch-package wie mich), muss der Ordner "Patches" auf der Projektstammebene abgelegt werden.

Die Patch-Bibliothek nur dafür zu verwenden, scheint übertrieben zu sein. Wäre es zu schwierig, es als kleinen Patch zu 0.62.2 hinzuzufügen (vielleicht zu 0.62.3 machen?). Es sind wirklich 3 Zeilen Code.

So wie es jetzt ist, hat 0.63.x einige große Fehler und sieht so aus, als würden sie nicht so schnell behoben werden (0.64.x steht vor der Tür), also bleiben wir auf absehbare Zeit bei 0.62 hängen.

Die Patch-Bibliothek nur dafür zu verwenden, scheint übertrieben zu sein.

Patch-Paket nicht verwenden ...

Sie möchten kein Patch-Paket verwenden, Sie möchten Ihre App nicht auf die neueste Version aktualisieren, aber warum „zwingen“ Sie Entwickler, eine ganze Roadmap zu ignorieren?
Warum willst du nicht etwas tun, sondern die Leute dazu bringen, das zu tun, was du willst?

Hier hat der Patch einwandfrei funktioniert. 0.62.2

Dasselbe Problem mit React Native 0.62.x. Gibt es eine Chance, dass der Fix paketportiert werden kann? RN 0.63.x ist immer noch extrem verbuggt und wir können nicht upgraden.

Hey Mann, füge das einfach zu deinem Patch-Ordner unter „ react-native+0.62.2.patch“ hinzu

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

und führen Sie npx patch-package aus

Dies ist der Patch für 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];
   }
 }

Sie könnten Ihre Image-Komponenten jederzeit durch FastImage ersetzen. Auf diese Weise müssen Sie nichts patchen. Bilder laden auch besser.

Jeder, der den patch-package -Fix verwendet und CI/CD-Setup hat, denkt daran, "postinstall": "patch-package" in package.json hinzuzufügen

Sie könnten Ihre Image-Komponenten jederzeit durch FastImage ersetzen. Auf diese Weise müssen Sie nichts patchen. Bilder laden auch besser.

FastImage ist keine gepflegte Bibliothek mit vielen Fehlern.

Warum denkst du, dass es besser ist?

FastImage funktioniert. Sie können es verwenden

@johnlim5847 Wo soll "postinstall": "patch-package" diese Zeile in package.json hinzugefügt werden?

Dieser Fehler wird beim Ausführen angezeigt: npx patch-package
Anwenden von Patches...
Fehler: Patch-Datei für das Paket „react-native“ gefunden, das unter node_modules/react-native nicht vorhanden ist

@shrimallamanoj sollten Sie zuerst zu https://github.com/ds300/patch-package gehen

Ja ... danke, ich habe Schritt befolgt und der Patch wurde erfolgreich angewendet und es tritt kein Problem auf, wenn npx ausgeführt wird, aber es scheint eine Lösung zu sein, die bei mir nicht funktioniert ... schlecht ... eine andere Lösung?

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

Leute, dieser Patch funktioniert auch auf React native 0.61.5. Ich verwende die gleiche Problemumgehung.

1.- Führen Sie "Yarn Add Patch-Package" aus
2.- Erstellen Sie einen neuen Ordner namens Patches im Stammverzeichnis des Projekts.
3.- Erstellen Sie eine neue Datei mit dem Namen „react-native+0.61.5.patch“ in diesem Ordner
4.- Fügen Sie den obigen Quellcode hinzu.
5.- Führen Sie "yarn patch-package" im Stammverzeichnis des Projekts aus oder fügen Sie dies in ein Post-Installationsskript ein

Ich folge diesem Link , um das Problem mit Bildern in IOS14 zu beheben.

• sauberer Build in Xcode (CMD + Shift + K)
• Cache mit npx respond-native start --reset-cache zurücksetzen
• Bauen mit XCode, und alles funktioniert wieder einwandfrei
  Ich verwende React native 0.62.2
  GL an alle.

keine Fixierung, sondern eine Beobachtung, wenn Sie sich daran haltenInnerhalbes zeigt das Bild.

Ich sehe den gleichen Fehler, aber nur während des Entwicklungsprozesses. Dies geschah, nachdem ich mein Telefon und das xcode-Programm aktualisiert hatte. (ios14, xcode12) Das Seltsame ist, dass ich die statischen Bilder nicht sehen kann, wenn ich meine Anwendung vom Markt herunterlade. Ich kann die Bilder sehen, wenn ich es von einem anderen Telefon aus versuche. Meine Entwicklungsumgebung war nach dem Update komplett ruiniert.

Durch manuelles Bearbeiten der Datei RCTUIImageViewAnimated.m , wie @tomcheung oben vorschlägt, wird das Problem in Version 0.61.5 behoben. Danke!

Vorschläge: Nicht auf 0.63 upgraden, nur patchen. Ich habe versucht, ein Upgrade durchzuführen, der Build ist aufgrund von firebase , code-push fehlgeschlagen.

Kann dieses Problem immer noch auftreten, kann jemand sagen, ob der Patch derzeit die beste Lösung für das Problem ist?

Gibt es einen Patch für 0.61.2?

Gibt es einen Patch für 0.61.2?

Für mich. Es ist gelöst.

0.62.2 ist es behoben. aber das eigentliche Gerät ist ausgefallen....
Gibt es eine Lösung?

https://github.com/huylvdev/react-native-fix-image es funktioniert für mich

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

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

bei mir funktioniert es, danke

Für mich. Es ist gelöst.

Entschuldigung, ich verstehe nicht, was meinst du? Welchen Patch hast du angewendet?

Die Lösung, die für mich funktioniert hat, wurde nur vorübergehend behoben, da Sie sie in Knotenmodulen beheben müssen. Gibt es eine andere Möglichkeit, dies in Zukunft zu verhindern?

Für React-native Version < 0,63
Bitte verwenden Sie „ react-native-fast-image “ anstelle von „ReactNative Image“.
Um React-Native-Fast-Image zu verwenden, deaktivieren Sie bitte den Fallback von React-Native-Fast-Image
Es funktioniert auf IOS 14!

Für mich. Es ist gelöst.

Entschuldigung, ich verstehe nicht, was meinst du? Welchen Patch hast du angewendet?

@EmmanueleVilla Wenden Sie diesen Patch an https://github.com/facebook/react-native/issues/29279#issuecomment -658244428 und verwenden Sie dann das Patch-Paket , um ihn beizubehalten :)

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

Leute, dieser Patch funktioniert auch auf React native 0.61.5. Ich verwende die gleiche Problemumgehung.

1.- Führen Sie "Yarn Add Patch-Package" aus
2.- Erstellen Sie einen neuen Ordner namens Patches im Stammverzeichnis des Projekts.
3.- Erstellen Sie eine neue Datei mit dem Namen „react-native+0.61.5.patch“ in diesem Ordner
4.- Fügen Sie den obigen Quellcode hinzu.
5.- Führen Sie "yarn patch-package" im Stammverzeichnis des Projekts aus oder fügen Sie dies in ein Post-Installationsskript ein

Ich verwende auch 61.5, das hat bei mir funktioniert! Ich vermute, wenn Sie eine andere Version als 61.5 haben, benennen Sie einfach die Patch-Datei um, um Ihre Version zu verwenden, und wenn Sie yarn patch-package ausführen, wird der Patch angewendet, da er erkennt, dass Ihre React-native Version übereinstimmt.

zB für Version 61.2 nennen Sie Ihre Patch-Datei 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>

Dies funktioniert für mich auf v0.61.4 , obwohl es einen viel einfacheren Weg gibt, die Patch-Datei zu generieren.

tl;dr Befolgen Sie die Anweisungen auf https://github.com/ds300/patch-package selbst.

Hier sind die detaillierten Anweisungen:
Dies ist der Fix, der am React Native-Quellcode v0.63.2 vorgenommen wurde: 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"
 }

Hoffe das hilft!

Verwenden Sie 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

Wie kann ich dies bitte mit dem Patch-Paket anwenden? Anfänger mit der Verwendung des Patch-Pakets.

Hallo!

1.- Führen Sie "npm i -g patch-package" aus
2.- Erstellen Sie einen neuen Ordner namens Patches
3.- Erstellen Sie eine neue Datei mit dem Namen „react-native+0.63.0.patch“ in diesem Ordner
4.- Fügen Sie den obigen Quellcode hinzu.
5.- Führen Sie "patch-package" im Stammverzeichnis des Projekts aus

Ich habe dieses Problem bei der Verwendung von RN v0.61.2, aber das hat immer noch für mich funktioniert. Danke

Für React-native Version < 0,63
Bitte verwenden Sie „ react-native-fast-image “ anstelle von „ReactNative Image“.
Um React-Native-Fast-Image zu verwenden, deaktivieren Sie bitte den Fallback von React-Native-Fast-Image
Es funktioniert auf IOS 14!

Bei mir hat es funktioniert!

Garn-Patch-Paket

Für mich. Es ist gelöst.

Entschuldigung, ich verstehe nicht, was meinst du? Welchen Patch hast du angewendet?

@EmmanueleVilla Wenden Sie diesen Patch #29279 (Kommentar) an und verwenden Sie dann das Patch-Paket , um ihn zu behalten :)

Du bist der Mann @jkim430 Danke

Alle Lösungen auf 0.61.4 ausprobiert, die Remote-Bilder werden gut geladen, aber die lokalen Assets werden nicht nur angezeigt.

Irgendwelche Ideen?

Danke xcode..

Es kann das Bild nach dem Hinzufügen [super displayLayer:layer]; anzeigen, wenn _currentFrame nil ist

Wenn ich das richtig verstehe, sollte _currentFrame für animierte Bilder sein. Wenn es also ein Standbild ist, können wir die UIImage-Implementierung verwenden, um das Rendern von Bildern zu handhaben, nicht sicher, ob es sich um eine korrekte Lösung handelt.

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

Es hat für mich funktioniert. Danke! Außerdem können Sie npx patch-package (weitere Informationen hier ) verwenden, um diese Änderung beizubehalten, und müssen nicht ständig alle neu installierten node_modules reparieren.

Das sind die Arten von Fehlern, die mich dazu bringen, ein anderes Geschäft zu eröffnen und aufzuhören, Programmierer zu sein.

https://github.com/huylvdev/react-native-fix-image es funktioniert für mich

Vielen, vielen Dank Nachdem ich einen Tag damit verbracht hatte, wurde ich endlich durch diese Hilfe repariert

Ich kann bestätigen, dass dieser Patch auch auf Version 0.63.2 angewendet werden kann. Benennen Sie die Datei in (react-native+0.62.2.patch) um.

Bitte öffnen Sie dieses Problem erneut,
Damit ist das Problem noch nicht gelöst.

https://github.com/huylvdev/react-native-fix-image es funktioniert für mich

Vielen, vielen Dank Nachdem ich einen Tag damit verbracht hatte, wurde ich endlich durch diese Hilfe repariert

Hey, ich habe versucht, react-native-fix-image zu verwenden, es hat funktioniert, wenn ich es tue
npx react-native-fix-image aber wenn ich die node_modules entferne und neu installiere.
Die App lädt die Bilder nicht.
Hatten Sie ein solches Problem und müssen wir den npx-Befehl jedes Mal ausführen, um die Bilder zu rendern?

Bitte schön
https://github.com/facebook/react-native/issues/29279#issuecomment -658244428

https://github.com/huylvdev/react-native-fix-image es funktioniert für mich

Vielen, vielen Dank Nachdem ich einen Tag damit verbracht hatte, wurde ich endlich durch diese Hilfe repariert

Das ist Arbeit für mich! Danke!!

Im Release-Modus funktioniert es bei mir nicht, hast du eine Idee?

@tomcheung vielen Dank!
Ich habe mir 2 Tage lang den Kopf zerbrochen, um herauszufinden, was das Problem ist ...

Für ältere Versionen von React Native (z. B. 0.60.6) ist der Patch nicht möglich, da die Datei RCTUIImageViewAnimated.m nicht existiert. Ich habe dieses Problem gelöst, indem ich React Native Fast Image v8.1.5 verwendet und den SDWebImage-Pod mit pod update SDWebImage aktualisiert habe. Genauer gesagt habe ich SDWebImage von v5.8.1 auf v5.9.2 aktualisiert.

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

Bilder werden in der Release-Version nicht angezeigt. (ausgestoßenes Expo 39-Projekt) RN 0.63.3
Update: Das Aktualisieren von metro.config.js hat mein Problem behoben => https://forums.expo.io/t/assets-missing-only-in-ios-release-build-after-ejecting/42759

Wird dies bei jeder RN-Veröffentlichung offiziell behoben? Afaik, das Problem ist immer noch da.

Wird dies bei jeder RN-Veröffentlichung offiziell behoben? Afaik, das Problem ist immer noch da.

+1. Hin und wieder habe ich ein altes Projekt und muss es patchen.

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.mb/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 (_aktuellerRahmen) {
    
    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
    
    neuer Dateimodus 100644
    
    Index 0000000..361f5fb
    
    --- /dev/null
    
    +++ b/node_modules/react-native/scripts/.packager.env
    
    @@ -0,0 +1 @@
    
    + RCT_METRO_PORT=8081 exportieren
  
  

Danke! Dies funktionierte für mich bei meinen alten RN-Projekten.
Ersetzen Sie einfach die React Native-Version Ihres alten Projekts anstelle von 0.63, bevor Sie die Datei von react-native+0.63.0.patch erstellen.

Ich habe ein Video erstellt und hoffe, dass dies jemandem helfen wird.

Der Fix von @AsbarAli hat bei mir funktioniert, RN-Version: 0.61.5.

Es kann das Bild nach dem Hinzufügen [super displayLayer:layer]; anzeigen, wenn _currentFrame nil ist
Wenn ich das richtig verstehe, sollte _currentFrame für animierte Bilder sein. Wenn es also ein Standbild ist, können wir die UIImage-Implementierung verwenden, um das Rendern von Bildern zu handhaben, nicht sicher, ob es sich um eine korrekte Lösung handelt.
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];
  }

Es hat für mich funktioniert. Danke! Außerdem können Sie npx patch-package (weitere Informationen hier ) verwenden, um diese Änderung beizubehalten, und müssen nicht ständig alle neu installierten node_modules reparieren.

Das sind die Arten von Fehlern, die mich dazu bringen, ein anderes Geschäft zu eröffnen und aufzuhören, Programmierer zu sein.

Es ist wichtig, dass Sie npx patch-package react-native ausführen, damit der Patch angewendet wird.

Hey zusammen, könnte jemand bestätigen, dass dies mit dem Kern zusammengeführt wurde?

Während das Patch-Paket eine Lösung ist, sollte es keine dauerhafte Lösung sein.

Ich werde das offen lassen, bis ich nachforschen kann.

Planen sie nicht, dies zu beheben?

https://www.npmjs.com/package/react-native-fix-image
für mich arbeiten

Es sieht so aus, als wäre es behoben. Es wird nur nicht auf frühere Versionen zurückportiert. Ich glaube, der Fix ist in 63.3

Der Fix von @AsbarAli hat bei mir funktioniert, RN-Version: 0.61.5.

Wie hast du es gemacht? Ich verwende RN 61.2

Verwenden Sie 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

Wie kann ich dies bitte mit dem Patch-Paket anwenden? Anfänger mit der Verwendung des Patch-Pakets.

Hallo!
1.- Führen Sie "npm i -g patch-package" aus
2.- Erstellen Sie einen neuen Ordner namens Patches
3.- Erstellen Sie eine neue Datei mit dem Namen „react-native+0.63.0.patch“ in diesem Ordner
4.- Fügen Sie den obigen Quellcode hinzu.
5.- Führen Sie "patch-package" im Stammverzeichnis des Projekts aus

Ich habe dieses Problem bei der Verwendung von RN v0.61.2, aber das hat immer noch für mich funktioniert. Danke

Hallo. Kannst du mir helfen? Ich habe auch RN 61.2, aber es funktioniert überhaupt nicht. Mai werden keine unteren Navigationsbilder angezeigt

Hey @rjtubera , der Patch soll mit 0.63 funktionieren, funktioniert aber Berichten zufolge auch mit der Version 0.61.5 von React Native. Wenn Sie versuchen, von React Native 0.61.2 auf 0.61.5 zu aktualisieren und die von Ihnen zitierten Schritte erneut anwenden, funktioniert es möglicherweise.

Wenn das nicht funktioniert, versuchen Sie ein Upgrade auf 0.63 und machen Sie dasselbe. Seien Sie jedoch vorsichtig, da einige Ihrer Komponenten brechen könnten. Sie sollten jede Komponente nach dem Upgrade testen, um sicherzustellen, dass alles noch gut funktioniert (auf iOS und Android).

Ich stoße auf dieses Problem, ich habe es behoben, indem ich die Schritte unter diesem Link befolgte
https://github.com/facebook/react-native/pull/29420#issuecomment -707435412

Danke Alabi, ich habe das Problem auch gelöst, indem ich React Native gepatcht habe. Funktioniert jetzt soweit gut 😊

Von: Alabi Temitope Wahab [email protected]
Antwort an: facebook/react-native [email protected]
Datum: Dienstag, 13. Oktober 2020 um 03:56 Uhr
An: facebook/react-native [email protected]
Cc: Kieran Desmond [email protected] , Kommentar [email protected]
Betreff: Re: [facebook/react-native] Bild kann Bild in iOS 14 nicht anzeigen (#29279)

Ich stoße auf dieses Problem, ich habe es behoben, indem ich die Schritte unter diesem Link befolgte

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

—
Sie erhalten dies, weil Sie kommentiert haben.
Antworten Sie direkt auf diese E-Mail, sehen Sie sie auf GitHub https://github.com/facebook/react-native/issues/29279#issuecomment-707436028 an oder melden Sie sich ab https://github.com/notifications/unsubscribe-auth/AIENJUWD2RES5AC52CT4MG3SKOXURANCNFSM4ORGDXZA .

Ich habe ein Upgrade auf Version 0.63 von React Native durchgeführt, aber ich stehe vor demselben Problem. Kann mir jemand helfen?

Für ältere Versionen von React Native (z. B. 0.60.6) ist der Patch nicht möglich, da die Datei RCTUIImageViewAnimated.m nicht existiert. Ich habe dieses Problem gelöst, indem ich React Native Fast Image v8.1.5 verwendet und den SDWebImage-Pod mit pod update SDWebImage aktualisiert habe. Genauer gesagt habe ich SDWebImage von v5.8.1 auf v5.9.2 aktualisiert.

Quelle: DylanVann/react-native-fast-image#702 (Kommentar)

Funktioniert perfekt.

Version 8.3.2 von „react-native-fast-image“ enthält sogar die aktualisierte Version von SDWebImage, sodass pod update nicht nötig ist!

https://www.npmjs.com/package/react-native-fix-image
für mich arbeiten

Hat bei mir auch funktioniert. 👍

Das Upgrade von React-Native 0.63.1 auf 0.63.2 hat bei uns funktioniert.

Ich habe das gleiche Problem auf RN 0.62.2 auf Xcode 12.0.1. und ios 14 . Irgendeine Lösungsmöglichkeit?

Ich habe das gleiche Problem auf RN 0.62.2 auf Xcode 12.0.1. und ios 14 . Irgendeine Lösungsmöglichkeit?

@ghasemikasra39 Ich hatte das gleiche Problem mit Ihren gleichen Versionen. Die Installation von „ react-native-fix-image “ hat bei mir funktioniert.

@RutsSantos direkt darauf hat auch bei mir funktioniert!

1) npm install --save React-native-fix-image
2) npx reagieren-natives-fix-image
3) Umbauprojekt

Das Upgrade von React-Native 0.63.1 auf 0.63.2 hat bei uns funktioniert.

Das hat bei mir funktioniert.

Das hat bei mir funktioniert. Danke @JordanRosas

@JordanRosas Hat bei mir auch wunderbar funktioniert, danke

Upgrade der nativen React-Version von 0.62.2 auf 0.63.3, keine Notwendigkeit mehr, npm-Module zu patchen oder zu installieren

0.62.3 existiert nicht:

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

korrigiert

Einige von uns können kein Upgrade durchführen, bis dieser kritische RN-Fehler behoben ist: https://github.com/facebook/react-native/issues/29451

Also stecken wir entweder beim Affen-Patching von 0.62.x oder einer fehlerhaften 0.63.x-Version fest.

Es kann das Bild nach dem Hinzufügen [super displayLayer:layer]; anzeigen, wenn _currentFrame nil ist

Wenn ich das richtig verstehe, sollte _currentFrame für animierte Bilder sein. Wenn es also ein Standbild ist, können wir die UIImage-Implementierung verwenden, um das Rendern von Bildern zu handhaben, nicht sicher, ob es sich um eine korrekte Lösung handelt.

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

Es klappt. Danke!

Wenn Sie keine Pakete installieren oder node_modules direkt bearbeiten möchten, können Sie versuchen, einen preinstall -Stage-Hook in der Poddatei hinzuzufügen, wie in https://stackoverflow.com/a/64495360/7477198 this hat bei mir funktioniert. Das ist git-freundlicher.

Für mich werden selbst auf RN 63.3 keine Bilder auf einem physischen Gerät angezeigt. Als Problemumgehung habe ich die Bilder hier in Base 64 codiert: https://www.base64-image.de/ und das dann als source für die Komponente Image anstelle von require('imagePath') verwendet

Es kann das Bild nach dem Hinzufügen [super displayLayer:layer]; anzeigen, wenn _currentFrame nil ist

Wenn ich das richtig verstehe, sollte _currentFrame für animierte Bilder sein. Wenn es also ein Standbild ist, können wir die UIImage-Implementierung verwenden, um das Rendern von Bildern zu handhaben, nicht sicher, ob es sich um eine korrekte Lösung handelt.

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

Du bist ein genialer Mann, du hast mein Leben gerettet!

Verwenden Sie 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

Wie kann ich dies bitte mit dem Patch-Paket anwenden? Anfänger mit der Verwendung des Patch-Pakets.

Hallo!

1.- Führen Sie "npm i -g patch-package" aus
2.- Erstellen Sie einen neuen Ordner namens Patches
3.- Erstellen Sie eine neue Datei mit dem Namen „react-native+0.63.0.patch“ in diesem Ordner
4.- Fügen Sie den obigen Quellcode hinzu.
5.- Führen Sie "patch-package" im Stammverzeichnis des Projekts aus

Danke
funktionierte für mich gut auf RN 0.61.5
Ich habe eine Patch-Datei namens react-native+0.61.5.patch hinzugefügt

auch ein Fix für DylanVann/react-native-fast-image
cd ios && pod update SDWebImage

Verwenden Sie 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 Danke für die Lösung! Ist der RCT_METRO_PORT hier erforderlich oder etwas Spezifisches für Ihr Projekt?

RN 0.59.0 auf Xcode 12.0.1. und ios 14. Gibt es eine Lösung?

RN 0.59.0 auf Xcode 12.0.1. und ios 14. Gibt es eine Lösung?

3 Lösungen:

1. Beheben Sie das Problem manuell in node_modules
2. Verwenden Sie diese Fixbibliothek https://www.npmjs.com/package/react-native-fix-image
3. Update auf React Native 0.63.3

Ich kann bestätigen, dass dies immer noch in --configuration=Release existiert, sogar auf "react-native": "0.63.3" . Funktioniert jedoch gut in --configuration=Debug .

https://www.npmjs.com/package/react-native-fix-image hilft nicht, sondern unterbricht den Build
Release-Konfiguration mit diesem Fehler:

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

Auch Benutzer meiner App erleben kein Laden von Bildern (von der URL) auf iOS, aber es tritt nicht bei allen auf, nur bei einigen Leuten. Bitte beheben Sie dies. Ich verwende React Native 0.63.3.
https://i.ibb.co/1vDc6kv/1.jpg <- Link zum Bild, das dieses Problem zeigt

@douglasjunior funktioniert gut! vielen Dank!

@RutsSantos direkt darauf hat auch bei mir funktioniert!

1. npm install --save React-native-fix-image
2. npx reagieren-natives-fix-image
3. Projekt umbauen

hat bei mir funktioniert 🎉🎉🎉🎉🎉

RN 0.59.0 auf Xcode 12.0.1. und ios 14. Gibt es eine Lösung?

3 Lösungen:

1. Beheben Sie das Problem manuell in node_modules
2. Verwenden Sie diese Fixbibliothek https://www.npmjs.com/package/react-native-fix-image
3. Update auf React Native 0.63.3

ein weiteres Q, ich verwende .1 manuell innerhalb von node_modules ， es funktioniert gut in show image from network , aber ich kann kein lokales Bild anzeigen,

Auch Benutzer meiner App erleben kein Laden von Bildern (von der URL) auf iOS, aber es tritt nicht bei allen auf, nur bei einigen Leuten. Bitte beheben Sie dies. Ich verwende React Native 0.63.3.
https://i.ibb.co/1vDc6kv/1.jpg <- Link zum Bild, das dieses Problem zeigt

Ich finde ein Problem, das mir aufgefallen ist. WebP wurde in iOS 13 nicht unterstützt, daher musste ich das „react-native-fast-image“ mit dem SDWebImageWebPCoder-Pod installieren.

Ich nehme nicht an, dass jemand ein Microsoft App Center-Build-Skript hat, um dies ebenfalls zu beheben?

FYI, ich konnte dies auch mit FastImage überwinden, das nach dem Upgrade von SDWebImage https://github.com/DylanVann/react-native-fast-image/issues/730 behoben wurde (ich kann derzeit nicht auf 0.63 upgraden, da es kaputt geht andere Arbeit, ich werde irgendwann auf die neueste Version umsteigen)

In meinem Fall hatte ich animierte Bilder von einfachem RN, aber ich konnte FastImage auch für diese verwenden

const AnimatedImage = Animated.createAnimatedComponent(FastImage)

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

Alternativ sollte das Fix-Image-Paket funktionieren, wenn es auf Appcenter (@krisbaum74) nicht funktioniert, sollten Sie in der Lage sein, dasselbe zu tun, indem Sie appcenter-pre-build.sh im Stammverzeichnis des Repos erstellen und das Skript mit dem Fix hinzufügen dort

Ich verwende React-Native 0.63.3 und habe immer noch dieses Problem unter iOS 14.1. Dies wird in dieser Version bereits angewendet. Irgendwelche Ideen, wie man es beheben kann?

Ich verwende React-Native 0.63.3 und habe immer noch dieses Problem unter iOS 14.1. Dies wird in dieser Version bereits angewendet. Irgendwelche Ideen, wie man es beheben kann?

Wenn Sie auf 0.63.3 aktualisieren, treten möglicherweise Probleme in diesem Code auf. Versuchen Sie es mit dieser Fix-Bibliothek https://www.npmjs.com/package/react-native-fix-image

Ich verwende React-Native 0.63.3 und habe immer noch dieses Problem unter iOS 14.1. Dies wird in dieser Version bereits angewendet. Irgendwelche Ideen, wie man es beheben kann?

Wenn Sie auf 0.63.3 aktualisieren, treten möglicherweise Probleme in diesem Code auf. Versuchen Sie es mit dieser Fix-Bibliothek https://www.npmjs.com/package/react-native-fix-image

Ich habe bereits auf 0.63.3 aktualisiert und diese Bibliothek löst das Problem nicht (Bilder werden auf dem Simulator geladen, aber nicht auf dem physischen Gerät.

Ich verwende React-Native 0.63.3 und habe immer noch dieses Problem unter iOS 14.1. Dies wird in dieser Version bereits angewendet. Irgendwelche Ideen, wie man es beheben kann?

Wenn Sie auf 0.63.3 aktualisieren, treten möglicherweise Probleme in diesem Code auf. Versuchen Sie es mit dieser Fix-Bibliothek https://www.npmjs.com/package/react-native-fix-image

Ich habe bereits auf 0.63.3 aktualisiert und diese Bibliothek löst das Problem nicht (Bilder werden auf dem Simulator geladen, aber nicht auf dem physischen Gerät.

Mein Problem bezog sich auf das Kopieren der Assets für den Produktions-Build, es gab eine schlechte Verknüpfung, wie hier erklärt, dann generieren Sie das Bundle neu und versuchen Sie es erneut

Verwenden Sie 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

Wie kann ich dies bitte mit dem Patch-Paket anwenden? Anfänger mit der Verwendung des Patch-Pakets.

Hallo!

1.- Führen Sie "npm i -g patch-package" aus
2.- Erstellen Sie einen neuen Ordner namens Patches
3.- Erstellen Sie eine neue Datei mit dem Namen „react-native+0.63.0.patch“ in diesem Ordner
4.- Fügen Sie den obigen Quellcode hinzu.
5.- Führen Sie "patch-package" im Stammverzeichnis des Projekts aus

Ich danke dir sehr!!!! Du hast buchstäblich meinen Tag gerettet 🙏 ❤️

Es kann das Bild nach dem Hinzufügen [super displayLayer:layer]; anzeigen, wenn _currentFrame nil ist

Wenn ich das richtig verstehe, sollte _currentFrame für animierte Bilder sein. Wenn es also ein Standbild ist, können wir die UIImage-Implementierung verwenden, um das Rendern von Bildern zu handhaben, nicht sicher, ob es sich um eine korrekte Lösung handelt.

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

Hat bei mir funktioniert!!! 👍

Wir haben auch auf 0.63.3 aktualisiert und sind mit diesem Problem auf iOS 14 konfrontiert.
Wir laden Dateien (darunter Bilder) mit dem Paket RN-fetch-blob herunter und laden diese lokalen Bilder mit der Image-Komponente.

@krisbaum74

Ich nehme nicht an, dass jemand ein Microsoft App Center-Build-Skript hat, um dies ebenfalls zu beheben?

Verwenden Sie 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

Wie kann ich dies bitte mit dem Patch-Paket anwenden? Anfänger mit der Verwendung des Patch-Pakets.

Hallo!

1.- Führen Sie "npm i -g patch-package" aus
2.- Erstellen Sie einen neuen Ordner namens Patches
3.- Erstellen Sie eine neue Datei mit dem Namen „react-native+0.63.0.patch“ in diesem Ordner
4.- Fügen Sie den obigen Quellcode hinzu.
5.- Führen Sie "patch-package" im Stammverzeichnis des Projekts aus

Folgen Sie einfach dem obigen Fix und erstellen Sie eine Datei „react-native+0.63.0.patch“.

Danach fügen Sie in Ihrer appcenter-pre-build.sh hinzu

npm i -g Patch-Paket
Patch-Paket

Dadurch wird der obige Fix in Ihrem AppCenter-Build hinzugefügt.

Ich hatte dies auf iOS und habe npx respond-native-fix-image verwendet, was großartig funktioniert hat. Jetzt bin ich bestürzt, dass das Problem auf Android weiterhin besteht!

Keine Erwähnung von Android hier - bin ich der einzige?

Ich rocke "react-native": "0.61.5"

_const Image = Animatable.createAnimatableComponent(FastImage);_
Arbeitet nicht richtig!

animation={'bounceIn'} funktioniert nicht

"react-native": "0.63.3"
"natives-schnelles-Bild-reagieren": "^8.3.4"
"react-native-animable": "^1.3.3"

Ich weiß, dass dies als Patch für 0.63 angesehen wird, aber ich kann bestätigen, dass dies auch für 0.62 funktioniert. 👍

Es funktioniert immer noch nicht unter IOS 14.2, Xcode 12.2, React-native 0.63.4
Jede vorgeschlagene Lösung hilft nicht
Aktualisieren
0.63.4 - zeigt Remote-Images problemlos und ohne Patch, aber lokale Images funktionieren weder mit noch ohne Patch

Ich habe ein Projekt mit React-Native 0.63.3, der Patch funktioniert bei mir nicht. Vor dem Anwenden des Patches habe ich die Klasse RCTUIImageViewAnimated verifiziert und sie enthält bereits den Patchcode, dies wird erwartet, da #29420 bereits in 0.63.3 per Änderung 0.63.2 eingebunden ist CHANGELOG https://github.com/react-native- community/releases/blob/master/CHANGELOG.md#v0632. Der Patch wird es also nicht beheben, ich denke, er war in 0.62.2 gültig, aber ich fürchte, dass Änderungen in 0.63.3 das erneute Laden der _lokalen_ Bilder unterbrachen. Das erklärt, warum einige Entwickler auf <0.63.2 heruntergestuft und den Patch angewendet haben und die Bilder wieder sichtbar wurden. Ich würde lieber nur die 0.63.2 bekommen, die den Fix enthält. Auf jeden Fall zögere ich mit einem Downgrade, ja sogar um eine Version zurück, da ich nicht in der Vergangenheit stecken bleiben möchte ;-). Ich habe eine Problemumgehung erstellt, die an meinem Ende funktioniert.

Basierend auf der Tatsache, dass für _me_ Bilder geladen werden, wenn eine _externe_ URL verwendet wird (RN 0.63.3).
Meine Problemumgehung,

• Ich folge dem Hybrid-Asset-Muster, Sie können die Referenz hier abrufen https://reactnative.dev/docs/images#images -from-hybrid-apps-resources
• Fügen Sie die Bilder der iOS-/Android-Asset-Bibliothek hinzu. Dies kann entweder manuell, per Skript, XCode, ... erfolgen.
• Verweisen Sie auf das Bild mit seinem _lokalen_ URI anstelle der _React Native Convenience File System Reference_, iOS-Beispiel unten

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

• Erstellung einer Utility-Funktion zum Abrufen von iOS- oder Android-Referenz-Asset-URIs je nach Plattform. Bitte lesen Sie die Dokumentation (https://reactnative.dev/docs/images#images-from-hybrid-apps-resources) und beachten Sie die Unterschiede in der URI-Formatierung.
• Bilder wurden in der iOS 14.2-App angezeigt!! Ich habe mit der aus dem App Store vertriebenen App und der Ad-hoc-Installation getestet

Es funktioniert (für mich), aber Nachteile,

• React Native Art von Referenzen ist zu bequem, um es einfach beiseite zu legen, ich hoffe, dass dieses Problem gelöst wird und ich wieder normal werden kann.
• Möglicherweise drei Asset-Ordner synchron halten ... ja, es ist durch das Skript, aber Entwickler werden es leicht vergessen, und in ein paar Monaten wird jemand 2 Tage damit verbringen, herauszufinden, warum Bilder nicht angezeigt werden, um festzustellen, dass Skripte veraltet sind oder so an die man denken kann.
• In meinem Simulator fehlen Bilder. Ich werde versuchen, eine Bedingung hinzuzufügen, um die Bilder aus dem Ordner der reagierenden nativen Assets zu laden, wenn sie von einem Simulator ausgeführt werden. Diese Bibliothek kann helfen https://github.com/react-native-device-info/react-native-device-info (ich habe es noch nicht versucht).
  Ich hoffe, dass jemand von dieser Problemumgehung profitieren kann.

@RutsSantos direkt darauf hat auch bei mir funktioniert!

1. npm install --save React-native-fix-image
2. npx reagieren-natives-fix-image
3. Projekt umbauen

hat bei mir funktioniert 🎉🎉🎉🎉🎉

Funktionierte nicht für RN 0.61

Ich verwende RN 0.61 und jede Lösung funktioniert bei mir nicht. Bitte, haben Sie noch eine Lösung?

Ich verwende RN 0.61 und jede Lösung funktioniert bei mir nicht. Bitte, haben Sie noch eine Lösung?

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

Diese Bibliothek von mir funktioniert immer noch gut mit RN 0.61

Ich verwende RN 0.61 und jede Lösung funktioniert bei mir nicht. Bitte, haben Sie noch eine Lösung?

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

Diese Bibliothek von mir funktioniert immer noch gut mit RN 0.61

Hallo Huy, ich habe Schritt für Schritt versucht, wie die Anleitung oben, es zeigte Fix Image Done. Aber das Bild wird auf ios 14 immer noch nicht angezeigt. Andere ios-Versionen zeigen das Bild immer noch normal an.
Ich verwende RN 0.61 und iOS 14.