image - React Native 应用程序中的所有图像/快速图像不适用于 iOS 14 测试版和 Xcode 12 测试版

Question

我已将我的 iPhone 设备升级到 iOS 14 测试版和 Xcode 12 测试版。然后我的 React Native 项目上的所有 Image/Fast Image 都无法显示（在以前的 iOS 13 和 Xcode 11.5 上运行良好）。

Answer 1

这是 react-native <= 0.63.1 和 iOS 14 的问题

此问题已修复并合并以响应本机最新版本。但是如果你现在想修复你的项目或者你使用的是 0.63.2 版本，有一个解决方案。（感谢https://bityl.co/3ksz）

第一个解决方案：如果你可以更新 React Native

将 react-native 更新到 v0.63.2 或更高版本

它已在此版本中修复：https ://github.com/react-native-community/releases/blob/master/CHANGELOG.md#v0632

第二个解决方案：如果你不能更新 React Native

1. 从以下位置打开文件：

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

2. 编辑源

从

#pragma mark - CALayerDelegate

- (void)displayLayer:(CALayer *)layer
{
  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  }
}

至

#pragma mark - CALayerDelegate

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

3. 制作补丁

npx patch-package react-native

4. 为 Git 跟踪补丁文件

git add patches/*

5. 为自动应用补丁添加包脚本

包.json

"scripts": {
  ...
  "postinstall": "patch-package",
}

每当您安装软件包时，它将从所有补丁文件中进行补丁。

Answer 2

更新到 React Native 0.63.2。在https://github.com/facebook/react-native/commit/b6ded7261544c703e82e8dbfa442dad4b201d428中修复

Answer 3

尝试react-native+0.63.0.patch按照此处的建议使用https://github.com/facebook/react-native/issues/29279#issuecomment-657201709

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

要使用补丁
运行npm i -g patch-package
创建一个名为补丁
的新文件夹在该文件夹中创建一个名为 react-native+0.63.0.patch 的新文件
添加上面的源代码在项目的根目录下
运行patch-package

Answer 4

我正在使用 React Native v0.60.6 和 React Native Fast Image v8.1.5。

升级 SDWebImagepod update SDWebImage对我有用。

更具体地说，我从 SDWebImage v5.8.1 升级到 v5.9.2。

Answer 5

Xcode 12 构建似乎有问题，要修复我去

node_modules > react-native > 库 > 图片 > RCTUIImageViewAnimated.m

并搜索if (_currentFrame)

将 else 块添加到 if 块中，如下代码所示

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

Answer 6

这与https://github.com/SDWebImage/SDWebImage/issues/3040有关。
只需SDWebImage在您的更新Podfile或删除Podfile.lock并重新安装。

Answer 7

如果您没有运行最新的 react-native 版本（> 0.63.2）或不打算升级到最新版本的 react-native。然后你可以成为你的临时修复，尝试改变 node_modules 如下

IOS 的 Xcode 12 修复

Answer 8

我的版本信息如下，

"react-native": "0.61.5",
"react-native-fast-image": "^7.0.2"

这适用于我使用 FastImage 展示的图片。

pod repo remove trunk
pod update SDWebImage

使用 react-native 自带的 Image 组件，需要修改源码。在文件node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m中，修改- (void)displayLayer:(CALayer *)layer方法可以如下：

-(void)displayLayer:(CALayer *)layer
{
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
   } else {// Fix the bug that react-native 0.61.5 does not show pictures on xcode12
     [super displayLayer:layer];
   }
}

这是github中关于FastImage的讨论

这是 github 中关于 react-native 的讨论

Answer 9

我不建议修改node_modules. 以下为我工作：

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

Answer 10

添加[super displayLayer:layer]后可以显示图像；如果我理解正确的话 _currentFrame 是 nil ，_currentFrame 应该是用于动画图像，所以如果它是静止图像，我们可以使用 UIImage 实现来处理图像渲染，不确定它是否是正确的修复。

//小路

node_modules > react-native > 库 > 图片 > RCTUIImageViewAnimated.m

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