スタックナビゲーターの作成

アプリでセットアップできるナビゲーションには、いくつかのタイプがあります。ここでは、StackNavigatorコンポーネントを使用してスタックナビゲーションを追加します。このコンポーネントは、画面および画面選択順序を追跡します。

NavigationContainerの追加

開始する前に、アプリをNavigationContainerでラップする必要があります。NavigationContainerはナビゲーションツリーを管理し、ナビゲーション状態（英語のみ）を格納します。StackNavigatorを使用するかどうかにかかわらず、このコンポーネントはすべてのナビゲータータイプをラップする必要があります。

• App.tsxを開き、VegaがサポートするナビゲーションライブラリからNavigationContainerをインポートします。
• LandingScreenコンポーネントを削除し、NavigationContainerコンポーネントに置き換えます。

import { NavigationContainer } from '@amazon-devices/react-navigation__native';

export const App = () => {
  return (
    <NavigationContainer>
    </NavigationContainer>
  );
}

StackNavigatorの作成

NavigationContainerを作成したので、StackNavigatorを追加しましょう。

• KeplerScript React Navigation StackライブラリからcreateStackNavigatorをインポートします。
• アプリのreturnステートメントの前でcreateStackNavigator()を呼び出し、レスポンスを「Stack」という変数に保存します。

createStackNavigator関数は、 ScreenプロパティとNavigatorプロパティを含むオブジェクトを返します。どちらもナビゲーションの構成に使用されるReactコンポーネントです。

更新されたApp.tsxのコードは次のようになります。

import * as React from 'react';
import { NavigationContainer } from '@amazon-devices/react-navigation__native';
import { createStackNavigator } from '@amazon-devices/react-navigation__stack';
import { LandingScreen } from './screens';

export const App = () => {
  const Stack = createStackNavigator();

  return (
    <NavigationContainer>
    </NavigationContainer>
  );
}

StackNavigatorに画面を追加

NavigationContainerとStackを作成したので、このスタックにLandingScreenとVideoDetailScreenを追加しましょう。まず、VideoDetailPageをインポートする必要があります。

• VideoDetailPageを画面のimportステートメントに追加します。

import { LandingScreen, VideoDetailScreen } from './screens';

• NavigationContainerにStack.Navigatorコンポーネントを追加します。
• Stack.Navigatorの下に、nameプロパティとcomponentプロパティを持つ2つのStack.Screenコンポーネントを追加します。
• nameプロパティとcomponentプロパティを、画面内の各コンポーネントの対応する名前に設定します。nameは文字列、componentはオブジェクトです。

<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name='LandingScreen' component={LandingScreen}/>
    <Stack.Screen name='VideoDetailScreen' component={VideoDetailScreen}/>
  </Stack.Navigator>
</NavigationContainer>

nameは、そのcomponentの名前と異なっていても構いません。たとえば、{LandingScreen}コンポーネントに「Landing」という名前を使用できます。

更新されたApp.tsxのコードは次のようになります。

import * as React from 'react';
import { NavigationContainer } from '@amazon-devices/react-navigation__native';
import { createStackNavigator } from '@amazon-devices/react-navigation__stack';
import { LandingScreen, VideoDetailScreen } from './screens';

export const App = () => {
  const Stack = createStackNavigator();

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name='LandingScreen' component={LandingScreen}/>
        <Stack.Screen name='VideoDetailScreen' component={VideoDetailScreen}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

テーマの定義

NavigationContainerにテーマを指定して、背景色を保つためのスタイルを設定しましょう。

• 対応するimportステートメントで、NavigationContainerの後にDefaultThemeを追加します。

import { NavigationContainer, DefaultTheme } from '@amazon-devices/react-navigation__native';

• 以下のコードを使用して、App関数内に「AppTheme」というconstを作成します。

const AppTheme = {
    ...DefaultTheme,
    colors: {
        ...DefaultTheme.colors,
        background: '#232F3E',
        text: 'white',
    }
};

...DefaultThemeを呼び出し、DefaultThemeをAppThemeにコピーします。テーマ内のcolorsスタイルをオーバーライドします。ただし、ここではbackgroundとtextのカラーをオーバーライドするだけであるため、オーバーライドしないcolorsを選択するために...DefaultTheme.colorsを追加しました。

• 新しいテーマをNavigationContainerのthemeプロパティに渡します。

<NavigationContainer theme={AppTheme}>

• アプリを更新して、外観を確認します。ヘッダーの上に大きな白いバーが表示されます。

これは、StackNavigatorのデフォルトのヘッダーです。これを非表示にするには、Stack.NavigatorにscreenOptionsプロパティを渡し、このプロパティを{{ headerShown: false }}に設定します。

<Stack.Navigator screenOptions={{ headerShown: false }}>

App.tsxのコードは次のようになります。

import * as React from 'react';
import { NavigationContainer, DefaultTheme } from '@amazon-devices/react-navigation__native';
import { createStackNavigator } from '@amazon-devices/react-navigation__stack';
import { LandingScreen, VideoDetailScreen } from './screens';

export const App = () => {
  const Stack = createStackNavigator();

  const AppTheme = {
    ...DefaultTheme,
    colors: {
        ...DefaultTheme.colors,
        background: "#232F3E",
        text: "white",
    },
  };

  return (
    <NavigationContainer theme={AppTheme}>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name='LandingScreen' component={LandingScreen}/>
        <Stack.Screen name='VideoDetailScreen' component={VideoDetailScreen}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

ナビゲーションの基本

これでナビゲーションを使用して画面を移動できるようになりました。操作する前に、いくつかの基本事項を見ていきましょう。

navigationオブジェクトは、propsオブジェクトを介してコンポーネントと画面に渡されます。それには、コンポーネント／画面のアロー関数のパラメーターで分割して使用するだけです（例：{ navigation }）。

別の画面に移動するには、navigation.navigateを呼び出し、移動先の画面の名前を渡します（例：navigation.navigate('LandingScreen')）。

追加パラメーターを渡す必要がある場合は、フィールドと値を含むオブジェクトとして渡すことができます（例：navigation.navigate('LandingScreen', { param1: 1, param2: false, param3: []})。これらの追加のパラメーターはrouteパラメーターを介して使用できます。このパラメーターはpropsでも使用できます。パラメーターを受け取る画面またはコンポーネントでrouteオブジェクトを分割し（例：{ route }）、paramsを介してパラメーターにアクセスできます（例：route.params.param1）。

このことを念頭に置いて、画面間のナビゲーションを設定しましょう。

次へ