iOS 14 升级中未加载 react-native 图像答案

【问题标题】：react-native image is not loaded in iOS 14 upgradeiOS 14 升级中未加载 react-native 图像
【发布时间】：2020-09-22 18:54:52
【问题描述】：

升级 iOS 14 版本后，React Native 构建失败。将 XCode 构建设置切换为“Legacy Build Settings”并成功构建。

但新版本不加载图像，图像的原始部分现在是白屏

<Image
  source={require('./images/home.png')}
/>

系统规格

Environment:
Xcode Version 12.0
Simulator: IPhone X - 2nd generation - 14.0
"react": "16.11.0",
"react-native": "0.62.2"

【问题讨论】：

您好，请查看 GitHub 上的 this issue 或 this one。它应该在 react native 0.63.2 中修复

标签： ios react-native cocoapods

【解决方案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",
}

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

【讨论】：

【解决方案2】：

我在 React Native 版本 "0.63.0" 上遇到了同样的问题。当我将 Xcode 更新到版本 12.0 (12A7209) 并且该项目未在 Simulator iPhone 11 (iOS 14) 上构建时。

解决方案（这些不是步骤，每个步骤都可能是解决方案）：

在版本 14 之前的 iOS 中使用模拟器
在Xcode的设置中使用Legacy Build Settings

注意：正确的解决方案应该来自苹果或React Native，以上解决方案是临时的。

【讨论】：

【解决方案3】：

我在 React 本机版本 0.62 上遇到了同样的问题。当我更新 Xcode 版本 12.0.1 Catalina MacOs 版本 10.15.7 最初本地和远程 url 没有加载之后，我在 0.62 版本中添加了补丁文件，当时本地和远程 url 图像显示在我的模拟器中，但在 TestFlight 构建和 iPhone 中不起作用设备 iOS 14 及更高版本。但不适用于 TestFlight 构建和 App Store。尝试了一些解决方案后，我将 react-native 版本 0.62 升级到 0.63.4 时修复了一些问题。没有任何补丁。并且跟随 ios Podfile 的变化。

# pod 'ReactCommon/callinvoker', :path => "../node_modules/react-native/ReactCommon" //注释
pod 'React-callinvoker', :path => "../node_modules/react-native/ReactCommon/callinvoker" //添加这一行

添加 pod 文件后更新 pod 并运行以下命令。

        1.     npm install --save react-native-fix-image.                      
        2.     npx react-native-fix-image
        3.    add pod install command in ios dierectory

在完成所有步骤后，在 iOS 14 及更高版本设备支持中运行的应用程序也可以在 TestFlight 构建和 Appstore 构建中运行，拯救我的生命。祝你好运！！

【讨论】：

【解决方案4】：

添加[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];
  }

【讨论】：