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

Question

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

在安装该软件包之前，我的图像组件在两个平台（iOS 和 Android）中都运行良好。

我想这与 XCode 中处理图像的 packages/pods 有关，但我尝试了一些东西但没有用（我不是 [= 的专家） 45=]).

在 Android 他们工作正常。

我为解决问题所做的工作但没有奏效：

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

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

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

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

谢谢！

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

Answer 1

如果您不是运行最新的 react-native 版本或不打算升级到 react-native 的最新版本，Xcode12 构建和修复会出现图像问题，然后去

node_modules > react-native > Libraries > Images > RCTUIImageViewAnimated.m search for 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

Answer 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

Answer 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

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

React-native iOS not showing images (pods issue)

xcode

image

ios

cocoapods

react-native