🦁

【ReactNative】iOS14 画像が表示されない問題対応

2021/09/25に公開

React Native

iOS14

tech

問題

iOS13の時はうまく画像表示されていたが、iOS14にUPDATEしたら画像が表示されなくなってしまった。

解決策

以下の流れでiOS14でも画像が表示されるようになった！

npm i -g patch-package
プロジェクトディレクトリ直下に"patches"という名前でフォルダ作成
"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

CLIで以下のコマンドを実行する

patch-package

上記の流れが完了し、Xcodeで再ビルドすると、画像がうまく表示されるようになった！！

参考サイト

もしこれでも上手く行かない場合は、キャッシュクリアで上手くいく場合があります。

ReactNativeのキャッシュクリアについては、以下のサイトにまとめていますので、参考に頂ければ幸いです。

問題

解決策

参考サイト

Discussion