React-native: 图像无法在 iOS 14 中显示图像

创建于 2020-07-06  ·  125评论  ·  资料来源: facebook/react-native

图像在 iOS 14 中无法显示图像，但可以显示位置，例如：
来源={
要求（'./images/add_scan_images.png'）
}
/>

环境：
Xcode 版本 12.0 测试版 (12A6159)
模拟器：iPhone SE - 第二代 - 14.0
“反应”：“16.11.0”，
“反应原生”：“0.62.2”

Image Author Feedback Issue Template iOS iOS 14
资料来源
picture caofeng
👍140 🎉7 🚀5 ❤4

最有用的评论

如果 _currentFrame 为 nil，则添加[super displayLayer:layer];后可以显示图像

如果我理解正确，_currentFrame 应该是用于动画图像，所以如果它是静止图像，我们可以使用 UIImage 实现来处理图像渲染，不确定它是否是正确的修复。

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];
  }
picture tomcheung 于 2020-07-14
👍319 🎉114 ❤108 🚀95 😄35 👀20 👎10 😕6

所有125条评论

：警告：缺少环境信息
：信息来源：您的问题可能是缺少有关您的开发环境的信息。 您可以通过在控制台中运行react-native info来获取缺失的信息。
github-actions[bot] picture github-actions[bot] 于 2020-07-06

我面临同样的问题

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

但是我在 Xcode-beta 和 iOS 14 上

tomas-sereikis picture tomas-sereikis 于 2020-07-08
👍3

我有同样的问题！

tachtevrenidis picture tachtevrenidis 于 2020-07-08

同样的问题...

dmsouza picture dmsouza 于 2020-07-09

同样的问题...

jonathantroncoso82 picture jonathantroncoso82 于 2020-07-09

好的，所以我发现只有在使用 Xcode 12 Beta 进行构建时才会出现图像问题。 当我使用 Xcode 11.5 使用从这里获得的 iOS 14.0 Beta 设备支持进行构建时，图像工作正常。

jennmueng picture jennmueng 于 2020-07-09
👍11

这是一个重复的问题——https: //github.com/facebook/react-native/issues/29215

QuintonC picture QuintonC 于 2020-07-09
：警告：缺少必填字段
：信息来源：看起来您的问题可能缺少一些必要的信息。 每当创建新问题时，GitHub 都会提供示例模板。 你能回去确保填写模板吗？ 您可以编辑此问题，或关闭它并打开一个新问题。
github-actions[bot] picture github-actions[bot] 于 2020-07-09

使用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 picture legion-zver 于 2020-07-12
👍46 🎉19 ❤14 😄9 👎7 👀6 🚀2

使用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

请问如何使用补丁包来应用它？ 使用补丁包的初学者。

Tucker2015 picture Tucker2015 于 2020-07-12
👍12

使用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

请问如何使用补丁包来应用它？ 使用补丁包的初学者。

你好！

1.- 运行“npm i -g 补丁包”
2.- 创建一个名为 patch 的新文件夹
3.- 在该文件夹中创建一个名为 react-native+0.63.0.patch 的新文件
4.- 添加上面的源代码。
5.- 在项目的根目录上运行“patch-package”

artmerlop picture artmerlop 于 2020-07-13
👍98 ❤40 🚀31 🎉22 😄13

使用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

请问如何使用补丁包来应用它？ 使用补丁包的初学者。

你好！

1.- 运行“npm i -g 补丁包”
2.- 创建一个名为 patch 的新文件夹
3.- 在该文件夹中创建一个名为 react-native+0.63.0.patch 的新文件
4.- 添加上面的源代码。
5.- 在项目的根目录上运行“patch-package”

工作非常感谢。

Tucker2015 picture Tucker2015 于 2020-07-13

如果 _currentFrame 为 nil，则添加[super displayLayer:layer];后可以显示图像

如果我理解正确，_currentFrame 应该是用于动画图像，所以如果它是静止图像，我们可以使用 UIImage 实现来处理图像渲染，不确定它是否是正确的修复。

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];
  }
tomcheung picture tomcheung 于 2020-07-14
👍319 🎉114 ❤108 🚀95 😄35 👀20 👎10 😕6

与 react native 0.62.x 相同的问题。 修复程序有可能被打包移植吗？ RN 0.63.x 仍然存在严重漏洞，我们无法升级。

cristianoccazinsp picture cristianoccazinsp 于 2020-09-17
👍25

与 react native 0.62.x 相同的问题。 修复程序有可能被打包移植吗？ RN 0.63.x 仍然存在严重漏洞，我们无法升级。

认为现在最好使用 fork 或应用补丁包。

telmen picture telmen 于 2020-09-18

我能够通过应用建议的补丁来解决这个问题。 我确认这适用于以前的 RN 版本：

注册护士：0.62.2
Xcode: 12.0
iOS模拟器：14

添加说明（对于像我这样的patch-package的其他新手）文件夹“patches”必须位于项目根级别。

maxbaldrighi picture maxbaldrighi 于 2020-09-18

仅仅为此使用补丁库似乎有点矫枉过正。 将它作为一个小补丁添加到 0.62.2 会不会太难（也许使它成为 0.62.3？）。 这真的是 3 行代码。

就目前而言，0.63.x 存在一些重大错误，并且看起来它们不会很快得到解决（0.64.x 指日可待），因此在可预见的未来我们将坚持使用 0.62。

cristianoccazinsp picture cristianoccazinsp 于 2020-09-18
👍14 👎1

仅仅为此使用补丁库似乎有点矫枉过正。

不要用户补丁包...

您不想使用补丁包，不想将应用程序更新到最新版本，但为什么要“强制”开发人员忽略整个路线图呢？
为什么你不想做某事，却想让人们做你想做的事？

该补丁在这里完美运行。 0.62.2

GleidsonDaniel picture GleidsonDaniel 于 2020-09-18

与 react native 0.62.x 相同的问题。 修复程序有可能被打包移植吗？ RN 0.63.x 仍然存在严重漏洞，我们无法升级。

嘿伙计，只需将其添加到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

并运行npx patch-package

RatebSeirawan picture RatebSeirawan 于 2020-09-20
👍18 🎉5 ❤1

这是 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];
   }
 }
Rotemy picture Rotemy 于 2020-09-20
👍8 👎3 😕1

你总是可以用 FastImage 替换你的 Image 组件。 这样你就不必修补任何东西。 图像加载也更好。

hhemmati81 picture hhemmati81 于 2020-09-21
👍2

对于正在使用patch-package修复并进行 CI/CD 设置的任何人，请记住在 package.json 中添加"postinstall": "patch-package" package.json

johnlim5847 picture johnlim5847 于 2020-09-21

你总是可以用 FastImage 替换你的 Image 组件。 这样你就不必修补任何东西。 图像加载也更好。

FastImage 不是一个有很多错误的维护库。

为什么你认为它更好？

Rotemy picture Rotemy 于 2020-09-21

FastImage 正在工作 你可以使用它

mortezacruise picture mortezacruise 于 2020-09-21
👍3

@johnlim5847在哪里添加 "postinstall": "patch-package" 这个行在 package.json 中？

shrimallamanoj picture shrimallamanoj 于 2020-09-21

运行时出现此错误：npx patch-package
正在应用补丁...
错误：为 node_modules/react-native 中不存在的包 react-native 找到补丁文件

shrimallamanoj picture shrimallamanoj 于 2020-09-21

@shrimallamanoj你应该先去https://github.com/ds300/patch-package

KingAmo picture KingAmo 于 2020-09-21

是的...谢谢您，我已经按照步骤成功应用了补丁，并且在运行 npx 时不会出现问题，但似乎解决方案对我不起作用..不好...还有其他解决方案吗？

shrimallamanoj picture shrimallamanoj 于 2020-09-21 
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

伙计们，这个补丁也适用于 React native 0.61.5。 我使用相同的解决方法。

1.-运行“纱线添加补丁包”
2.- 在项目的根目录上创建一个名为 patch 的新文件夹。
3.- 在该文件夹中创建一个名为 react-native+0.61.5.patch 的新文件
4.- 添加上面的源代码。
5.- 在项目的根目录上运行“yarn patch-package”或将其放在安装后脚本中

ebellumat picture ebellumat 于 2020-09-21
👍11 ❤1

我按照这个链接来解决关于 IOS14 中图像的问题。

  • Xcode 中的干净构建（CMD + Shift + K）
  • 使用 npx react-native start --reset-cache 重置缓存
  • 使用 XCode 构建，一切正常
    我正在使用 React 本机 0.62.2
    GL给大家。
renzoarellano picture renzoarellano 于 2020-09-21
👎4

不是修复而是观察，如果你保持里面它显示图像。

praveens96 picture praveens96 于 2020-09-22

我看到了同样的错误，但只是在开发过程中。 这些发生在我更新手机和 xcode 程序之后。 (ios14, xcode12) 奇怪的是，当我从市场上下载我的应用程序时，我看不到静态图片。 当我从其他手机尝试时，我可以看到图片。 更新后我的开发环境彻底毁了。

kvlknctk picture kvlknctk 于 2020-09-22
👍3

正如@tomcheung建议的那样手动编辑文件RCTUIImageViewAnimated.m修复了版本 0.61.5 上的问题。 谢谢！

a-koka picture a-koka 于 2020-09-22

建议：不要升级到0.63只是补丁。 我尝试升级，由于firebase 、 code-push导致构建失败。

TNChalise picture TNChalise 于 2020-09-23

仍然遇到这个问题，谁能建议补丁是否是目前解决问题的最佳方法？

dooleyb1 picture dooleyb1 于 2020-09-23

有 0.61.2 的补丁吗？

EmmanueleVilla picture EmmanueleVilla 于 2020-09-23
👍4

有 0.61.2 的补丁吗？

为了我。 解决了。

Ma2iio picture Ma2iio 于 2020-09-23

0.62.2 已解决。 但实际设备失败了....
有解决办法吗？

jhui134 picture jhui134 于 2020-09-24

https://github.com/huylvdev/react-native-fix-image它对我有用

huylvdev picture huylvdev 于 2020-09-24
👍3 🚀2 🎉1

如果（_currentFrame）{
layer.contentsScale = self.animatedImageScale;
layer.contents = (__bridge id)_currentFrame.CGImage;
} 别的 {
[超级显示层：层]；
}

在：/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m

它对我有用，谢谢

khaledBou picture khaledBou 于 2020-09-24
👍4

为了我。 解决了。

对不起，我不明白，你是什么意思？ 你打的是哪个补丁？

EmmanueleVilla picture EmmanueleVilla 于 2020-09-25

对我有用的解决方案只是暂时修复，因为您必须在节点模块中修复它，有没有其他方法可以防止将来发生这种情况？

datle1888 picture datle1888 于 2020-09-25
👍6

对于 react-native 版本 < 0.63
请使用react-native-fast-image代替ReactNative Image
要react-native-fast-image工作，请禁用react-native-fast-image 的后备
它适用于 IOS 14 ！

john-techfox picture john-techfox 于 2020-09-25
👍4

为了我。 解决了。

对不起，我不明白，你是什么意思？ 你打的是哪个补丁？

@EmmanueleVilla应用此补丁https://github.com/facebook/react-native/issues/29279#issuecomment -658244428 然后使用补丁包来保留它:)

miguelmich picture miguelmich 于 2020-09-25 
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

伙计们，这个补丁也适用于 React native 0.61.5。 我使用相同的解决方法。

1.-运行“纱线添加补丁包”
2.- 在项目的根目录上创建一个名为 patch 的新文件夹。
3.- 在该文件夹中创建一个名为 react-native+0.61.5.patch 的新文件
4.- 添加上面的源代码。
5.- 在项目的根目录上运行“yarn patch-package”或将其放在安装后脚本中

我也在运行 61.5，这对我有用！ 我猜你是否有 61.5 以外的版本，只需重命名补丁文件以使用你的版本，当你运行yarn patch-package时，它会应用补丁，因为它检测到你的 react-native 版本匹配。

例如，对于版本 61.2，将您的补丁文件命名react-native+0.61.2.patch

jkim430 picture jkim430 于 2020-09-25
👍2 🎉1 
#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>
zhangyandong picture zhangyandong 于 2020-09-27

这对我有用v0.61.4尽管有一种更简单的方法来生成补丁文件。

tl;dr按照https://github.com/ds300/patch-package本身的说明进行操作。

以下是详细说明：
这是对 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"
 }

希望这可以帮助！

Monte9 picture Monte9 于 2020-09-27
👍15 🚀7 🎉6 😄4

使用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

请问如何使用补丁包来应用它？ 使用补丁包的初学者。

你好！

1.- 运行“npm i -g 补丁包”
2.- 创建一个名为 patch 的新文件夹
3.- 在该文件夹中创建一个名为 react-native+0.63.0.patch 的新文件
4.- 添加上面的源代码。
5.- 在项目的根目录上运行“patch-package”

我在使用 RN v0.61.2 时遇到了这个问题，但这仍然对我有用。 谢谢

muganwas picture muganwas 于 2020-09-28
👍3

对于 react-native 版本 < 0.63
请使用react-native-fast-image代替ReactNative Image
要react-native-fast-image工作，请禁用react-native-fast-image 的后备
它适用于 IOS 14 ！

它对我有用！

rockvic picture rockvic 于 2020-09-28
👍4

纱线补丁包

为了我。 解决了。

对不起，我不明白，你是什么意思？ 你打的是哪个补丁？

@EmmanueleVilla应用此补丁#29279（评论） ，然后使用补丁包来保留它:)

你是那个人@jkim430谢谢

momochan32 picture momochan32 于 2020-09-29

在 0.61.4 上尝试了所有解决方案，远程图像加载正常，但本地资产不会只显示。

有任何想法吗？

nigharsh picture nigharsh 于 2020-09-29

谢谢xcode..
image

BogdanRad picture BogdanRad 于 2020-09-29
😄11

如果 _currentFrame 为 nil，则添加[super displayLayer:layer];后可以显示图像

如果我理解正确，_currentFrame 应该是用于动画图像，所以如果它是静止图像，我们可以使用 UIImage 实现来处理图像渲染，不确定它是否是正确的修复。

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

它对我有用。 谢谢！ 此外，您可以使用npx patch-package （更多信息here ）来保留此更改，并且不需要一直修复重新安装的所有时间 node_modules。

这些是让我想打开任何其他业务并停止成为程序员的错误。

fabiocberg picture fabiocberg 于 2020-09-29
😄4

https://github.com/huylvdev/react-native-fix-image它对我有用

非常感谢，花了一天的时间终于通过这个帮助解决了

Justin9606 picture Justin9606 于 2020-09-29
👍9 ❤7 🚀5 🎉1

我可以确认这个补丁也可以应用于 0.63.2 版本。 将文件重命名为 (react-native+0.62.2.patch)。

virgial picture virgial 于 2020-09-30

请重新打开这个问题，
这仍然不能解决问题。

Rohithzr picture Rohithzr 于 2020-09-30
😕1

https://github.com/huylvdev/react-native-fix-image它对我有用

非常感谢，花了一天的时间终于通过这个帮助解决了

嘿，我尝试使用react-native-fix-image它在我做的时候有效
npx react-native-fix-image但是当我删除 node_modules 并重新安装它们时。
该应用程序不加载图像。
您是否遇到过任何此类问题，我们是否每次都必须运行 npx 命令来渲染图像。

bhavishya2107 picture bhavishya2107 于 2020-09-30

干得好
https://github.com/facebook/react-native/issues/29279#issuecomment -658244428

sobanarshad85 picture sobanarshad85 于 2020-09-30
👎2

https://github.com/huylvdev/react-native-fix-image它对我有用

非常感谢，花了一天的时间终于通过这个帮助解决了

那对我有用！ 谢谢！！

caiomendes23 picture caiomendes23 于 2020-09-30

它在发布模式下对我不起作用，知道吗？

mateodaza picture mateodaza 于 2020-09-30
👍2

@tomcheung 非常感谢！
我打了两天的头，找出问题所在...

todor-droxic picture todor-droxic 于 2020-10-02

对于那些运行旧版本的 React Native（例如，0.60.6）的人来说，补丁是不可能的，因为RCTUIImageViewAnimated.m文件不存在。 我通过使用React Native Fast Image v8.1.5 并使用pod update SDWebImage升级 SDWebImage pod 解决了这个问题。 更具体地说，我将 SDWebImage 从 v5.8.1 升级到 v5.9.2。

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

bpred754 picture bpred754 于 2020-10-02
👍2 🎉1

发布版本上未显示图像。 （退出世博会 39 项目）RN 0.63.3
更新：更新 metro.config.js 解决了我的问题 => https://forums.expo.io/t/assets-missing-only-in-ios-release-build-after-ejecting/42759

petermason picture petermason 于 2020-10-05

这会在任何 RN 版本中正式修复吗？ 阿法克，问题仍然存在。

lock9 picture lock9 于 2020-10-08
👍5

这会在任何 RN 版本中正式修复吗？ 阿法克，问题仍然存在。

+1。 每隔一段时间我在一个旧项目上，我必须修补它..

d0xi5 picture d0xi5 于 2020-10-08

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.mb/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
索引 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
    {

    • 如果（！_currentFrame）{

    • _currentFrame = self.image;

    • }

      如果（_currentFrame）{

      layer.contentsScale = self.animatedImageScale;

      layer.contents = (__bridge id)_currentFrame.CGImage;

      差异 --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env

      新文件模式 100644

      索引 0000000..361f5fb

      --- /dev/null

      +++ b/node_modules/react-native/scripts/.packager.env

      @@ -0,0 +1 @@

      +导出 RCT_METRO_PORT=8081

谢谢！ 这对我所有旧的 RN 项目都有效。
在创建react-native+0.63.0.patch文件之前，只需替换旧项目的 React Native 版本而不是 0.63 即可。

我创建了一个视频，我希望这会对某人有所帮助。

AsbarAli picture AsbarAli 于 2020-10-09
👍4

@AsbarAli的修复对我有用，RN 版本：0.61.5。

matiasmir picture matiasmir 于 2020-10-09
👍2

如果 _currentFrame 为 nil，则添加[super displayLayer:layer];后可以显示图像
如果我理解正确，_currentFrame 应该是用于动画图像，所以如果它是静止图像，我们可以使用 UIImage 实现来处理图像渲染，不确定它是否是正确的修复。
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];
  }

它对我有用。 谢谢！ 此外，您可以使用npx patch-package （更多信息here ）来保留此更改，并且不需要一直修复重新安装的所有时间 node_modules。

这些是让我想打开任何其他业务并停止成为程序员的错误。

运行npx patch-package react-native以应用补丁非常重要。

Garrett1Tolbert picture Garrett1Tolbert 于 2020-10-10
👍2

嘿，有人可以确认这已合并到核心吗？

虽然补丁包是一种解决方案，但它不应该是永久性的。

在我进行调查之前，我会一直保持开放状态。

safaiyeh picture safaiyeh 于 2020-10-11
❤1

他们不打算解决这个问题吗？

enriccamacho picture enriccamacho 于 2020-10-11

https://www.npmjs.com/package/react-native-fix-image
为我工作

huylvdev picture huylvdev 于 2020-10-11
👍13 ❤7 🎉7 🚀5

看起来它是固定的。 只是不会被移植到以前的版本。 我相信修复是在 63.3

safaiyeh picture safaiyeh 于 2020-10-11
👍2

@AsbarAli的修复对我有用，RN 版本：0.61.5。

你是怎么做到的？ 我正在使用 RN 61.2

rjtubera picture rjtubera 于 2020-10-12

使用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

请问如何使用补丁包来应用它？ 使用补丁包的初学者。

你好！
1.- 运行“npm i -g 补丁包”
2.- 创建一个名为 patch 的新文件夹
3.- 在该文件夹中创建一个名为 react-native+0.63.0.patch 的新文件
4.- 添加上面的源代码。
5.- 在项目的根目录上运行“patch-package”

我在使用 RN v0.61.2 时遇到了这个问题，但这仍然对我有用。 谢谢

嗨，你能帮帮我吗？ 我也有 RN 61.2，但它根本不起作用。 可能没有显示底部导航图像

rjtubera picture rjtubera 于 2020-10-12

嘿@rjtubera ，该补丁应该适用于 0.63，尽管据报道也适用于 0.61.5 版本的 React Native。 也许如果您尝试从 React Native 0.61.2 升级到 0.61.5，并重新应用您引用的步骤，它可能会起作用。

如果这不起作用，请尝试升级到 0.63 并执行相同操作。 不过要小心，因为您的某些组件可能会损坏。 您应该在升级后测试每个组件，以确保一切正常（在 iOS 和 Android 上）。

kierandesmond picture kierandesmond 于 2020-10-12

我遇到了这个问题，我按照这个链接的步骤修复了它
https://github.com/facebook/react-native/pull/29420#issuecomment -707435412

tbanj picture tbanj 于 2020-10-13

谢谢阿拉比，我也通过修补 React Native 来解决这个问题。 目前工作良好😊

来自：Alabi Temitope Wahab [email protected]
回复：facebook/react-native [email protected]
日期：2020 年 10 月 13 日星期二 03:56
致：facebook/react-native [email protected]
抄送：Kieran Desmond [email protected] ，评论[email protected]
主题：回复：[facebook/react-native] 图片无法在 iOS 14 中显示图片 (#29279)

我遇到了这个问题，我按照这个链接的步骤修复了它

29420（评论） https://github.com/facebook/react-native/pull/29420#issuecomment-707435412

—
您收到此消息是因为您发表了评论。
直接回复此邮件，在 GitHub 上查看https://github.com/facebook/react-native/issues/29279#issuecomment-707436028 ，或取消订阅https://github.com/notifications/unsubscribe-auth/AIENJUWD2RES5AC52CT4MG3SKOXURANCNFSM4ORGDXZA 。

kierandesmond picture kierandesmond 于 2020-10-13

我升级到 react native 的 0.63 版本，但我面临同样的问题，任何人都可以帮助我吗？

Anzormumladze picture Anzormumladze 于 2020-10-13

对于那些运行旧版本的 React Native（例如，0.60.6）的人来说，补丁是不可能的，因为RCTUIImageViewAnimated.m文件不存在。 我通过使用React Native Fast Image v8.1.5 并使用pod update SDWebImage升级 SDWebImage pod 解决了这个问题。 更具体地说，我将 SDWebImage 从 v5.8.1 升级到 v5.9.2。

来源： DylanVann/react-native-fast-image#702（评论）

完美运行。

react-native-fast-image 8.3.2 版本甚至包括升级版的 SDWebImage，所以不需要pod update ！

lissau picture lissau 于 2020-10-14

https://www.npmjs.com/package/react-native-fix-image
为我工作

也为我工作。 👍

Doha26 picture Doha26 于 2020-10-14
🎉5 😄3 👍3 ❤2

从 React-Native 0.63.1 升级到 0.63.2 对我们有用。

alexanderkho picture alexanderkho 于 2020-10-14
🚀1 🎉1

我在 Xcode 12.0.1.和 ios 14上的 RN 0.62.2上面临同样的问题。 有什么解决办法吗？

ghasemikasra39 picture ghasemikasra39 于 2020-10-15
👍4

我在 Xcode 12.0.1.和 ios 14上的 RN 0.62.2上面临同样的问题。 有什么解决办法吗？

@ghasemikasra39我在使用相同版本时遇到了同样的问题。 安装react-native-fix-image对我有用。

RutsSantos picture RutsSantos 于 2020-10-15
🎉4 ❤1

@RutsSantos对此也适用！

1) npm install --save react-native-fix-image
2) npx react-native-fix-image
3）重建项目

JordanRosas picture JordanRosas 于 2020-10-15
👍16 🎉9 ❤8 👎3

从 React-Native 0.63.1 升级到 0.63.2 对我们有用。

这对我有用。

xtealer picture xtealer 于 2020-10-15

这对我有用。 谢谢@JordanRosas

basarburak picture basarburak 于 2020-10-19
🎉1

@JordanRosas也为我出色地工作，谢谢

jkz27 picture jkz27 于 2020-10-19
🎉1

将 react native 版本从 0.62.2 升级到 0.63.3 不再需要修补或安装 npm 模块

Anzormumladze picture Anzormumladze 于 2020-10-21
👍3

0.62.3 不存在：

hugoh59 picture hugoh59 于 2020-10-21

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

hugoh59 picture hugoh59 于 2020-10-21

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

更正

Anzormumladze picture Anzormumladze 于 2020-10-21

在解决这个关键的 RN 错误之前，我们中的一些人无法升级： https ://github.com/facebook/react-native/issues/29451

所以我们要么被猴子补丁 0.62.x 或有 bug 的 0.63.x 版本卡住。

cristianoccazinsp picture cristianoccazinsp 于 2020-10-21

如果 _currentFrame 为 nil，则添加[super displayLayer:layer];后可以显示图像

如果我理解正确，_currentFrame 应该是用于动画图像，所以如果它是静止图像，我们可以使用 UIImage 实现来处理图像渲染，不确定它是否是正确的修复。

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

有用。 谢谢！

ReemaVinodGangdev picture ReemaVinodGangdev 于 2020-10-23

如果您不想安装任何软件包或直接编辑node_modules您可以尝试在 podfile 中添加preinstall阶段挂钩，如https://stackoverflow.com/a/64495360/7477198中所示为我工作。 这对 git 更友好。

haseebeqx picture haseebeqx 于 2020-10-23
👍5

对我来说，即使在 RN 63.3 上，图像也不会出现在物理设备上。 作为一种解决方法，我在此处以 base 64 对图像进行编码： https ://www.base64-image.de/ 然后将其用作Image组件的source而不是require('imagePath')

adithyaBellary picture adithyaBellary 于 2020-10-24

如果 _currentFrame 为 nil，则添加[super displayLayer:layer];后可以显示图像

如果我理解正确，_currentFrame 应该是用于动画图像，所以如果它是静止图像，我们可以使用 UIImage 实现来处理图像渲染，不确定它是否是正确的修复。

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

你是个天才，你救了我的命！

TechMaagal picture TechMaagal 于 2020-10-27
🎉2

使用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

请问如何使用补丁包来应用它？ 使用补丁包的初学者。

你好！

1.- 运行“npm i -g 补丁包”
2.- 创建一个名为 patch 的新文件夹
3.- 在该文件夹中创建一个名为 react-native+0.63.0.patch 的新文件
4.- 添加上面的源代码。
5.- 在项目的根目录上运行“patch-package”

谢谢
在 RN 0.61.5 上为我工作得很好
我添加了一个名为react-native+0.61.5.patch的补丁文件

也修复了DylanVann/react-native-fast-image
cd ios && pod update SDWebImage

DanGDroid picture DanGDroid 于 2020-10-29
👍1

使用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 感谢您的修复！ 这里需要 RCT_METRO_PORT，还是针对您的项目？

joshhogg picture joshhogg 于 2020-11-03

Xcode 12.0.1 上的 RN 0.59.0。 和 ios 14. 任何解决方案？

PhoenixLeeSin picture PhoenixLeeSin 于 2020-11-12

Xcode 12.0.1 上的 RN 0.59.0。 和 ios 14. 任何解决方案？

3个解决方案：

  1. 在 node_modules 中手动修复问题
  2. 使用此修复库https://www.npmjs.com/package/react-native-fix-image
  3. 更新到 React Native 0.63.3
douglasjunior picture douglasjunior 于 2020-11-12
❤7

我可以确认这仍然存在于--configuration=Release中，即使在"react-native": "0.63.3"上也是如此。 但是，在--configuration=Debug中效果很好。

https://www.npmjs.com/package/react-native-fix-image无济于事，但会破坏内置
发布带有此错误的配置：

.../node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m:278:5: error: expected expression
  } else {
    ^
f4z3k4s picture f4z3k4s 于 2020-11-12
👍3

我的应用程序的用户也不会在 iOS 上体验到图像加载（来自 url），但并不是每个人都会出现这种情况，只有某些人会出现这种情况。 请解决这个问题。 我正在使用 React Native 0.63.3。
https://i.ibb.co/1vDc6kv/1.jpg <- 显示此问题的图片链接

MrVanosh picture MrVanosh 于 2020-11-12

@douglasjunior效果很好！ 非常感谢！

PhoenixLeeSin picture PhoenixLeeSin 于 2020-11-13

@RutsSantos对此也适用！

  1. npm install --save react-native-fix-image
  2. npx 反应原生修复图像
  3. 重建项目

为我工作🎉🎉🎉🎉🎉

Ericnsamba picture Ericnsamba 于 2020-11-15
👍15 ❤1

Xcode 12.0.1 上的 RN 0.59.0。 和 ios 14. 任何解决方案？

3个解决方案：

  1. 在 node_modules 中手动修复问题
  2. 使用此修复库https://www.npmjs.com/package/react-native-fix-image
  3. 更新到 React Native 0.63.3

另一个问题，我在node_modules中手动使用.1，它在显示网络图像时效果很好，但我无法显示本地图像，

PhoenixLeeSin picture PhoenixLeeSin 于 2020-11-15
👍1

我的应用程序的用户也不会在 iOS 上体验到图像加载（来自 url），但并不是每个人都会出现这种情况，只有某些人会出现这种情况。 请解决这个问题。 我正在使用 React Native 0.63.3。
https://i.ibb.co/1vDc6kv/1.jpg <- 显示此问题的图片链接

我发现发生在我身上的问题。 iOS 13 不支持 WebP，因此我需要使用 SDWebImageWebPCoder pod 安装 react-native-fast-image。

MrVanosh picture MrVanosh 于 2020-11-15

我不认为有人有 Microsoft App Center 构建脚本来解决这个问题吗？

krisbaum74 picture krisbaum74 于 2020-11-16

仅供参考，我也能够使用FastImage克服这个问题，它在升级 SDWebImage https://github.com/DylanVann/react-native-fast-image/issues/730后已修复（我现在无法升级到 0.63，因为它坏了其他工作，我最终会移动到最新版本）

就我而言，我有来自普通 RN 的动画图像，但我也可以使用 FastImage

const AnimatedImage = Animated.createAnimatedComponent(FastImage)

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

或者，修复图像包应该这样做，如果它在 Appcenter (@krisbaum74) 上不起作用，您应该能够通过在 repo 的根目录中创建appcenter-pre-build.sh并添加带有修复的脚本来做同样的事情那里

vshjxyz picture vshjxyz 于 2020-11-16

我正在使用 react-native 0.63.3，但在 iOS 14.1 上仍然面临这个问题。 这已在该版本中应用。 关于如何解决它的任何想法？

elinahovakimyan picture elinahovakimyan 于 2020-11-17

我正在使用 react-native 0.63.3，但在 iOS 14.1 上仍然面临这个问题。 这已在该版本中应用。 关于如何解决它的任何想法？

如果您升级到 0.63.3，您可能在该代码中遇到问题，请尝试此修复库https://www.npmjs.com/package/react-native-fix-image

Anzormumladze picture Anzormumladze 于 2020-11-17

我正在使用 react-native 0.63.3，但在 iOS 14.1 上仍然面临这个问题。 这已在该版本中应用。 关于如何解决它的任何想法？

如果您升级到 0.63.3，您可能在该代码中遇到问题，请尝试此修复库https://www.npmjs.com/package/react-native-fix-image

我已经升级到 0.63.3，这个库不能解决问题（图像加载在模拟器上，但不在物理设备上。

elinahovakimyan picture elinahovakimyan 于 2020-11-17

我正在使用 react-native 0.63.3，但在 iOS 14.1 上仍然面临这个问题。 这已在该版本中应用。 关于如何解决它的任何想法？

如果您升级到 0.63.3，您可能在该代码中遇到问题，请尝试此修复库https://www.npmjs.com/package/react-native-fix-image

我已经升级到 0.63.3，这个库不能解决问题（图像加载在模拟器上，但不在物理设备上。

我的问题与复制生产构建的资产有关，如here中所述，链接错误，然后重新生成捆绑包并重试

mateodaza picture mateodaza 于 2020-11-17

使用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

请问如何使用补丁包来应用它？ 使用补丁包的初学者。

你好！

1.- 运行“npm i -g 补丁包”
2.- 创建一个名为 patch 的新文件夹
3.- 在该文件夹中创建一个名为 react-native+0.63.0.patch 的新文件
4.- 添加上面的源代码。
5.- 在项目的根目录上运行“patch-package”

太感谢了！！！！ 你真的拯救了我的一天🙏❤️

MedRedha picture MedRedha 于 2020-11-17

如果 _currentFrame 为 nil，则添加[super displayLayer:layer];后可以显示图像

如果我理解正确，_currentFrame 应该是用于动画图像，所以如果它是静止图像，我们可以使用 UIImage 实现来处理图像渲染，不确定它是否是正确的修复。

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

为我工作！！！ 👍

BillelMidouni picture BillelMidouni 于 2020-11-22

我们还升级到了 0.63.3，并且在 iOS 14 上遇到了这个问题。
我们使用 RN-fetch-blob 包下载文件（其中的图像），并使用 Image 组件加载这些本地图像。

mauricioac picture mauricioac 于 2020-11-23

@krisbaum74

我不认为有人有 Microsoft App Center 构建脚本来解决这个问题吗？

使用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

请问如何使用补丁包来应用它？ 使用补丁包的初学者。

你好！

1.- 运行“npm i -g 补丁包”
2.- 创建一个名为 patch 的新文件夹
3.- 在该文件夹中创建一个名为 react-native+0.63.0.patch 的新文件
4.- 添加上面的源代码。
5.- 在项目的根目录上运行“patch-package”

只需按照上述修复并制作文件 react-native+0.63.0.patch

之后，在你的 appcenter-pre-build.sh 添加

npm i -g 补丁包
补丁包

这将在您的 AppCenter 构建中添加上述修复。

salman-khurshid-10p picture salman-khurshid-10p 于 2020-11-23
🎉1

我在 iOS 上有这个，并使用了 npx react-native-fix-image，效果很好。 现在我很沮丧地发现问题在 Android 上仍然存在！

这里没有提到安卓——我是唯一的吗？

我正在摇摆“react-native”：“0.61.5”

trickeyd picture trickeyd 于 2020-11-30

_const Image = Animatable.createAnimatableComponent(FastImage);_
工作不正常！

动画={'bounceIn'}不起作用

“反应原生”：“0.63.3”
“反应原生快速图像”：“^8.3.4”
“反应原生动画”：“^1.3.3”

IamMasterWayne picture IamMasterWayne 于 2020-12-01

我知道这被认为是 0.63 的补丁，但我可以确认这也适用于 0.62。 👍

MutableLoss picture MutableLoss 于 2020-12-07

它仍然无法在 IOS 14.2、Xcode 12.2、react-native 0.63.4 上运行
任何建议的修复都无济于事
更新
0.63.4 - 显示没有问题且没有任何补丁的远程图像，但本地图像在有或没有补丁的情况下都不起作用

paulignupplabs picture paulignupplabs 于 2020-12-07

我有一个 react-native 0.63.3 的项目，该补丁对我不起作用。 在应用补丁之前，我验证了 RCTUIImageViewAnimated 类并且它已经包含补丁代码，这是预期的，因为 #29420 已经根据更改 0.63.2 CHANGELOG https://github.com/react-native- 合并到 0.63.3 中社区/发布/blob/master/CHANGELOG.md#v0632。 所以补丁不会修复它，我认为它在 0.62.2 中有效，但我担心 0.63.3 中的更改会再次破坏 _local_ 图像加载。 这就解释了为什么一些开发人员降级到 <0.63.2 并应用补丁并且图像再次可见。 我宁愿只获得包含修复程序的 0.63.2。 无论如何，我都在犹豫降级，是的，即使是一个版本，因为我不想陷入过去;-)。 我创建了一个对我有用的解决方法。

基于使用 _external_ URL (RN 0.63.3) 时加载 _me_ 图像的事实。
我的解决方法，

  • 我遵循混合资产模式，您可以在此处获取参考https://reactnative.dev/docs/images#images -from-hybrid-apps-resources
  • 将图像添加到 iOS/Android 资产库。 这可以手动完成，通过脚本，XCode，......
  • 通过 _local_ URI 引用图像，而不是 _react 本机便利文件系统引用_，下面的 iOS 示例
<Image
  source={{ uri: 'app_icon' }}
  style={{ width: 40, height: 40 }}
/>
  • 创建了一个实用函数来根据平台获取 iOS 或 Android 参考资产 URI。 请阅读文档（https://reactnative.dev/docs/images#images-from-hybrid-apps-resources）并注意 URI 格式的差异。
  • 图像开始出现在 iOS 14.2 应用程序上！！ 我使用从 App Store 和 Ad Hoc 安装分发的应用程序进行了测试

它正在工作（对我来说）但是，缺点，

  • React Native 的引用方式太方便了，不能把它放在一边，我希望这个问题得到解决，我可以恢复正常。
  • 使可能的三个资产文件夹保持同步...是的，这是脚本，但开发人员很容易忘记，从现在开始的几个月内，有人会花 2 天时间弄清楚为什么图像似乎没有发现脚本已过时或任何东西你能想到的。
  • 我的模拟器中缺少图像，如果从模拟器运行，我将添加一个条件以从 react-native 资产文件夹中加载图像。 这个库可以帮助https://github.com/react-native-device-info/react-native-device-info （我还没试过）。
    我希望有人可以从这种解决方法中受益。
davidgamez picture davidgamez 于 2020-12-07

@RutsSantos对此也适用！

  1. npm install --save react-native-fix-image
  2. npx 反应原生修复图像
  3. 重建项目

为我工作🎉🎉🎉🎉🎉

不适用于 RN 0.61

azhararmar picture azhararmar 于 2020-12-10
👍1

我使用 RN 0.61，任何解决方案都不适合我。 请问，还有什么解决办法吗？

thuynt99 picture thuynt99 于 2020-12-11

我使用 RN 0.61，任何解决方案都不适合我。 请问，还有什么解决办法吗？

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

我的这个库，它仍然适用于 RN 0.61

huylvdev picture huylvdev 于 2020-12-11

我使用 RN 0.61，任何解决方案都不适合我。 请问，还有什么解决办法吗？

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

我的这个库，它仍然适用于 RN 0.61

嗨，Huy，我按照上面的指南一步一步地尝试，它显示修复图像完成。 但是在ios 14上仍然没有显示图像。其他ios版本仍然可以正常显示图像。
我使用 RN 0.61 和 ios 14。

thuynt99 picture thuynt99 于 2020-12-11
此页面是否有帮助？
0 / 5 - 0 等级

相关问题

phongyewtong picture phongyewtong  ·  3评论
jobsamuel picture jobsamuel  ·  3评论
DreySkee picture DreySkee  ·  3评论
aniss picture aniss  ·  3评论
josev55 picture josev55  ·  3评论