React Native Academy · レッスン

React Navigationのインストールと設定

React Navigationと依存関係をインストールし、アプリをNavigationContainerでラップして、2つの画面を持つ最初のスタックナビゲーターを設定します

「React Navigationのインストールと設定」はCoddyKit上の無料React Native Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはReact Native Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Native Academyコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

What is React Navigation?

React Navigation is the most popular library for handling navigation in React Native apps. It provides a set of navigators — Stack, Tab, Drawer — that let you move between screens, pass data, and manage navigation history. React Navigation is JavaScript-based and works seamlessly with Expo and bare React Native projects.

Installing Core Dependencies

React Navigation requires its core package plus a set of native dependencies. Run the install command and then install the native stack and required gesture/animation libraries.

npm install @react-navigation/native
npx expo install react-native-screens react-native-safe-area-context

Installing the Native Stack Navigator

The native stack navigator from @react-navigation/native-stack uses native platform navigation components for iOS and Android, giving you better performance and a more native feel than the JS-only stack. Install it alongside the core package.

npm install @react-navigation/native-stack

Wrapping App in NavigationContainer

Every React Navigation setup requires NavigationContainer to be the root wrapper of your app. It manages the navigation tree, handles the back button on Android, and provides navigation context to all child components. Wrap your entire app in it inside App.js.

import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>
      {/* navigator goes here */}
    </NavigationContainer>
  );
}

Creating a Stack Navigator

Use createNativeStackNavigator() to create a stack navigator. The function returns a Navigator and a Screen component. Nest Stack.Screen components inside Stack.Navigator to register your screens.

import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name='Home' component={HomeScreen} />
      <Stack.Screen name='Details' component={DetailsScreen} />
    </Stack.Navigator>
  );
}

The initialRouteName Prop

By default the first screen listed in Stack.Navigator is the initial screen. You can explicitly set which screen appears first using the initialRouteName prop on Stack.Navigator. The value must match the name of one of the Stack.Screen children.

<Stack.Navigator initialRouteName='Details'>
  <Stack.Screen name='Home' component={HomeScreen} />
  <Stack.Screen name='Details' component={DetailsScreen} />
</Stack.Navigator>

Creating Simple Screen Components

Each screen registered in the navigator is a normal React component. React Navigation automatically injects navigation and route props into every registered screen component. You can use these props to navigate or read route parameters.

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

Putting It All Together

Combining NavigationContainer, the stack navigator, and your screen components gives you a working two-screen app. The first screen registered becomes the visible screen on startup. React Navigation handles the back button and navigation header automatically.

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

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

Customizing the Header Title

Each Stack.Screen accepts an options prop where you can customize the header. Set title to override the default screen name displayed in the navigation bar. You can also set headerShown: false to hide the header entirely.

<Stack.Screen
  name='Home'
  component={HomeScreen}
  options={{ title: 'My Home Page' }}
/>

Screen Options on the Navigator

Set screenOptions on the Stack.Navigator to apply default options to all screens. Individual screen options override the navigator defaults. This avoids repeating common settings like headerStyle or headerTintColor on every screen.

<Stack.Navigator
  screenOptions={{
    headerStyle: { backgroundColor: '#6200ee' },
    headerTintColor: '#fff',
    headerTitleStyle: { fontWeight: 'bold' },
  }}
>
  <Stack.Screen name='Home' component={HomeScreen} />
  <Stack.Screen name='Details' component={DetailsScreen} />
</Stack.Navigator>

Verifying Your Setup

Run npx expo start and open the app. You should see the Home screen with a navigation header. On iOS, the back button appears automatically when you navigate to Details. On Android, the hardware back button is handled by React Navigation. If the app crashes, double-check that react-native-screens and react-native-safe-area-context are installed.

Quick Check

Test your understanding of React Navigation setup concepts from this lesson.

Lesson Recap

In this lesson you learned: install the React Navigation core and native-stack packages, wrap your app in NavigationContainer, and define screens inside Stack.Navigator with Stack.Screen. Next up we explore navigating between screens and passing parameters.

よくある質問

「React Navigationのインストールと設定」レッスンは無料ですか？

はい。「React Navigationのインストールと設定」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Native Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Native Academyコースには全4レッスンが含まれています。

「React Navigationのインストールと設定」で何を学びますか？

React Navigationと依存関係をインストールし、アプリをNavigationContainerでラップして、2つの画面を持つ最初のスタックナビゲーターを設定しますブラウザで直接実行するハンズオンコードでReact Native Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Native Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Native Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「React Navigationのインストールと設定」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Native Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Native Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← React Native Academyに戻る