Console

Settings

Sign out

Notifications

Alexa

亚马逊应用商店

AWS

文档

Support

My Cases

Console

Vega开发者文档

主页

新手入门

设计和开发

应用发布

参考

支持

react-navigation版本2.0.0

开放Beta测试文档 作为预发布开放Beta测试的一项内容，亚马逊提供了此技术文档。随着亚马逊收到反馈并对功能进行迭代，所描述的这些功能可能会发生变化。有关最新功能的信息，请参阅发行说明。

React Navigation是适用于React Native应用的强大导航库，它为管理屏幕过渡、处理路由和实现导航模式（例如底部选项卡、堆栈导航和抽屉导航）提供了一种简单而高效的方式。

React Native没有像网页浏览器那样的内置导航API。React Navigation为您提供此功能，还提供用于在屏幕之间切换的iOS、Android和Vega手势和动画。

这是一个系统部署的库，可供适用于Vega的React Native应用使用，无需单独的安装过程。它作为自动链接库进行部署，您的应用在运行时会链接到该库。只能在库和为其构建的适用于Vega的React Native版本之间保证兼容性。

当您升级用于构建应用的适用于Vega的React Native版本时，最佳实践是同时升级它所依赖的库的版本。

安装

在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",
     ...
}

您可以添加@amazon-devices/react-native-screens依赖项来卸载不可见的屏幕。

已复制到剪贴板。

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

使用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={'屏幕' + 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={'屏幕' + 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>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  const [text, setText] = React.useState("点击检查触摸是否有效");
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <TouchableOpacity onPress={() => setText("触摸有效！")}>
        <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>
  );
}

Material底部选项卡示例：

Material底部选项卡需要以下依赖项：

已复制到剪贴板。

"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>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  const [text, setText] = React.useState("点击检查触摸是否有效");
  return (
    <View>
      <TouchableOpacity onPress={() => setText("触摸有效！")}>
        <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>
  );
}

Material顶部选项卡示例：

Material顶部选项卡需要以下依赖项：

已复制到剪贴板。

"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>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  const [text, setText] = React.useState("点击检查触摸是否有效");
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <TouchableOpacity onPress={() => setText("触摸有效！")}>
        <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的支持。

导航器类型

导航类型	描述
堆栈导航器	堆栈导航器是一种让您的应用在不同屏幕之间切换的方式，其中每个新屏幕都位于堆栈的顶部。
抽屉导航器	抽屉导航器在屏幕侧面渲染一个导航抽屉，可以通过手势打开和关闭该抽屉。
底部选项卡导航器	屏幕底部的简单选项卡栏，可让您在不同的路线之间切换。
Material底部选项卡导航器	屏幕底部以material-design为主题的选项卡栏，可让您通过动画在不同的路线之间切换。这封装了`react-native-paper`中的BottomNavigation组件。
Material顶部选项卡导航器	屏幕顶部以material-design为主题的选项卡栏，可让您通过点击选项卡或水平滑动来在不同的路线之间切换。这封装了`react-native-tab-view`程序包。

组件

组件名称	描述
`NavigationContainer`	它负责管理应用状态并将顶级导航器链接到应用环境。
`ServerContainer`	提供实用工具，使您的应用在服务器上以正确的导航状态渲染。
`Group`	用于对导航器内的多个屏幕进行分组的组件。
`Screen`	屏幕组件用于配置导航器内屏幕的各个方面。屏幕组件作为`createXNavigator`函数的一个属性返回。
`Link`	用于渲染可在按下时导航到屏幕的组件。在网页上使用时，它会渲染`<a>`标签。在其他平台上，它会使用`Text`组件。

实现详情

不支持的组件

Vega平台上不支持flipper-plugin-react-navigation和react-navigation__native-stack。

已知问题

Material底部选项卡

来回导航后，系统将卸载第2个屏幕上的组件。

抽屉

抽屉中的按钮未渲染 - 抽屉内有空白空间。这是已知问题，将在react-navigation升级后修复，该升级将与@amazon-devices/react-native-reanimated集成。

支持的版本

package name（程序包名称）	程序包版本	@amazon-devices/react-native-kepler版本
`@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

其他资源

有关其他库的信息，请参阅支持的第三方库和服务。