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

Posted 2023-02-23

【中文标题】React Native 应用程序中的所有图像/快速图像不适用于 iOS 14 测试版和 Xcode 12 测试版

【英文标题】：All Image/Fast Image in React Native app not working on iOS 14 beta and Xcode 12 beta

【发布时间】：2020-06-27 16:43:25

【问题描述】：

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

【问题讨论】：

这可能是构建系统或捆绑资源时出现问题。我在发布模式下运行的其他应用程序仍然显示图像，但有时当我尝试打开有图像的屏幕时应用程序崩溃。

哦，好吧，我实际上是在模拟器上运行，但没有显示任何图像。

不知道为什么，但今天我再次构建应用程序，问题已经消失，大声笑......

@EmBeCoRau 你可能更新了 Pods 并且它自动升级了 SDWebImage

【参考方案1】：

这是 react-native

此问题已修复并合并以响应本机最新版本。但是如果你现在想修复你的项目或者你使用的是 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

从以下位置打开文件：

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

编辑源

来自

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

制作补丁

npx patch-package react-native

为 GIT 跟踪补丁文件

git add patches/*

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

package.json

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

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

【讨论】：

嗯。我在 node_modules 文件夹中没有看到该文件。 0.59.10 在这里。

别忘了安装补丁包库

你应该添加到安装后npx patch-package

【参考方案2】：

按照这里的建议尝试使用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 创建一个名为 patch 的新文件夹 在该文件夹中创建一个名为 react-native+0.63.0.patch 的新文件 在上面添加源代码 在项目的根目录上运行patch-package

【参考方案3】：

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

【参考方案4】：

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

【参考方案5】：

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

Xcode 12 fix for IOS

【参考方案6】：

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

使用pod update SDWebImage 升级 SDWebImage 对我有用。

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

【讨论】：

我还需要在 pod 更新之前运行“pod repo remove trunk”，这是在之前的答案之一中编写的。否则它给出了一个我现在找不到的错误：/

【参考方案7】：

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

【参考方案8】：

我不建议修改node_modules。以下对我有用：

npm install --save react-native-fix-image npx react-native-fix-image 重建项目

【参考方案9】：

我的版本信息如下，

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

Here is the discussion for FastImage in github

Here is the discussion for react-native in github

【参考方案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];