创建StackNavigator

可以在应用中设置几种类型的导航。我们将通过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。
• 在应用的返回语句之前调用createStackNavigator()，并将响应存储在名为“Stack”的变量中。

createStackNavigator函数返回一个包含2个属性的对象： Screen and 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 { LandingScreen, VideoDetailScreen } from './screens';

• 在NavigationContainer下添加Stack.Navigator组件。
• 在Stack.Navigator下添加两个Stack.Screen组件，其中包含name和component属性。
• 将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提供一个主题，再设定一些样式，以确保保持背景颜色。

• 在相应的导入语句中，在NavigationContainer后面添加DefaultTheme。

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

• 使用下面的代码在应用函数中创建一个名为“AppTheme”的const。

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

我们调用...DefaultTheme，以将DefaultTheme复制到我们的AppTheme中。我们准备覆盖主题中的colors样式。但是，我们只需要覆盖background和text颜色，因此我们添加了...DefaultTheme.colors来选出我们不需要覆盖的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）访问参数。

考虑到这点之后，让我们开始连接屏幕之间的导航。

下一步