React Nativeでダイナミックなナビゲーションを作成する方法


React Nativeでは、ナビゲーションバーに表示されるタイトルを動的に変更することができます。これは、特定の画面に遷移した際に、その画面に関連する情報をタイトルとして表示する場合などに便利です。

まず、React Navigationというライブラリを使用してナビゲーション機能を実装します。React NavigationはReact Nativeのアプリケーションで一般的に使用されるナビゲーションソリューションであり、柔軟性があります。

以下の手順に従って、ダイナミックなナビゲーションタイトルを作成することができます。

  1. React Navigationをインストールします。以下のコマンドを使用して、React Navigationおよび必要な依存関係をインストールします。

    npm install @react-navigation/native
  2. React Navigationのスタックナビゲーターを作成します。スタックナビゲーターは画面間の遷移を管理するために使用されます。以下のコードは、スタックナビゲーターを作成する例です。

    import { createStackNavigator } from '@react-navigation/stack';
    const Stack = createStackNavigator();
    function App() {
     return (
       <NavigationContainer>
         <Stack.Navigator>
           <Stack.Screen
             name="Home"
             component={HomeScreen}
             options={{ title: 'ホーム' }}
           />
           <Stack.Screen
             name="Details"
             component={DetailsScreen}
             options={{ title: '詳細' }}
           />
         </Stack.Navigator>
       </NavigationContainer>
     );
    }

    上記の例では、optionsプロパティを使用して各画面のタイトルを設定しています。ここでは静的なタイトルを設定していますが、後で動的なタイトルに変更することができます。

  3. 動的なタイトルを実装します。画面に遷移する際に、タイトルをパラメータとして渡すことができます。以下の例では、route.params.titleを使用してタイトルを取得し、表示しています。

    function DetailsScreen({ route }) {
     return (
       <View>
         <Text>{route.params.title}</Text>
       </View>
     );
    }

    この例では、DetailsScreenコンポーネントがレンダリングされる際に、route.params.titleが表示されます。この値は遷移元の画面から渡されます。

以上の手順を実行すると、React Nativeアプリケーションでダイナミックなナビゲーションタイトルを作成することができます。これにより、画面間の遷移時に適切なタイトルを表示することができます。