React Nativeでナビゲーションを実装！React Navigationの使い方入門

JavaScript

React Nativeで複数の画面を持つアプリを作るには、ナビゲーションの実装が必須です。その際によく使われるのが、React Navigation です。

本記事では、React Navigationの基本的な使い方を初心者向けに分かりやすく解説します！

1. React Navigationとは？

React Navigation は、React Nativeでナビゲーションを実装するための人気ライブラリです。
✅ 画面遷移 や タブメニュー を簡単に実装できる
✅ iOS・Android両対応（プラットフォームごとに最適化）
✅ Stackナビゲーション・Tabナビゲーション・Drawerナビゲーションが使える

2. React Navigationのインストール

まずは、React Navigationのライブラリをインストールしましょう。

npm install @react-navigation/native

次に、必要な依存パッケージをインストールします。

npm install react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated react-native-vector-icons

さらに、ナビゲーションの種類ごとのライブラリもインストールします。
今回は、最も基本的なStackナビゲーション を使うため、以下を追加します。

npm install @react-navigation/stack

インストールが完了したら、Expoを使用している場合は expo install でリンクを確認してください。

3. Stackナビゲーションの基本実装（画面遷移）

Stackナビゲーションは、1つの画面から別の画面へ遷移する仕組みです。
Webの「ページ遷移」に近い動作をします。

📌 ナビゲーションのセットアップ

App.js に以下のコードを書きます。

import React from "react";
import { View, Text, Button } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

const Stack = createStackNavigator();

const HomeScreen = ({ navigation }) => (
  <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
    <Text>ホーム画面</Text>
    <Button title="詳細画面へ" onPress={() => navigation.navigate("Details")} />
  </View>
);

const DetailsScreen = ({ navigation }) => (
  <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
    <Text>詳細画面</Text>
    <Button title="ホームに戻る" onPress={() => navigation.goBack()} />
  </View>
);

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

✅ ポイント

  • NavigationContainer でナビゲーション全体をラップする
  • createStackNavigator で Stackナビゲーターを作成
  • navigation.navigate("画面名") で別の画面へ遷移

4. Tabナビゲーション（タブメニュー）

タブメニューを使いたい場合は、Bottom Tab Navigator をインストールします。

npm install @react-navigation/bottom-tabs

📌 Tabナビゲーションの実装

import React from "react";
import { View, Text } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

const Tab = createBottomTabNavigator();

const HomeScreen = () => (
  <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
    <Text>ホーム画面</Text>
  </View>
);

const SettingsScreen = () => (
  <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
    <Text>設定画面</Text>
  </View>
);

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

✅ ポイント

  • createBottomTabNavigator を使ってタブメニューを作成
  • Tab.Navigator の中に Tab.Screen を定義

5. Drawerナビゲーション（サイドメニュー）

ハンバーガーメニューを実装する場合は、Drawer Navigation をインストールします。

npm install @react-navigation/drawer

📌 Drawerナビゲーションの実装

import React from "react";
import { View, Text } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createDrawerNavigator } from "@react-navigation/drawer";

const Drawer = createDrawerNavigator();

const HomeScreen = () => (
  <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
    <Text>ホーム画面</Text>
  </View>
);

const ProfileScreen = () => (
  <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
    <Text>プロフィール画面</Text>
  </View>
);

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Profile" component={ProfileScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

✅ ポイント

  • createDrawerNavigator でサイドメニューを作成
  • Drawer.Navigator に Drawer.Screen を追加

6. React Navigationのナビゲーションオプション

画面のタイトルやボタンをカスタマイズしたい場合は、options を設定できます。

📌 画面タイトルを変更

<Stack.Screen name="Home" component={HomeScreen} options={{ title: "ホーム画面" }} />

📌 ヘッダーを非表示にする

<Stack.Screen name="Details" component={DetailsScreen} options={{ headerShown: false }} />

7. まとめ：React Navigationで快適なナビゲーションを実装！

✅ Stackナビゲーション で画面遷移を実装
✅ Tabナビゲーション でタブメニューを追加
✅ Drawerナビゲーション でハンバーガーメニューを実装
✅ ナビゲーションオプション で見た目をカスタマイズ

🚀 React Navigationを活用して、スムーズな画面遷移を実装しよう！ 🎉

コメント

タイトルとURLをコピーしました