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

Question

升级iOS14版本后，React Native构建失败。将 XCode 构建设置切换为“旧版构建设置”并成功构建。

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

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

Answer 1

我在 React Native 版本 "0.63.0" 上遇到了同样的问题。当我将 Xcode 更新为 12.0 (12A7209) 版本时，项目未在模拟器 iPhone 上构建11 (iOS 14).

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

使用模拟器 iOS 早于版本 14
在Xcode

Legacy Build Settings

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

Answer 2

这是 react-native <= 0.63.1 和 iOS 14

的问题

此问题已修复并合并到 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

编辑源代码

From

#pragma mark - CALayerDelegate

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

To

#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",
}

它会在您安装软件包时从所有补丁文件中打补丁。

Answer 3

我在 React native 版本 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" //commented
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 构建中拯救我的生命。祝你好运！！

Answer 4

添加[superdisplayLayer:layer]后可以显示图像； if _currentFrame is nil 如果我没看错的话，_currentFrame应该是动画图片，所以如果是静止图片，我们可以使用UIImage实现来处理图片渲染，不知道是否正确。

node_modules > react-native > Libraries > Images > RCTUIImageViewAnimated.m

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

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

react-native image is not loaded in iOS 14 upgrade

ios

cocoapods

react-native