Amazon Developer

Console

as

Settings
Sign out
Notifications
Alexa
Amazonアプリストア
AWS
ドキュメント
Support
Contact Us
My Cases

Console

as

開発
設計と開発
公開
リファレンス
サポート

react-navigationバージョン2.0.0

react-navigationバージョン2.0.0

React Navigationは、React Nativeアプリケーション向けの堅牢なナビゲーションライブラリです。画面遷移の管理、ルーティングの処理、ボトムタブ、スタック、ドロワーなどのナビゲーションパターンの実装を簡単かつ効率的に行うことができます。

React Nativeには、ウェブブラウザのような組み込みのナビゲーションAPIがありません。React Navigationでは、組み込みのナビゲーションAPIと共に、iOS、Android、Vegaのジェスチャーやアニメーションを使用して、画面間の遷移を実現します。

このライブラリはシステムにデプロイされるため、別途インストールプロセスを必要とすることなくVega向けReact Nativeアプリで利用できます。これは、アプリが実行時にリンクする自動リンクライブラリとしてデプロイされます。ライブラリとVega向けReact Nativeとの互換性は、ライブラリがターゲットとしているVega向けReact Nativeバージョンとの間でのみ保証されます。

アプリのビルドに使用しているVega向けReact Nativeのバージョンを上げる場合は、ベストプラクティスとして、依存するライブラリのバージョンも上げることをお勧めします。

インストール

  1. 必要なすべてのパッケージの依存関係をpackage.jsonファイルに追加します。以下のパッケージがすべて必要というわけではないため、アプリに必要なパッケージのサブセットを含める必要があります。

    クリップボードにコピーしました。

     "dependencies": {
     ...
     "@amazon-devices/react-navigation__bottom-tabs": "~2.0.0",
     "@amazon-devices/react-navigation__core": "~2.0.0",
     "@amazon-devices/react-navigation__devtools": "~2.0.0",
     "@amazon-devices/react-navigation__drawer": "~2.0.0",
     "@amazon-devices/react-navigation__elements": "~2.0.0",
     "@amazon-devices/react-navigation__material-bottom-tabs": "~2.0.0",
     "@amazon-devices/react-navigation__material-top-tabs": "~2.0.0",
     "@amazon-devices/react-navigation__native": "~2.0.0",
     "@amazon-devices/react-navigation__native-stack": "~2.0.0",
     "@amazon-devices/react-navigation__react-native-tab-view": "~2.0.0",
     "@amazon-devices/react-navigation__routers": "~2.0.0",
     "@amazon-devices/react-navigation__stack": "~2.0.0",
     ...
}
  2. @amazon-devices/react-native-screens依存関係を追加して、非表示になった画面をマウント解除することができます。

    クリップボードにコピーしました。

       "dependencies": {
      ...
      "@amazon-devices/react-native-screens": "~2.0.0"
      ...
}
  3. npm installコマンドを使用して、依存関係ファイルを再インストールします。

例

スタックの例：

スタックには以下の依存関係が必要です。

クリップボードにコピーしました。

 "dependencies": {
    ...
    "@amazon-devices/react-navigation__stack": "~2.0.0",
    "@amazon-devices/react-navigation__native": "~2.0.0",
    "@amazon-devices/react-native-screens": "~2.0.0",
    ...
}

App.tsxファイルに以下のコードサンプルを追加します。

クリップボードにコピーしました。


import {enableFreeze, enableScreens} from '@amazon-devices/react-native-screens';
import {NavigationContainer} from '@amazon-devices/react-navigation__native';
import {createStackNavigator} from '@amazon-devices/react-navigation__stack';
import * as React from 'react';
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';

function generateRandomColors(n: number): string[] {
  const generatedColors: string[] = [];

  for (let i = 0; i < n; i++) {
    const red = Math.floor(Math.random() * 128 + 64);
    const green = Math.floor(Math.random() * 128 + 64);
    const blue = Math.floor(Math.random() * 128 + 64);
    const hex = `#${red.toString(16).padStart(2, '0')}${green
      .toString(16)
      .padStart(2, '0')}${blue.toString(16).padStart(2, '0')}`;
    generatedColors.push(hex);
  }

  return generatedColors;
}

enableScreens();
enableFreeze();

const Stack = createStackNavigator();

const styles = StyleSheet.create({
  screenContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 30,
  },
  button: {
    width: 200,
    height: 100,
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonContainer: {
    flexWrap: 'wrap',
  },
});

const numberOfScreens = 4;

const colors = generateRandomColors(numberOfScreens);

const Screen = ({navigation, route}: {navigation: any; route: any}) => {
  const {id} = route.params;
  return (
    <View style={[styles.screenContainer, {backgroundColor: colors[id]}]}>
      <Text style={styles.text}>SCREEN {id}</Text>
      <View style={styles.buttonContainer}>
        {colors.map((color, buttonId) => (
          <TouchableOpacity
            onPress={() => navigation.navigate('Screen' + buttonId)}>
            <View style={[styles.button, {backgroundColor: color}]}>
              <Text>Go to screen #{buttonId}</Text>
            </View>
          </TouchableOpacity>
        ))}
        <TouchableOpacity onPress={() => navigation.goBack()}>
          <View style={[styles.button, {backgroundColor: 'white'}]}>
            <Text>{'前の画面に戻る'}</Text>
          </View>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const screenOptions = {animationEnabled: true};
export const App = () => (
  <NavigationContainer>
    <Stack.Navigator screenOptions={screenOptions} detachInactiveScreens>
      {colors.map((_, id) => (
        <Stack.Screen
          key={id}
          name={'Screen' + id}
          component={Screen}
          initialParams={{id}}
          options={screenOptions}
        />
      ))}
    </Stack.Navigator>
  </NavigationContainer>
);

ネイティブスタックの例：

ネイティブスタックには以下の依存関係が必要です。

クリップボードにコピーしました。

"dependencies": {
    ...
    "@amazon-devices/react-navigation__native-stack": "~2.0.0",
    "@amazon-devices/react-navigation__native": "~2.0.0",
    "@amazon-devices/react-native-screens": "~2.0.0",
    "@amazon-devices/react-native-safe-area-context": "~2.0.0",
    ...
}

App.tsxファイルに以下のコードサンプルを追加します。

クリップボードにコピーしました。


import {enableFreeze, enableScreens} from '@amazon-devices/react-native-screens';
import {createNativeStackNavigator} from '@amazon-devices/react-native-screens/native-stack';
import {NavigationContainer} from '@amazon-devices/react-navigation__native';
import * as React from 'react';
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';

function generateRandomColors(n: number): string[] {
  const generatedColors: string[] = [];

  for (let i = 0; i < n; i++) {
    const red = Math.floor(Math.random() * 128 + 64);
    const green = Math.floor(Math.random() * 128 + 64);
    const blue = Math.floor(Math.random() * 128 + 64);
    const hex = `#${red.toString(16).padStart(2, '0')}${green
      .toString(16)
      .padStart(2, '0')}${blue.toString(16).padStart(2, '0')}`;
    generatedColors.push(hex);
  }

  return generatedColors;
}

enableScreens();
enableFreeze();

const Stack = createNativeStackNavigator();

const styles = StyleSheet.create({
  screenContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 30,
  },
  button: {
    width: 200,
    height: 100,
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonContainer: {
    flexWrap: 'wrap',
  },
});

const numberOfScreens = 4;

const colors = generateRandomColors(numberOfScreens);

const Screen = ({navigation, route}: {navigation: any; route: any}) => {
  const {depth, id} = route.params;
  return (
    <View
      style={[
        styles.screenContainer,
        {backgroundColor: colors[id], margin: 20 * depth},
      ]}>
      <Text style={styles.text}>SCREEN {id}</Text>
      <View style={styles.buttonContainer}>
        {colors.map((color, buttonId) => (
          <TouchableOpacity
            onPress={() =>
              navigation.navigate('Screen' + buttonId, {depth: depth + 1})
            }>
            <View style={[styles.button, {backgroundColor: color}]}>
              <Text>Go to screen #{buttonId}</Text>
            </View>
          </TouchableOpacity>
        ))}
        <TouchableOpacity onPress={() => navigation.goBack()}>
          <View style={[styles.button, {backgroundColor: 'white'}]}>
            <Text>{'前の画面に戻る'}</Text>
          </View>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const screenOptions = {presentation: 'transparentModal', headerShown: false};

export const App = () => (
  <NavigationContainer>
    <Stack.Navigator screenOptions={screenOptions}>
      {colors.map((_, id) => (
        <Stack.Screen
          key={id}
          name={'Screen' + id}
          component={Screen}
          initialParams={{id, depth: 0}}
          options={screenOptions}
        />
      ))}
    </Stack.Navigator>
  </NavigationContainer>
);

ボトムタブの例：

ボトムタブには以下の依存関係が必要です。

クリップボードにコピーしました。

"dependencies": {
    ...
    "@amazon-devices/react-navigation__bottom-tabs": "~2.0.0",
    "@amazon-devices/react-navigation__native": "~2.0.0",
    "@amazon-devices/react-native-screens": "~2.0.0",
    ...
}

App.tsxファイルに以下のコードサンプルを追加します。

クリップボードにコピーしました。


import { enableScreens } from '@amazon-devices/react-native-screens';
import { createBottomTabNavigator } from '@amazon-devices/react-navigation__bottom-tabs';
import { NavigationContainer } from '@amazon-devices/react-navigation__native';
import * as React from 'react';
import { Text, TouchableOpacity,View } from 'react-native';

enableScreens();

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>ホーム!</Text>
    </View>
  );
}

function SettingsScreen() {
  const [text, setText] = React.useState("Press me to check if touches work");
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <TouchableOpacity onPress={() => setText("Touching works!")}>
        <View style={{ width: 200, height: 200, backgroundColor: "skyblue" }}>
          <Text>{text}</Text>
        </View>
      </TouchableOpacity>
      <Text>設定!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export const App = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator detachInactiveScreens>
        <Tab.Screen name="ホーム" component={HomeScreen} />
        <Tab.Screen name="設定" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

マテリアルボトムタブの例：

マテリアルボトムタブには以下の依存関係が必要です。

クリップボードにコピーしました。

"dependencies": {
    ...
    "@amazon-devices/react-navigation__material-bottom-tabs": "~2.0.0",
    "@amazon-devices/react-navigation__native": "~2.0.0",
    "@amazon-devices/react-native-screens": "~2.0.0",
    "@amazon-devices/react-native-safe-area-context": "~2.0.0",
    "react-native-paper": "4.12.1"
    ...
}

App.tsxファイルに以下のコードサンプルを追加します。

クリップボードにコピーしました。


import { enableFreeze, enableScreens } from '@amazon-devices/react-native-screens';
import { createMaterialBottomTabNavigator } from '@amazon-devices/react-navigation__material-bottom-tabs';
import { NavigationContainer } from '@amazon-devices/react-navigation__native';
import * as React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';

enableScreens();
enableFreeze();

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>ホーム!</Text>
    </View>
  );
}

function SettingsScreen() {
  const [text, setText] = React.useState("Press me to check if touches work");
  return (
    <View>
      <TouchableOpacity onPress={() => setText("Touching works!")}>
        <View style={{ width: 200, height: 200, backgroundColor: "skyblue" }}>
          <Text>{text}</Text>
        </View>
      </TouchableOpacity>
      <Text>設定!</Text>
    </View>
  );
}

const Tab =
  createMaterialBottomTabNavigator();

export const App = () => {
  return (
    <View style={{flex: 1}}>
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="ホーム" component={HomeScreen} />
        <Tab.Screen name="設定" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
    <View style={{flex: 1}}></View>
    </View>
  );
}

マテリアルトップタブの例：

マテリカルトップタブには以下の依存関係が必要です。

クリップボードにコピーしました。

"dependencies": {
    ...
    "@amazon-devices/react-navigation__material-top-tabs": "~2.0.0",
    "@amazon-devices/react-navigation__native": "~2.0.0",
    "@amazon-devices/react-native-screens": "~2.0.0"
    ...
}

App.tsxファイルに以下のコードサンプルを追加します。

クリップボードにコピーしました。


import { enableFreeze, enableScreens } from '@amazon-devices/react-native-screens';
import { createMaterialTopTabNavigator } from '@amazon-devices/react-navigation__material-top-tabs';
import { NavigationContainer } from '@amazon-devices/react-navigation__native';
import * as React from 'react';
import { Text, TouchableOpacity,View } from 'react-native';

enableScreens();
enableFreeze();

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>ホーム!</Text>
    </View>
  );
}

function SettingsScreen() {
  const [text, setText] = React.useState("Press me to check if touches work");
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <TouchableOpacity onPress={() => setText("Touching works!")}>
        <View style={{ width: 200, height: 200, backgroundColor: "skyblue" }}>
          <Text>{text}</Text>
        </View>
      </TouchableOpacity>
      <Text>設定!</Text>
    </View>
  );
}

const Tab =
createMaterialTopTabNavigator();

export const App = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="ホーム" component={HomeScreen} />
        <Tab.Screen name="設定" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

APIリファレンス

VegaのReact-Navigationライブラリは、React-Navigation v6で利用可能なすべてのAPIのサポートを追加します。

ナビゲーションタイプ 説明
スタックナビゲーター スタックナビゲーターは、アプリ内における画面間の遷移方法で、新しい画面はスタック上に積み重なるように配置されます。
ドロワーナビゲーター ドロワーナビゲーターは、ジェスチャーで開閉できるナビゲーションドロワーを画面の横にレンダリングします。
ボトムタブナビゲーター 画面下部にあるシンプルなタブバーで、ルートの切り替えを行うことができます。
マテリアルボトムタブナビゲーター 画面下部にあるマテリアルデザインをテーマとしてタブバーで、アニメーションをともなうルートの切り替えを行うことができます。react-native-paperのBottomNavigationコンポーネントをラップしています。
マテリアルトップタブナビゲーター 画面上部にあるマテリアルデザインをテーマにしたタブバーで、タブをタップしたり水平方向にスワイプしたりすることで、ルートの切り替えを行うことができます。react-native-tab-viewパッケージをラップしています。

コンポーネント

コンポーネント名 説明
NavigationContainer アプリの状態を管理し、最上位のナビゲーターをアプリ環境にリンクします。
ServerContainer アプリを適切なナビゲーション状態でサーバー上にレンダリングするためのユーティリティを提供します。
Group ナビゲーター内で複数の画面をグループ化するために使用します。
Screen ナビゲーター内の画面のさまざまな要素を構成するために使用されます。このコンポーネントは、createXNavigator関数の属性のひとつとして返されます。
Link 押されると画面に移動するコンポーネントをレンダリングします。ウェブで使用する場合は<a>タグをレンダリングし、他のプラットフォームではTextコンポーネントを使用します。

実装の詳細

サポートされていないコンポーネント

flipper-plugin-react-navigationとreact-navigation__native-stackは、Vegaプラットフォームではサポートされていません。

既知の問題

マテリアルボトムタブ

2番目の画面のコンポーネントが、他の画面に移動して再度戻るとマウント解除されます。

ドロワー

ドロワー内のボタンがレンダリングされず、ドロワー内に空白スペースが表示されます。これは既知の問題で、react-navigationがアップグレードされ、@amazon-devices/react-native-reanimatedと統合する際に修正される予定です。

サポートされているバージョン

パッケージ名（package name） パッケージのバージョン @amazon-devices/react-native-kepler version
@amazon-devices/react-navigation__bottom-tabs 2.0.0+6.5.10 2.0.0+rn0.72.0
@amazon-devices/react-navigation__core 2.0.0+6.4.10 2.0.0+rn0.72.0
@amazon-devices/react-navigation__devtools 2.0.0+6.0.20 2.0.0+rn0.72.0
@amazon-devices/react-navigation__drawer 2.0.0+6.6.5 2.0.0+rn0.72.0
@amazon-devices/react-navigation__elements 2.0.0+1.3.20 2.0.0+rn0.72.0
@amazon-devices/react-navigation__material-bottom-tabs 2.0.0+6.2.18 2.0.0+rn0.72.0
@amazon-devices/react-navigation__material-top-tabs 2.0.0+6.6.5 2.0.0+rn0.72.0
@amazon-devices/react-navigation__native 2.0.0+6.1.9 2.0.0+rn0.72.0
@amazon-devices/react-navigation__react-native-tab-view 2.0.0+3.4.4 2.0.0+rn0.72.0
@amazon-devices/react-navigation__routers 2.0.0+6.1.9 2.0.0+rn0.72.0
@amazon-devices/react-navigation__stack 2.0.0+6.3.19 2.0.0+rn0.72.0

関連リソース

その他のライブラリについては、サポート対象のサードパーティのライブラリとサービスを参照してください。

Last updated: 2025年9月30日

フォローする

サポート対象デバイス

amazon_developer_logo

© 2010-2025, Amazon.com, Inc. or its affiliates. All Rights Reserved. 無断複写·転載を禁じます。

利用規約

Amazon開発者ブログ

お問い合わせ