🦁

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

1 min read

問題

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

解決策

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

  1. npm i -g patch-package

  2. プロジェクトディレクトリ直下に"patches"という名前でフォルダ作成

  3. "patches"の中に、"react-native+0.63.0.patch"という名前でファイル作成

  4. 以下のソースコードをまるっと記述する

    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
    
  5. CLIで以下のコマンドを実行する

    patch-package


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

参考サイト

https://github.com/facebook/react-native/issues/29279

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

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

https://zenn.dev/taizo_pro/articles/c69a167f3d5bfd

Discussion

ログインするとコメントできます