ステータスバー、スプラッシュスクリーン、アプリアイコンを設定する

ステータスバーを設定する

expo-status-bar ライブラリは、create-expo-app で作成したすべてのプロジェクトにあらかじめインストールされています。このライブラリは、アプリのステータスバーのスタイルを設定するための StatusBar コンポーネントを提供します。

app/_layout.tsx で次の手順を行います。

1. expo-status-bar から StatusBar をインポートします。
2. StatusBar と既存の Stack コンポーネントを React の Fragment コンポーネント でまとめます。

import { Stack } from 'expo-router';
import { StatusBar } from 'expo-status-bar';

export default function RootLayout() {
  return (
    <>
      <Stack>
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      </Stack>
      <StatusBar style="light" />
    </>
  );
}

それでは、Android と iOS でアプリの様子を見てみましょう。

アプリアイコン

プロジェクト内の assets/images ディレクトリに icon.png ファイルがあります。これがアプリアイコンです。1024px × 1024px の画像で、見た目は次のとおりです。

スプラッシュスクリーン画像と同様に、app.json ファイルの "icon" プロパティでアプリアイコンのパスを設定します。デフォルトでは、新しい Expo プロジェクトには "./assets/images/icon.png" という正しいパスが設定されているため、何も変更する必要はありません。

アプリストア向けにアプリをビルドする段階になると、Expo Application Services (EAS) がこの画像を使って、各デバイスに最適化されたアイコンを生成します。

アプリアイコンは Expo Go のさまざまな場所で確認できます。次は Expo Go の開発者メニューに表示されるアプリアイコンの例です。

スプラッシュスクリーン

スプラッシュスクリーンは、アプリのコンテンツが読み込まれる前に表示されます。アプリアイコンのような小さな画像を中央に配置し、アプリのコンテンツが表示できる状態になると非表示になります。

expo-splash-screen プラグインは、create-expo-app で作成したすべてのプロジェクトにあらかじめインストールされています。このライブラリは、スプラッシュスクリーンを設定するためのコンフィグプラグインを提供します。

app.json では、アプリアイコン (ダウンロード可能なアセット に含まれます) をスプラッシュスクリーン画像として使用するように、expo-splash-screen プラグインが次のスニペットですでに設定されています。何も変更する必要はありません。

{
  "plugins": [
    %%placeholder-start%%... %%placeholder-end%%
    [
      "expo-splash-screen",
      {
        "image": "./assets/images/splash-icon.png"
        %%placeholder-start%%... %%placeholder-end%%
      }
    ]
  ]
}

ただし、スプラッシュスクリーンをテストするには、Expo Go や 開発ビルド は使用できません。テストするには、アプリのプレビュービルドまたはプロダクションビルドを作成する必要があります。スプラッシュスクリーンの設定とテスト方法の詳細については、次のリソースを参照してみてください。

• スプラッシュスクリーンアイコンの作成 ガイドで、スプラッシュスクリーンアイコンの設定方法を確認できます。
• プレビュービルドの作成方法については、EAS チュートリアルの 内部配布 ガイドを参照してください。プロダクションビルドを作成する場合は、Android と iOS のガイドを参照してください。