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

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

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

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

1. expo-status-bar から StatusBar をインポートします。
2. GestureHandlerRootView の中で、Stack コンポーネントの後に StatusBar コンポーネントを追加します。style プロパティを light に設定して、暗い背景の上でステータスバーのテキストとアイコンが明るい色で表示されるようにします。

import { Stack } from 'expo-router';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { StatusBar } from 'expo-status-bar';

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

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

アプリアイコン

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

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

新しい Expo プロジェクトには、プラットフォーム固有のアイコンプロパティもあり、これらは "icon" よりも優先されます。

• Android では、"android.adaptiveIcon" プロパティが assets/images ディレクトリの android-icon-foreground.png、android-icon-background.png、android-icon-monochrome.png ファイルを使用します。ダウンロードしたアセット によってこれらのファイルは StickerSmash のアイコンに置き換えられているため、何も変更する必要はありません。
• iOS では、"ios.icon" プロパティが assets/expo.icon ファイルのデフォルトの Expo アイコンを使用します。iOS で icon.png を使用するには、app.json から次の "ios" プロパティを削除します。

{
  "expo": {
    "icon": "./assets/images/icon.png",
    %%placeholder-start%%... %%placeholder-end%%
    "ios": {
      "icon": "./assets/expo.icon"
    }
    %%placeholder-start%%... %%placeholder-end%%
  }
}

Expo Go にはこのアプリのアイコンは表示されません。アプリをビルドした後に、デバイス上でアイコンを確認できます。詳しくは、アプリアイコン ガイドを参照してください。

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

スプラッシュスクリーン

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

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

app.json では、アプリアイコン (ダウンロード可能なアセット に含まれます) をスプラッシュスクリーン画像として使用するように、expo-splash-screen プラグインがすでに設定されています。backgroundColor はデフォルトの Expo ブルー (#208AEF) です。スプラッシュスクリーンがアプリやアイコンと同じ暗い背景になるように、これを #25292e に変更します。

{
  "plugins": [
    %%placeholder-start%%... %%placeholder-end%%
    [
      "expo-splash-screen",
      {
        "backgroundColor": "#25292e",
        "image": "./assets/images/splash-icon.png",
        "imageWidth": 76
      }
    ]
  ]
}

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

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