React Native ExpoでAndroidのナビゲーションバーの色を変更する方法

1. expo-cliを使用して新しいReact Nativeプロジェクトを作成します。

npx expo-cli init MyProject
cd MyProject

2. react-navigationパッケージをインストールします。

npm install @react-navigation/native

3. react-navigationの依存関係をインストールします。

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

4. App.jsファイルを開き、次のコードを追加します。

import 'react-native-gesture-handler';
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
export default function App() {
  return (
    <NavigationContainer>
      {/* ここにアプリのコンテンツを追加 */}
      <StatusBar style="auto" />
    </NavigationContainer>
  );
}

5. ナビゲーションバーの色を変更するために、StatusBarコンポーネントのbackgroundColorプロパティを設定します。

<StatusBar style="auto" backgroundColor="blue" />

上記の例では、ナビゲーションバーの背景色を青に設定していますが、任意の色を指定することができます。

6. アプリを実行します。

expo start

これでAndroidアプリのナビゲーションバーの色を変更することができます。