React Nativeでは、ナビゲーションバーに表示されるタイトルを動的に変更することができます。これは、特定の画面に遷移した際に、その画面に関連する情報をタイトルとして表示する場合などに便利です。
まず、React Navigationというライブラリを使用してナビゲーション機能を実装します。React NavigationはReact Nativeのアプリケーションで一般的に使用されるナビゲーションソリューションであり、柔軟性があります。
以下の手順に従って、ダイナミックなナビゲーションタイトルを作成することができます。
-
React Navigationをインストールします。以下のコマンドを使用して、React Navigationおよび必要な依存関係をインストールします。
npm install @react-navigation/native
-
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
プロパティを使用して各画面のタイトルを設定しています。ここでは静的なタイトルを設定していますが、後で動的なタイトルに変更することができます。 -
動的なタイトルを実装します。画面に遷移する際に、タイトルをパラメータとして渡すことができます。以下の例では、
route.params.title
を使用してタイトルを取得し、表示しています。function DetailsScreen({ route }) { return ( <View> <Text>{route.params.title}</Text> </View> ); }
この例では、
DetailsScreen
コンポーネントがレンダリングされる際に、route.params.title
が表示されます。この値は遷移元の画面から渡されます。
以上の手順を実行すると、React Nativeアプリケーションでダイナミックなナビゲーションタイトルを作成することができます。これにより、画面間の遷移時に適切なタイトルを表示することができます。