React原生应用程序中的所有图像/快速图像在iOS 14测试版和Xcode12测试版上不起作用

Question

我已经把我的iPhone设备升级到了iOS 14测试版和Xcode12测试版。那么我的React Native项目上的所有图像/快速图像都无法显示(它们在以前的iOS 13和Xcode11.5上工作得很好)。

Answer 1

这是react原生<= 0.63.1和iOS 14的问题

此问题已修复并合并为react本机最新版本。但是如果你想现在修复你的项目，或者你正在使用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. OPEN操作

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

1. EDIT SOURCE

来自

#杂注mark - CALayerDelegate -(空)displayLayer：(CALayer*)层{ if (_currentFrame) { layer.contentsScale = self.animatedImageScale；layer.contents = (__bridge id)_currentFrame.CGImage；}}

至

#杂注mark - CALayerDelegate -(空)displayLayer：(CALayer *)layer { if (_currentFrame) { layer.contentsScale = self.animatedImageScale；layer.contents = (__bridge id)_currentFrame.CGImage；} else {超级显示层:层；}}

1. MAKE PATCH

npx patch-package react-native

为GIT跟踪的

1. MAKE修补程序文件

git add patches/*

用于自动应用PATCHES的

1. ADD包脚本

package.json

“脚本”：{ ..."postinstall"："patch-package"，}

无论何时安装软件包，它都会从所有的补丁文件中打补丁。

Answer 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

创建一个名为patches的新文件夹

在该文件夹中创建一个名为react-native+0.63.0.patch的新文件

添加上面的源代码

在项目根目录下运行patch-package

Answer 3

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