React-native iOS 不显示图像（pod 问题）

Posted 2023-03-15

【中文标题】React-native iOS 不显示图像（pod 问题）

【英文标题】：React-native iOS not showing images (pods issue)

【发布时间】：2021-01-05 01:04:08

【问题描述】：

我在我的 react-native 应用程序中安装了一个包（具体来说，它是 react-navigation 的 createMaterialTopTabNavigator），但安装成功后，发生了崩溃（错误：@react-navigation/material-top-tabs/src/ index.tsx: 意外令牌 (16:12)），我正在尝试修复它，所以我修复了它，但后来 ios 上的图像停止工作。

在安装该软件包之前，我的 Image 组件在两个平台（iOS 和 android）上都能完美运行。

我猜这与在 XCode 中处理图像的包/pod 有关，但我尝试了一些东西但没有奏效（我不是 XCode 专家）。

在 Android 上它们运行良好。

我已经做了什么来解决问题但没有奏效：

-将我的 react-native 版本从“0.61.5”升级到“0.62”

-删除 pod，清理项目并使用“pod install”重新安装 pod

-试过this answer，但我想这不完全是我的问题。

你知道我还能做什么吗？我的想法不多了，我在互联网上找不到太多关于这个主题的信息。

谢谢！

更新 Image 组件使它的动画就像加载了图像一样，它只是不显示它。所以我确定这与 iOS 项目有关，也因为在 android 中运行良好。

【问题讨论】：

你能显示你的代码吗？您的屏幕中是否只有 1 个图像组件？还是包含在滚动视图中？

@Raptor 有很多 Image 组件，其中一些在滚动视图中，而另一些只是在视图中，但在我分解所有内容之前，所有 Image 组件都工作正常。

@Raptor this.setState( imageViewIsVisible: true )> this.setState( imageViewIsVisible: false ) animationType="fade" />

如果有人对如何使用 react-native 删除 Pod 有很好的指导，可能会有一些有用的东西

请编辑您的问题以添加您的代码并正确格式化。如果没有格式化，我无法阅读您的代码

【参考方案1】：

在 Xcode12 构建中发现图像问题，如果您没有运行最新的 react-native 版本或不打算升级到最新版本的 react-native，请转到

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

参考：https://github.com/facebook/react-native/issues/29279#issuecomment-658244428

【讨论】：

谢谢！ react-native 的东西，而不考虑 Xcode 更新。

我以后还需要为这个小改变而担心吗？

此修复适用于 react-native > 0.63.2 版本。我建议在升级到 0.63.2 或更高版本之前将此用作临时修复。

我遇到了同样的问题，在开发应用程序（连接到 Metro）时按照您发布的操作进行了修复，但在存档并将其上传到 testflight 后，图像仍然不显示。

您的归档流程可能存在问题（检查是否有其他 node_modules 文件夹）。我已将几个构建上传到 testflight，但我还没有遇到问题。

【参考方案2】：

而且，如果您不想一遍又一遍地添加它，您可以在PodFile 中替换这些行，

post_install do |installer|
  installer.pods_project.targets.each do |target|
    if target.name == "React"
      target.remove_from_project
  end
end

与，

post_install do |installer|
  installer.pods_project.targets.each do |target|
    if target.name == "React"
      target.remove_from_project
    end
  end
  find_and_replace("../node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m",
    "_currentFrame.CGImage;","_currentFrame.CGImage ; else  [super displayLayer:layer];")
end

def find_and_replace(dir, findstr, replacestr)
  Dir[dir].each do |name|
      text = File.read(name)
      replace = text.gsub(findstr,replacestr)
      if text != replace
          puts "Fix: " + name
          File.open(name, "w")  |file| file.puts replace 
          STDOUT.flush
      end
  end
  Dir[dir + '*/'].each(&method(:find_and_replace))
end

【讨论】：

嘿，这个对我有用。我的应用的 react-native 版本是 0.61.4

升级到更高的 rn 版本会解决这个问题，但如果不是快速修复，这个解决方案更简单更好。 (y) 这也比修补 npm 包要好，我的 react-native 版本是 62.2，而正在处理这个

【参考方案3】：

以下是步骤：-

run "npm i -g patch-package"

在项目的根目录上添加一个名为 patches 的新文件夹，并在该文件夹内创建一个名为 react-native+0.63.0.patch 的新文件，并将此代码粘贴到文件中

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

并在项目的根目录patch-package运行此命令