モンモンブログ

技術的な話など

React Native の Android 版ですべての画像が表示されない問題

画像をいっぱい表示するような(つまりごく一般的な)画面で、一部の画像しか表示されない問題が発生していました。

f:id:ymdsmn:20211211144125p:plain
グレーの部分が画像が表示できてないところ

こんな感じにランダムに歯抜けになっちゃいます。歯抜けの仕方はリロードするたびに変わります。とってもストレスです。

環境

React Nativeのバージョン: 0.63.4
端末のAndroidバージョン: 12

解決

GitHub のこのスレッドに答えがありました。

[Android] not all images are shown · Issue #13600 · facebook/react-native

AndroidManifest.xml<application> の属性に android:largeHeap="true" を1行追加するだけで改善しました。

$ vi android/app/src/main/AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.xx">

    <uses-permission android:name="android.permission.INTERNET" />
    <!-- (中略) -->

    <application
        android:name=".MainApplication"
        android:label="@string/app_name"
        android:icon="@mipmap/ic_launcher"
        android:roundIcon="@mipmap/ic_launcher"
        android:largeHeap="true"    <-追加
        android:allowBackup="false"
        android:theme="@style/AppTheme"
        tools:replace="android:allowBackup">

        <!-- (中略) -->

    </application>
</manifest>

android:largeHeap="true" は文字通り、ヒープ領域(メモリ領域)を大きめに取る設定のようです。(参考: <application>  |  Android デベロッパー  |  Android Developers

これだけでストレスなく画像が表示されるようになりました!

こころなしかアプリのパフォーマンスも改善したような?

やったね。