はじめに
Xcode 12 でReact Native のプロジェクトをビルドしたところ、iOS 14 の端末 (実機・シミュレータ) でアプリ内の画像が表示されなかったので対処したメモです。
今回はReact Native のIssue で取り上げられているパッチを当てました。
追記
※React Native の新しいバージョンではXcode 12 への対応が行われているので、状況が許す限りReact Native のアップグレードを行うのがよいでしょう。
Release v0.63.3 · facebook/react-native
検証環境
- React Native: v0.61.5
- Xcode: v12.0 (12A7209)
問題
Xcode v12.0 でアプリをビルドすると、iOS 14 の端末で Image コンポーネントの画像が表示されない。
メモ
- Xcode 11, iOS 13: 画像が表示される
- Xcode 11, iOS 14: 画像が表示される (App Store からインストールしたアプリで確認)
- Xcode 12, iOS 13: 画像が表示される
- Xcode 12, iOS 14: 画像が表示されない
対処方法
patch-package を利用します。
$ npm i -g patch-package
プロジェクトルートで patches ディレクトリを作成し、 react-native+0.61.5.patch を作成します。
react-native+0.xx.x.patch のバージョン番号は、利用しているReact Native のバージョンと同じにします。
$ mkdir patches
$ touch patches/react-native+0.61.5.patch
パッチの内容を記述します。
Issue ではRN v0.63.0 の例が投稿されていましたが、古いバージョンでも上手くいくという投稿がありました。 今回検証したv0.61.5 でも同じ記述内容で大丈夫でした。
react-native+0.61.5.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
もう一度アプリをビルドして端末にインストールすると、 Image コンポーネントの画像が正しく表示されました。