Estoy enfrentando los mismos problemas

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

sin embargo, estoy en Xcode-beta y iOS 14

¡Tengo el mismo problema!

mismo problema...

mismo problema...

Ok, descubrí que el problema con las imágenes solo ocurre cuando la compilación se realiza con Xcode 12 Beta. Cuando realizo una compilación usando Xcode 11.5 usando iOS 14.0 Beta Device Support obtenido de aquí , las imágenes funcionan bien.

Este es un problema duplicado: https://github.com/facebook/react-native/issues/29215

Usar 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

Usar 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

¿Cómo puedo aplicar esto usando el paquete de parches, por favor? Principiante con el uso del paquete de parches.

Usar 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

¿Cómo puedo aplicar esto usando el paquete de parches, por favor? Principiante con el uso del paquete de parches.

¡Hola!

1.- ejecuta "npm i -g patch-package"
2.- Haz una nueva carpeta llamada parches
3.- Haz un nuevo archivo llamado react-native+0.63.0.patch dentro de esa carpeta
4.- Agrega el código fuente arriba.
5.- ejecuta "patch-package" en la raiz del proyecto

Usar 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

¿Cómo puedo aplicar esto usando el paquete de parches, por favor? Principiante con el uso del paquete de parches.

¡Hola!

1.- ejecuta "npm i -g patch-package"
2.- Haz una nueva carpeta llamada parches
3.- Haz un nuevo archivo llamado react-native+0.63.0.patch dentro de esa carpeta
4.- Agrega el código fuente arriba.
5.- ejecuta "patch-package" en la raiz del proyecto

Funcionó muy bien gracias.

Puede mostrar la imagen después de agregar [super displayLayer:layer]; si _currentFrame es nulo

si entiendo correctamente, _currentFrame debería ser para una imagen animada, por lo que si todavía es una imagen, podemos usar la implementación de UIImage para manejar la representación de imágenes, no estoy seguro de si es una solución correcta.

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

Mismo problema con reaccionar nativo 0.62.x. ¿Hay alguna posibilidad de que la solución se pueda portar en paquete? RN 0.63.x todavía tiene muchos errores y no podemos actualizar.

Mismo problema con reaccionar nativo 0.62.x. ¿Hay alguna posibilidad de que la solución se pueda portar en paquete? RN 0.63.x todavía tiene muchos errores y no podemos actualizar.

Creo que es mejor usar un tenedor o aplicar un paquete de parches por ahora.

Pude solucionar el problema aplicando el parche sugerido. Confirmo que funciona bien con versiones anteriores de RN:

RN: 0.62.2
Código X: 12.0
Simulador iOS: 14

Agregando una aclaración (para otros novatos en patch-package como yo) la carpeta "parches" tiene que ir al nivel raíz del proyecto.

Usar la biblioteca de parches solo para esto parece una exageración. ¿Sería demasiado difícil agregarlo como un parche menor a 0.62.2 (quizás convertirlo en 0.62.3?). En realidad son 3 líneas de código.

Tal como está ahora, 0.63.x tiene algunos errores importantes y parece que no se solucionarán pronto (0.64.x está a la vuelta de la esquina), por lo que nos quedamos con 0.62 en el futuro previsible.

Usar la biblioteca de parches solo para esto parece una exageración.

No use el paquete de parches...

No desea usar un paquete de parches, no desea actualizar su aplicación a la última versión, pero ¿por qué "obligar" a los desarrolladores a ignorar una hoja de ruta completa?
¿Por qué no quieres hacer algo, pero quieres que la gente haga lo que tú quieres?

El parche funcionó perfectamente aquí. 0.62.2

Mismo problema con reaccionar nativo 0.62.x. ¿Hay alguna posibilidad de que la solución se pueda portar en paquete? RN 0.63.x todavía tiene muchos errores y no podemos actualizar.

Hola hombre, solo agrega esto a tu carpeta de parches en 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

y ejecuta npx patch-package

Este es el parche para 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];
   }
 }

Siempre puede reemplazar sus componentes de imagen con FastImage. Así no tienes que parchear nada. Las imágenes también se cargan mejor.

Para cualquier persona que esté usando la solución patch-package y tenga una configuración de CI/CD, recuerde agregar "postinstall": "patch-package" en su package.json

Siempre puede reemplazar sus componentes de imagen con FastImage. Así no tienes que parchear nada. Las imágenes también se cargan mejor.

FastImage no es una biblioteca mantenida con muchos errores.

¿Por qué crees que es mejor?

FastImage está funcionando Puedes usarlo

@ johnlim5847 ¿ dónde agregar "postinstall": "patch-package" esta línea en package.json?

Obteniendo este error cuando se ejecuta: paquete de parches npx
Aplicando parches...
Error: se encontró un archivo de parche para el paquete react-native que no está presente en node_modules/react-native

@shrimallamanoj primero debe ir a https://github.com/ds300/patch-package

Sí... gracias, he seguido el paso y el parche se aplicó con éxito y no aparece el problema cuando se ejecuta npx, pero parece que la solución no funciona para mí... malo... ¿alguna otra solución?

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

Chicos, este parche también funciona en React native 0.61.5. Yo uso la misma solución.

1.- ejecuta "yarn add patch-package"
2.- Haz una nueva carpeta llamada parches en la raíz del proyecto.
3.- Haz un nuevo archivo llamado react-native+0.61.5.patch dentro de esa carpeta
4.- Agrega el código fuente arriba.
5.- ejecutar "paquete de parches de hilo" en la raíz del proyecto o poner esto en un script posterior a la instalación

Sigo este enlace para solucionar el problema de las imágenes en IOS14.

• compilación limpia en Xcode (CMD + Shift + K)
• restablecer caché con npx react-native start --reset-cache
• Construyendo con XCode, y todo vuelve a funcionar bien
  Estoy usando React nativo 0.62.2
  GL para todos.

no es una corrección sino una observación, si siguesen el interiorestá mostrando la imagen.

Veo el mismo error, pero solo durante el proceso de desarrollo. Esto sucedió después de que actualicé mi teléfono y el programa xcode. (ios14, xcode12) Lo extraño es que cuando descargo mi aplicación del mercado, no puedo ver las imágenes estáticas. Puedo ver las imágenes cuando intento desde un teléfono diferente. mi entorno de desarrollo se arruinó por completo después de la actualización.

La edición manual del archivo RCTUIImageViewAnimated.m como sugiere @tomcheung anteriormente soluciona el problema en la versión 0.61.5. ¡Gracias!

Sugerencias: No actualice a 0.63 solo parchee. Intenté actualizar, la compilación falló debido a firebase , code-push .

Aún experimentando este problema, ¿alguien puede aconsejarme si el parche es actualmente la mejor solución al problema?

¿Hay un parche para 0.61.2?

¿Hay un parche para 0.61.2?

Para mi. Está resuelto.

0.62.2 está resuelto. pero el dispositivo real falló....
¿Hay una solución?

https://github.com/huylvdev/react-native-fix-image funciona para mí

si (_marco actual) {
capa.contentsScale = self.animatedImageScale;
capa.contents = (__bridge id)_currentFrame.CGImage;
} demás {
[ SuperdisplayLayer:layer ];
}

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

me funciona, gracias

Para mi. Está resuelto.

Disculpa no entiendo, a que te refieres? ¿Qué parche aplicaste?

la solución que funcionó para mí solo se solucionó temporalmente porque tiene que arreglarlo dentro de los módulos del nodo, ¿hay alguna otra forma de evitar que esto suceda en el futuro?

Para la versión nativa de reacción < 0.63
Utilice react-native-fast-image en lugar de ReactNative Image
Para el trabajo de imagen rápida de reacción nativa , deshabilite el respaldo de imagen rápida de reacción nativa
¡Funciona en IOS 14!

Para mi. Está resuelto.

Disculpa no entiendo, a que te refieres? ¿Qué parche aplicaste?

@EmmanueleVilla aplica este parche https://github.com/facebook/react-native/issues/29279#issuecomment -658244428 y luego usa el paquete de parches para conservarlo :)

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

Chicos, este parche también funciona en React native 0.61.5. Yo uso la misma solución.

1.- ejecuta "yarn add patch-package"
2.- Haz una nueva carpeta llamada parches en la raíz del proyecto.
3.- Haz un nuevo archivo llamado react-native+0.61.5.patch dentro de esa carpeta
4.- Agrega el código fuente arriba.
5.- ejecutar "paquete de parches de hilo" en la raíz del proyecto o poner esto en un script posterior a la instalación

También estoy ejecutando 61.5, ¡esto funcionó para mí! Supongo que si tiene una versión distinta a la 61.5, simplemente cambie el nombre del archivo de parche para usar su versión, y cuando ejecute yarn patch-package , aplicará el parche ya que detecta que su versión nativa de reacción coincide.

por ejemplo, para la versión 61.2, nombre su archivo de parche 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>

Esto funciona para mí en v0.61.4 aunque hay una forma mucho más sencilla de generar el archivo de parche.

tl;dr Siga las instrucciones en el propio https://github.com/ds300/patch-package .

Aquí están las instrucciones detalladas:
Esta es la solución que se realizó en el código fuente de 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"
 }

¡Espero que esto ayude!

Usar 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

¿Cómo puedo aplicar esto usando el paquete de parches, por favor? Principiante con el uso del paquete de parches.

¡Hola!

1.- ejecuta "npm i -g patch-package"
2.- Haz una nueva carpeta llamada parches
3.- Haz un nuevo archivo llamado react-native+0.63.0.patch dentro de esa carpeta
4.- Agrega el código fuente arriba.
5.- ejecuta "patch-package" en la raiz del proyecto

Tuve este problema mientras usaba RN v0.61.2 pero todavía funcionó para mí. Gracias

Para la versión nativa de reacción < 0.63
Utilice react-native-fast-image en lugar de ReactNative Image
Para el trabajo de imagen rápida de reacción nativa , deshabilite el respaldo de imagen rápida de reacción nativa
¡Funciona en IOS 14!

¡Me ha funcionado!

paquete de parches de hilo

Para mi. Está resuelto.

Disculpa no entiendo, a que te refieres? ¿Qué parche aplicaste?

@EmmanueleVilla aplica este parche #29279 (comentario) y luego usa el paquete de parches para conservarlo :)

Eres el hombre @jkim430 Gracias

Probé todas las soluciones en 0.61.4, las imágenes remotas se cargan bien, pero los activos locales no se muestran.

¿Algunas ideas?

gracias xcode..

Puede mostrar la imagen después de agregar [super displayLayer:layer]; si _currentFrame es nulo

si entiendo correctamente, _currentFrame debería ser para una imagen animada, por lo que si todavía es una imagen, podemos usar la implementación de UIImage para manejar la representación de imágenes, no estoy seguro de si es una solución correcta.

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

Funcionó para mí. ¡Gracias! Además, puede usar npx patch-package (más información aquí ) para mantener este cambio y no necesita seguir arreglando node_modules todo el tiempo para reinstalarlos.

Estos son el tipo de errores que me dan ganas de abrir cualquier otro negocio y dejar de ser programador.

https://github.com/huylvdev/react-native-fix-image funciona para mí

Muchas gracias. Después de pasar un día finalmente lo solucioné con esta ayuda.

Puedo confirmar que este parche también se puede aplicar a la versión 0.63.2. Cambie el nombre del archivo a (react-native+0.62.2.patch).

Vuelva a abrir este problema,
Esto todavía no está resolviendo el problema.

https://github.com/huylvdev/react-native-fix-image funciona para mí

Muchas gracias. Después de pasar un día finalmente lo solucioné con esta ayuda.

Oye, intenté usar react-native-fix-image funcionó cuando estoy haciendo
npx react-native-fix-image pero cuando elimino los node_modules y los reinstalo.
La aplicación no carga las imágenes.
¿Enfrentó algún problema de este tipo y tenemos que ejecutar el comando npx cada vez para renderizar las imágenes?

aqui tienes
https://github.com/facebook/react-native/issues/29279#issuecomment-658244428

https://github.com/huylvdev/react-native-fix-image funciona para mí

Muchas gracias. Después de pasar un día finalmente lo solucioné con esta ayuda.

¡Eso es trabajo para mí! Gracias!!

No me funciona en modo release, ¿alguna idea?

@tomcheung muchas gracias!
Me golpeé la cabeza 2 días para saber cuál es el problema...

Para aquellos que ejecutan versiones anteriores de React Native (por ejemplo, 0.60.6), el parche no es posible ya que el archivo RCTUIImageViewAnimated.m no existe. Resolví este problema usando React Native Fast Image v8.1.5 y actualizando SDWebImage pod con pod update SDWebImage . Más específicamente, actualicé SDWebImage de v5.8.1 a v5.9.2.

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

Las imágenes no se muestran en la versión de lanzamiento. (proyecto expo 39 expulsado) RN 0.63.3
actualización: la actualización de metro.config.js solucionó mi problema => https://forums.expo.io/t/assets-missing-only-in-ios-release-build-after-ejecting/42759

¿Esto se arreglará oficialmente en cualquier versión de RN? Afaik, el problema sigue ahí.

¿Esto se arreglará oficialmente en cualquier versión de RN? Afaik, el problema sigue ahí.

+1. De vez en cuando estoy en un proyecto viejo y tengo que parchearlo..

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.mb/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
índice 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 @@ - (vacío)displayDidRefresh:(CADDisplayLink *)displayLink

• (vacío)displayLayer:(CALayer *)capa
  {
  
  
  
  • si (! _ cuadro actual) {
  
  
  • _currentFrame = self.imagen;
  
  
  • }
    
    si (_marco actual) {
    
    capa.contentsScale = self.animatedImageScale;
    
    capa.contents = (__bridge id)_currentFrame.CGImage;
    
    diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
    
    nuevo modo de archivo 100644
    
    índice 0000000..361f5fb
    
    --- /dev/null
    
    +++ b/node_modules/react-native/scripts/.packager.env
    
    @@ -0,0 +1 @@
    
    +exportar RCT_METRO_PORT=8081
  
  

¡Gracias! Esto funcionó para mí en todos mis viejos proyectos de RN.
Simplemente reemplace la versión React Native de su proyecto anterior en lugar de 0.63 antes de crear el archivo de react-native+0.63.0.patch .

Creé un video y espero que esto ayude a alguien.

La solución de @AsbarAli funcionó para mí, versión RN: 0.61.5.

Puede mostrar la imagen después de agregar [super displayLayer:layer]; si _currentFrame es nulo
si entiendo correctamente, _currentFrame debería ser para una imagen animada, por lo que si todavía es una imagen, podemos usar la implementación de UIImage para manejar la representación de imágenes, no estoy seguro de si es una solución correcta.
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];
  }

Funcionó para mí. ¡Gracias! Además, puede usar npx patch-package (más información aquí ) para mantener este cambio y no necesita seguir arreglando node_modules todo el tiempo para reinstalarlos.

Estos son el tipo de errores que me dan ganas de abrir cualquier otro negocio y dejar de ser programador.

Es importante que ejecute npx patch-package react-native para que se aplique el parche.

Hola a todos, ¿alguien podría confirmar que esto se fusionó con el núcleo?

Si bien el paquete de parches es una solución, no debería ser permanente.

Mantendré esto abierto hasta que pueda investigar.

¿No están planeando arreglar esto?

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

Parece que está arreglado. Simplemente no será portado a versiones anteriores. Creo que la solución está en 63.3

La solución de @AsbarAli funcionó para mí, versión RN: 0.61.5.

¿Cómo lo hiciste? estoy usando RN 61.2

Usar 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

¿Cómo puedo aplicar esto usando el paquete de parches, por favor? Principiante con el uso del paquete de parches.

¡Hola!
1.- ejecuta "npm i -g patch-package"
2.- Haz una nueva carpeta llamada parches
3.- Haz un nuevo archivo llamado react-native+0.63.0.patch dentro de esa carpeta
4.- Agrega el código fuente arriba.
5.- ejecuta "patch-package" en la raiz del proyecto

Tuve este problema mientras usaba RN v0.61.2 pero todavía funcionó para mí. Gracias

¿Hola me puedes ayudar? También tengo RN 61.2 pero no funciona en absoluto. Puede que las imágenes de navegación inferior no se muestren

Hola @rjtubera , se supone que el parche funciona con 0.63 aunque, según se informa, también funciona con la versión 0.61.5 de React Native. Quizás si intenta actualizar de React Native 0.61.2 a 0.61.5 y vuelve a aplicar los pasos que ha citado, puede funcionar.

Si eso no funciona, intente actualizar a 0.63 y haga lo mismo. Aunque tenga cuidado ya que algunos de sus componentes podrían romperse. Debe probar cada componente después de la actualización para asegurarse de que todo sigue funcionando bien (en iOS y Android).

Me encontré con este problema, lo solucioné siguiendo los pasos en este enlace
https://github.com/facebook/react-native/pull/29420#issuecomment-707435412

Gracias Alabi, también solucioné el problema parcheando React Native. Trabajando bien ahora hasta ahora 😊

De: Alabi Temitope Wahab [email protected]
Responder a: facebook/react-native [email protected]
Fecha: martes 13 de octubre de 2020 a las 03:56
Para: facebook/react-native [email protected]
CC: Kieran Desmond [email protected] , comentario [email protected]
Asunto: Re: [facebook/react-native] La imagen no puede mostrar la imagen en iOS 14 (#29279)

Me encontré con este problema, lo solucioné siguiendo los pasos en este enlace

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

—
Estás recibiendo esto porque comentaste.
Responda a este correo electrónico directamente, véalo en GitHub https://github.com/facebook/react-native/issues/29279#issuecomment-707436028 , o cancele la suscripción https://github.com/notifications/unsubscribe-auth/AIENJUWD2RES5AC52CT4MG3SKOXURANCNFSM4ORGDXZA .

Actualicé a la versión 0.63 de React Native, pero estoy enfrentando el mismo problema, ¿alguien puede ayudarme?

Para aquellos que ejecutan versiones anteriores de React Native (por ejemplo, 0.60.6), el parche no es posible ya que el archivo RCTUIImageViewAnimated.m no existe. Resolví este problema usando React Native Fast Image v8.1.5 y actualizando SDWebImage pod con pod update SDWebImage . Más específicamente, actualicé SDWebImage de v5.8.1 a v5.9.2.

Fuente: DylanVann/react-native-fast-image#702 (comentario)

Funciona perfectamente.

La versión 8.3.2 de react-native-fast-image incluso incluye la versión mejorada de SDWebImage, ¡así que no es necesario pod update !

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

Trabajó para mí también. 👍

La actualización de React-Native 0.63.1 a 0.63.2 funcionó para nosotros.

Me enfrento al mismo problema en RN 0.62.2 en Xcode 12.0.1. e ios 14 . ¿Alguna solución?

Me enfrento al mismo problema en RN 0.62.2 en Xcode 12.0.1. e ios 14 . ¿Alguna solución?

@ ghasemikasra39 Estaba enfrentando el mismo problema con sus mismas versiones. La instalación de react-native-fix-image funcionó para mí.

¡@RutsSantos justo en esto también funcionó para mí!

1) npm install --save react-native-fix-image
2) npx reaccionar-native-fix-image
3) proyecto de reconstrucción

La actualización de React-Native 0.63.1 a 0.63.2 funcionó para nosotros.

Esto funcionó para mí.

Esto funcionó para mí. Gracias @JordanRosas

@JordanRosas También me funcionó maravillosamente, gracias

actualice la versión nativa de reacción de 0.62.2 a 0.63.3 ya no es necesario parchear ni instalar módulos npm

0.62.3 no existe:

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

corregido

Algunos de nosotros no podemos actualizar hasta que se resuelva este error crítico de RN: https://github.com/facebook/react-native/issues/29451

Así que estamos atascados con parches de mono 0.62.x o una versión 0.63.x con errores.

Puede mostrar la imagen después de agregar [super displayLayer:layer]; si _currentFrame es nulo

si entiendo correctamente, _currentFrame debería ser para una imagen animada, por lo que si todavía es una imagen, podemos usar la implementación de UIImage para manejar la representación de imágenes, no estoy seguro de si es una solución correcta.

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

Funciona. ¡Gracias!

Si no desea instalar ningún paquete o editar directamente node_modules , puede intentar agregar un enlace de escenario preinstall en podfile como en https://stackoverflow.com/a/64495360/7477198 este trabajó para mi. Esto es más amigable con git.

Para mí, incluso en RN 63.3, las imágenes no aparecen en un dispositivo físico. Como solución alternativa, codifiqué las imágenes en base 64 aquí: https://www.base64-image.de/ y luego las usé como source para el componente Image en lugar de require('imagePath')

Puede mostrar la imagen después de agregar [super displayLayer:layer]; si _currentFrame es nulo

si entiendo correctamente, _currentFrame debería ser para una imagen animada, por lo que si todavía es una imagen, podemos usar la implementación de UIImage para manejar la representación de imágenes, no estoy seguro de si es una solución correcta.

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

¡Eres un genio, me salvaste la vida!

Usar 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

¿Cómo puedo aplicar esto usando el paquete de parches, por favor? Principiante con el uso del paquete de parches.

¡Hola!

1.- ejecuta "npm i -g patch-package"
2.- Haz una nueva carpeta llamada parches
3.- Haz un nuevo archivo llamado react-native+0.63.0.patch dentro de esa carpeta
4.- Agrega el código fuente arriba.
5.- ejecuta "patch-package" en la raiz del proyecto

Gracias
funcionó bien para mí en RN 0.61.5
agregué un archivo de parche llamado react-native+0.61.5.patch

también una solución para DylanVann/react-native-fast-image
cd ios && pod update SDWebImage

Usar 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 ¡Gracias por la solución! ¿Se requiere RCT_METRO_PORT aquí, o algo específico para su proyecto?

RN 0.59.0 en Xcode 12.0.1. y ios 14. ¿Alguna solución?

RN 0.59.0 en Xcode 12.0.1. y ios 14. ¿Alguna solución?

3 soluciones:

1. Solucionar el problema manualmente dentro de node_modules
2. Use esta biblioteca de correcciones https://www.npmjs.com/package/react-native-fix-image
3. Actualizar a React Native 0.63.3

Puedo confirmar que esto todavía existe en --configuration=Release , incluso en "react-native": "0.63.3" . Sin embargo, funciona bien en --configuration=Debug .

https://www.npmjs.com/package/react-native-fix-image no ayuda pero rompe la compilación
liberar la configuración con este error:

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

Además, los usuarios de mi aplicación no experimentan la carga de imágenes (desde la URL) en iOS, pero no se les ocurre a todos, solo a algunas personas. Por favor arregla esto. Estoy usando React Native 0.63.3.
https://i.ibb.co/1vDc6kv/1.jpg <- enlace a la imagen que muestra este problema

¡@douglasjunior funciona bien! ¡muchas gracias!

¡@RutsSantos justo en esto también funcionó para mí!

1. npm install --save reaccionar-native-fix-image
2. npx reaccionar-native-fix-imagen
3. proyecto de reconstrucción

me funciono 🎉🎉🎉🎉🎉

RN 0.59.0 en Xcode 12.0.1. y ios 14. ¿Alguna solución?

3 soluciones:

1. Solucionar el problema manualmente dentro de node_modules
2. Use esta biblioteca de correcciones https://www.npmjs.com/package/react-native-fix-image
3. Actualizar a React Native 0.63.3

otra Q, uso .1 manualmente dentro de node_modules, funciona bien para mostrar la imagen de la red, pero no puedo mostrar la imagen local,

Además, los usuarios de mi aplicación no experimentan la carga de imágenes (desde la URL) en iOS, pero no se les ocurre a todos, solo a algunas personas. Por favor arregla esto. Estoy usando React Native 0.63.3.
https://i.ibb.co/1vDc6kv/1.jpg <- enlace a la imagen que muestra este problema

Encuentro un problema que se me ocurrió. WebP no era compatible con iOS 13, por lo que necesitaba instalar react-native-fast-image con SDWebImageWebPCoder pod.

Supongo que nadie tiene un script de compilación de Microsoft App Center para solucionar esto también.

FYI, también pude superar esto usando FastImage que lo solucionó después de actualizar SDWebImage https://github.com/DylanVann/react-native-fast-image/issues/730 (no puedo actualizar a 0.63 en este momento porque se rompe otro trabajo, eventualmente pasaré a la última versión)

En mi caso, tenía imágenes animadas de RN simple, pero también pude usar FastImage para esas usando

const AnimatedImage = Animated.createAnimatedComponent(FastImage)

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

Alternativamente, el paquete de imagen de corrección debería funcionar, si no funciona en Appcenter (@krisbaum74), debería poder hacer lo mismo creando appcenter-pre-build.sh en la raíz del repositorio y agregando el script con la corrección. allí

Estoy usando react-native 0.63.3 y sigo enfrentando este problema en iOS 14.1. Esto ya se aplica en esa versión. ¿Alguna idea de cómo arreglarlo?

Estoy usando react-native 0.63.3 y sigo enfrentando este problema en iOS 14.1. Esto ya se aplica en esa versión. ¿Alguna idea de cómo arreglarlo?

si actualiza a 0.63.3, puede tener problemas en ese código, pruebe esta biblioteca de arreglos https://www.npmjs.com/package/react-native-fix-image

Estoy usando react-native 0.63.3 y sigo enfrentando este problema en iOS 14.1. Esto ya se aplica en esa versión. ¿Alguna idea de cómo arreglarlo?

si actualiza a 0.63.3, puede tener problemas en ese código, pruebe esta biblioteca de arreglos https://www.npmjs.com/package/react-native-fix-image

Ya actualicé a 0.63.3 y esta biblioteca no resuelve el problema (las imágenes se cargan en el simulador pero no en el dispositivo físico.

Estoy usando react-native 0.63.3 y sigo enfrentando este problema en iOS 14.1. Esto ya se aplica en esa versión. ¿Alguna idea de cómo arreglarlo?

si actualiza a 0.63.3, puede tener problemas en ese código, pruebe esta biblioteca de arreglos https://www.npmjs.com/package/react-native-fix-image

Ya actualicé a 0.63.3 y esta biblioteca no resuelve el problema (las imágenes se cargan en el simulador pero no en el dispositivo físico.

Mi problema estaba relacionado con la copia de los activos para la compilación de producción, había un enlace incorrecto como se explica aquí , luego regenere el paquete e intente nuevamente

Usar 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

¿Cómo puedo aplicar esto usando el paquete de parches, por favor? Principiante con el uso del paquete de parches.

¡Hola!

1.- ejecuta "npm i -g patch-package"
2.- Haz una nueva carpeta llamada parches
3.- Haz un nuevo archivo llamado react-native+0.63.0.patch dentro de esa carpeta
4.- Agrega el código fuente arriba.
5.- ejecuta "patch-package" en la raiz del proyecto

¡¡¡¡Muchas gracias!!!! Literalmente salvaste mi día 🙏 ❤️

Puede mostrar la imagen después de agregar [super displayLayer:layer]; si _currentFrame es nulo

si entiendo correctamente, _currentFrame debería ser para una imagen animada, por lo que si todavía es una imagen, podemos usar la implementación de UIImage para manejar la representación de imágenes, no estoy seguro de si es una solución correcta.

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

Trabajó para mi !!! 👍

También actualizamos a 0.63.3 y enfrentamos este problema en iOS 14.
Descargamos archivos (imágenes entre ellos) usando el paquete RN-fetch-blob, y cargamos estas imágenes locales usando el componente Image.

@krisbaum74

Supongo que nadie tiene un script de compilación de Microsoft App Center para solucionar esto también.

Usar 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

¿Cómo puedo aplicar esto usando el paquete de parches, por favor? Principiante con el uso del paquete de parches.

¡Hola!

1.- ejecuta "npm i -g patch-package"
2.- Haz una nueva carpeta llamada parches
3.- Haz un nuevo archivo llamado react-native+0.63.0.patch dentro de esa carpeta
4.- Agrega el código fuente arriba.
5.- ejecuta "patch-package" en la raiz del proyecto

Simplemente siga la solución anterior y cree un archivo react-native+0.63.0.patch

después de eso, en su appcenter-pre-build.sh agregue

npm i -g paquete de parches
paquete de parches

Esto agregará la solución anterior en su compilación de AppCenter.

Tenía esto en iOS y usé npx react-native-fix-image que funcionó muy bien. ¡Ahora estoy consternado al encontrar que el problema persiste en Android!

No se menciona Android aquí. ¿Soy el único?

Estoy usando "react-native": "0.61.5"

_const Imagen = Animatable.createAnimatableComponent(FastImage);_
¡No funciona correctamente!

animation={'bounceIn'} no funciona

"reaccionar-nativo": "0.63.3"
"reaccionar-imagen-rápida-nativa": "^8.3.4"
"reaccionar-nativo-animable": "^1.3.3"

Sé que esto se considera un parche para 0.63, pero puedo confirmar que también funciona en 0.62. 👍

Todavía no funciona en IOS 14.2, Xcode 12.2, react-native 0.63.4
Cualquier solución sugerida no ayuda
Actualizar
0.63.4: muestra imágenes remotas sin problemas y sin ningún parche, pero las imágenes locales no funcionan con o sin parche

Tengo un proyecto con react-native 0.63.3, el parche no me funciona. Antes de aplicar el parche, verifiqué la clase RCTUIImageViewAnimated y ya contiene el código del parche, esto se espera ya que #29420 ya está fusionado en 0.63.3 según el cambio 0.63.2 CHANGELOG https://github.com/react-native- comunidad/lanzamientos/blob/master/CHANGELOG.md#v0632. Así que el parche no lo arreglará, creo que era válido en 0.62.2 pero me temo que los cambios en 0.63.3 rompieron la carga de imágenes _local_ nuevamente. Eso explica por qué algunos desarrolladores bajaron a <0.63.2 y aplicaron el parche y las imágenes volvieron a ser visibles. Preferiría simplemente obtener el 0.63.2 que contiene la corrección. En cualquier caso, estoy dudando en cambiar a una versión anterior, sí, incluso para una versión anterior, ya que no quiero quedarme estancado en el pasado ;-). Creé una solución alternativa que está funcionando en mi extremo.

Basándose en el hecho de que para _me_ las imágenes se están cargando cuando se usa una URL _externa_ (RN 0.63.3).
Mi solución,

• Sigo el patrón de activos híbridos, puede obtener la referencia aquí https://reactnative.dev/docs/images#images -from-hybrid-apps-resources
• Agregue las imágenes a la biblioteca de recursos de iOS/Android. Esto se puede hacer manualmente, por script, XCode,...
• Haga referencia a la imagen por su URI _local_ en lugar de la referencia del sistema de archivos de conveniencia nativa _react_, ejemplo de iOS a continuación

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

• Creó una función de utilidad para obtener el URI de activos de referencia de iOS o Android según la plataforma. Lea la documentación (https://reactnative.dev/docs/images#images-from-hybrid-apps-resources) y tome nota de las diferencias en el formato de URI.
• ¡Las imágenes comenzaron a aparecer en la aplicación iOS 14.2! Probé con la aplicación distribuida desde App Store e instalación Ad Hoc

Está funcionando (para mí) pero, desventajas,

• La forma de referencias de React Native es demasiado conveniente como para dejarla de lado, espero que este problema se resuelva y pueda volver a la normalidad.
• Mantener potencialmente sincronizadas tres carpetas de activos... sí, es por el script, pero los desarrolladores lo olvidarán fácilmente y en unos meses a partir de ahora alguien pasará 2 días averiguando por qué las imágenes no aparecen para descubrir que los scripts están desactualizados o algo así. que puedas pensar.
• Faltan imágenes en mi simulador, buscaré agregar un condicional para cargar las imágenes de la carpeta de activos nativos de reacción si se ejecuta desde un simulador. Esta biblioteca puede ayudar a https://github.com/react-native-device-info/react-native-device-info (aún no lo he probado).
  Espero que alguien pueda beneficiarse de esta solución.

¡@RutsSantos justo en esto también funcionó para mí!

1. npm install --save reaccionar-native-fix-image
2. npx reaccionar-native-fix-imagen
3. proyecto de reconstrucción

me funciono 🎉🎉🎉🎉🎉

No funcionó para RN 0.61

Uso RN 0.61 y ninguna solución me funciona. Por favor, ¿tiene alguna otra solución?

Uso RN 0.61 y ninguna solución me funciona. Por favor, ¿tiene alguna otra solución?

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

Esta biblioteca mía, todavía funciona bien con RN 0.61

Uso RN 0.61 y ninguna solución me funciona. Por favor, ¿tiene alguna otra solución?

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

Esta biblioteca mía, todavía funciona bien con RN 0.61

Hola Huy, probé paso a paso como la guía anterior, mostró la imagen de reparación Listo. Pero la imagen aún no se muestra en ios 14. Otras versiones de ios aún muestran la imagen normalmente.
Yo uso RN 0.61 y ios 14.